Vue3通知提醒框(Notification)

Vue3相关组件项目依赖版本信息

可自定义设置以下属性:

  • 消息的标题(title),默认'温馨提示'
  • 自动关闭的延时时长(duration),单位ms,默认4500ms
  • 消息从顶部弹出时,距离顶部的位置(top),单位像素px,默认24px
  • 消息从底部弹出时,距离底部的位置(bottom),单位像素px,默认24px
  • 弹出位置(placement),可选:左上topLeft,右上topRight(默认),左下bottomLeft,右下bottomRight

调用时可选以下五个方法对应五种不同样式:

  • notification.value.open(info) // 默认使用
  • notification.value.info(info) // info调用
  • notification.value.success(info) // success调用
  • notification.value.error(info) // error调用
  • notification.value.warn(info) // warn调用

五种样式效果如下图:

open()调用:

Vue3通知提醒框(Notification)_第1张图片

info()调用:

Vue3通知提醒框(Notification)_第2张图片

 success()调用:

Vue3通知提醒框(Notification)_第3张图片

error()调用:

Vue3通知提醒框(Notification)_第4张图片

warn()调用:

Vue3通知提醒框(Notification)_第5张图片

①创建通知提醒框组件Notification:




②在要使用的页面引入:




你可能感兴趣的:(vue3,less,ts,vue,typescript,less)