Vue通知提醒框(Notification)图文详解

目录

• 相关组件或插件运行时的项目依赖版本信息
• 五种样式效果如下图：
• ①创建通知提醒框组件Notification：
• ②在要使用的页面引入：
• 总结

相关组件或插件运行时的项目依赖版本信息

项目运行时依赖：vue@^2.6.12  [email protected]

项目开发时依赖：less@^4.1.3   less-loader@^5.0.0  vue-template-compiler@^2.6.12

"dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.6.5",
    "echarts": "^5.3.3",
    "swiper": "5.4.5",
    "vue": "^2.6.12",
    "vue-amazing-selector": "^0.2.6",
    "vue-lazyload": "1.3.3",
    "vue-router": "3.6.4",
    "vuedraggable": "^2.24.3"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.1",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.1.3",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.12",
    "webpack-bundle-analyzer": "^4.6.1",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "compression-webpack-plugin": "^6.0.2"
}

可自定义设置以下属性：

• 自动关闭的延时时长（duration），单位ms，默认4500ms
• 消息从顶部弹出时，距离顶部的位置（top），单位像素px，默认24px
• 消息从底部弹出时，距离底部的位置（bottom），单位像素px，默认24px
• 弹出位置（placement），可选：左上topLeft，右上topRight（默认），左下bottomLeft，右下bottomRight

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

• this.$refs.notification.open(notification) // 默认使用
• this.$refs.notification.info(notification) // info调用
• this.$refs.notification.success(notification) // success调用
• this.$refs.notification.error(notification) // error调用
• this.$refs.notification.warning(notification) // warning调用

五种样式效果如下图：

open()调用：

info()调用：

 success()调用：

error()调用：

warning()调用：

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

②在要使用的页面引入：

import Notification from '@/components/Notification'
components: {
    Notification
}
onShowNotification () {
      const notification = {
        title: 'Notification Title',
        description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
      }
      this.$refs.notification.open(notification) // 默认使用
      // this.$refs.notification.info(notification) // info调用
      // this.$refs.notification.success(notification) // success调用
      // this.$refs.notification.error(notification) // error调用
      // this.$refs.notification.warning(notification) // warning调用
},
onClose () { // 点击默认关闭按钮时触发的回调函数
      console.log('关闭notification')
}

总结

到此这篇关于Vue通知提醒框(Notification)的文章就介绍到这了,更多相关Vue通知提醒框Notification内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！