目的
实现一个简单版本的Vue弹框插件
实现
- 官方文档介绍
插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：
-
添加全局方法或者属性，如: vue-custom-element
-
添加全局资源：指令/过滤器/过渡等，如 vue-touch
-
通过全局 mixin 方法添加一些组件选项，如: vue-router
-
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
-
一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router
MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... }}复制代码 可以看出
- 通过
Vue.use(xxx)来调用插件内部的install方法 - 通过插件自身的
install方法，来为Vue实例添加属性或方法
- 实现一个简单的弹框插件
- 首先组册一个弹框的组件，与平时的单文件写法相同
复制代码 { {message}}
添加了两个属性，一个提示信息的message和一个控制显示的show
- 写入口文件index.js
首先导入组件
import toastComponent from './toast.vue'复制代码
对象内部需要注册一个install方法，供Vue.use()时使用
// install 方法，通过Vue.use()调用Toast.install = function () {}复制代码 install方法的内部实现
const Toast = {} // 需要导出的对象let vm // 存储Vue实例Toast.install = function (Vue, options) { // 挂载$toast到Vue的原型链中 // 后续只需要通过后this.$toast 即可使用 // 传递了四个参数 // message 展示的内容 // duration 时长 // callback 关闭时的回调函数 // config 暂时无用 Vue.prototype.$toast = function (message, duration, callback, config) { // 扩展构造对象 let Ext = Vue.extend(toastComponent) if (!$vm) { // 实例化一个对象 $vm = new Ext({ el: document.createElement('div') }) } // 给对象赋值 $vm.message = message || 'message' $vm.duration = duration || 2500 $vm.show = true // 挂载到dom中 document.body.appendChild($vm.$el) // 延时消失 setTimeout(() => { $vm.show = false typeof callback === 'function' && callback() }, $vm.duration)}复制代码 最后也需要导出我们的插件对象供外部使用
export default Toast复制代码
结束语
至此，一个简单的Vue插件就完成了，后续优化的话，还需要
- 增加弹出框的配置
- 自动加载Vue.use()
- ...
可以看出，我们可以将一些开发环境中经常需要使用到的函数，总结为一个单独的插件，之后在使用中只需要简单的调用即可，不需要引入多余的文件或者包；如时间格式的函数dateformat, 挂载到Vue的prototype中,之后持续需要this.dateformate(new Date, 'yyyy-mm-dd')这种调用形式即可
写的不好/有问题的地方，有望指出～