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') } })
标签:插件,Vue,confirm,text,myPlugin,dialog
From: https://www.cnblogs.com/zh1q1/p/16744682.html