vue全局提示插件开发toast怎么使用

本篇内容介绍了“Vue全局提示插件开发toast怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：1.添加全局方法或者 property。2.添加全局资源：指令/过滤器/过渡等。3.通过全局混入来添加一些组件选项。4.添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。5.一个库，提供自己的 api，同时提供上面提到的一个或多个功能。

vue插件的编写方法一般分为以上5类，其注册与绑定机制如下：

export default {    install(Vue, options) {        Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如:  vue-custom-element            // 逻辑...        }        Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch            bind (el, binding, vnode, oldVnode) {                // 逻辑...            }            ...        })        Vue.mixin({            created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex                // 逻辑...            }            ...        })        Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现            // 逻辑...        }    }}

上方代码使用了es6部分语法列出了4种编写插件的方法，而install是注册插件主要调用的方法，包含了两个参数（Vue实例和自定义配置属性options）

开发插件

我们这里主要使用的是第四种方法，将我们的插件函数注册到Vue.prototype实例上面
首先我们在plugin里创建个toast文件夹用来放置插件,里面包含两个文件，toast.vue和toast.js，

然后在编写我们的样式结构文件toast.vue

这里我们使用了一个visible变量来控制提示框的显示，message为提示的消息

<template>      <div v-if="visible">          <div>{{message}}</div>      </div></template><script>export default {  data() {    return {      visible: false,      message: ""    };  }};</script>

接着在toast.js里面编写插件的方法与处理函数

import ToastComponent from './toast.vue'    //引入toast.vue组件export default {    // 导出一个对象，里面包含vue注册插件所调用的方法install    install: function (Vue) {        const ToastConstructor = Vue.extend(ToastComponent)    // 将toast.vue组件生成为Vue的子类        const instance = new ToastConstructor();    // 生成一个该子类的实例    instance.$mount(document.createElement('div'))    // 将这个实例挂载在新创建的div上，并加入到body中    document.body.appendChild(instance.$el)    // 通过Vue的原型注册一个方法$toast，有两个参数（msg为提示的文字，duration为延时关闭）    Vue.prototype.$toast = (msg, duration = 1500) => {        if (instance.visible) return;    // visible是toast.vue组件的一个变量，用来控制提示框的显示        instance.message = msg;        instance.visible = true;        setTimeout(() => {    // 默认延时1.5s关闭提示框            instance.visible = false;        }, duration);    }}}

这样我们就完成了组件的封装，是不是很简单

使用插件

现在把我们封装好的插件引入到main.js中

import toast from './plugin/toast'Vue.use(toast);

然后我们就可以在组件中使用它了

this.$toast('提示文字')

我们现在把toast.vue添加上样式和过度效果，让它看起来更加的友好，以下是toast.vue文件的全部内容

<template>   <!-- 全局提示框 -->   <transition name="slide-fade">      <div v-if="visible">          <div>{{message}}</div>      </div>  </transition></template><script>export default {  data() {    return {      visible: false,      message: ""    };  }};</script><style scoped>.dialog-tips{    min-width: 380px;    box-sizing: border-box;    border-radius: 4px;    border: 1px solid #e1f3D8;    position: fixed;    left: 50%;    top: 20px;    transfORM: translateX(-50%);    background-color: #f0f9eb;    overflow: hidden;    padding: 15px 15px 15px 20px;    display: flex;    align-items: center;    color: #67c23a;}.slide-fade-enter, .slide-fade-leave-to {  margin-top:-30px;  opacity: 0;}.slide-fade-enter-active,.slide-fade-leave-active {  transition: all .3s ease;}.slide-fade-enter-to,.slide-fade-leave {  margin-top:0px;  opacity:1;}</style>

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

“vue全局提示插件开发toast怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！