目的
实现一个简单版本的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实例添加属性或方法
- 实现一个简单的弹框插件
- 首先组册一个弹框的组件,与平时的单文件写法相同
<template>
<transition>
<div class='parent' v-if='show'>
<div class='child'>{{message}}</div>
</div>
</transition>
</template>
<script>
export default {
name: 'toast',
data () {
return {
message: 'nessage',
show: false
}
}
}
</script>
复制代码
添加了两个属性,一个提示信息的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')
这种调用形式即可
写的不好/有问题的地方,有望指出~