Vue插件
插件作用
插件通常用来为 Vue 添加全局功能
例如：
1、添加全局资源：指令/过滤器/过渡等。如 vue-touch
2、通过全局混入来添加一些组件选项。
3、添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
4、一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
开发
Vue官方规定插件必须暴露一个install方法，方法第一个参数为Vue实例
// myPlugin.js
export default function install (Vue) {
Vue.prototype.$plugin = 'myPlugin'
}
// 或者
export default myPlugin = {
install (Vue) {
Vue.prototype.$plugin = 'myPlugin'
}
}
// main.js
import myPlugin from '@/plugins/myPlugin'
Vue.use(myPlugin) // 作用：调用myPlugin中install方法
插件示例
使用插件方式封装 element-ui messageBox，实现全局页面内调用
// dialogPlugin.js
export const dialogPlugin = {
install(Vue) {
function dialog({
text,
confirm,
cancel,
confirmButtonText = '确定',
cancelButtonText = '取消',
type = 'warning',
title = '提示',
center = false
}) {
if (!text) {
throw new Error(text is require)
}
Vue.prototype.$confirm(text, title, {
confirmButtonText,
cancelButtonText,
type,
center
}).then(() => {
confirm && confirm()
}).catch(() => {
cancel && cancel()
})
}
Vue.prototype.$dialog = dialog
}
}
// main.js
import { dialogPlugin } from '@/plugins/dialog';
Vue.use(dialogPlugin)
// index.vue
this.$dialog({ text: 'xxxxx xxxx', title: 'xxxx', confirm: () => { console.log('xxx') } })
Original: https://www.cnblogs.com/zh1q1/p/16744682.html
Author: 吴知木
Title: Vue插件
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/599357/
转载文章受原作者版权保护。转载请注明原作者出处！