vue插件开发-toast

前言

在没有封装插件之前，如果不使用第三方插件，那么很多情况下我们会编写几个常用的组件来提供给页面使用，如Alert/Loading组件，而你可能需要在很多页面中引入并且通过components注册组件，但是像这样使用率很高的组件一般我们希望全局注册后直接就可以在相应页面使用，因此我们需要将他们封装成插件，这里我们编写一个toast全局提示插件来作个简单的介绍

 

插件

---

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。
2. 添加全局资源：指令/过滤器/过渡等。
3. 通过全局混入来添加一些组件选项。
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。

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

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

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

 

开发插件

我们这里主要使用的是第四种方法，将我们的插件函数注册到Vue.prototype实例上面

---

首先我们在plugin里创建个toast文件夹用来放置插件,里面包含两个文件，toast.vue和toast.js，

然后在编写我们的样式结构文件toast.vue
这里我们使用了一个visible变量来控制提示框的显示，message为提示的消息

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);
        }
    }
}

接着在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" class="dialog-tips">
          <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>

让我们来看看效果