1.新建plugins.js文件
(function () {
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
alert('全局方法被调用-myGlobalMethod');
}
// 2. 添加全局指令
Vue.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
// 逻辑...
},
inserted(el, binding) {
el.innerHTML = 'MyPlugin.install-my-directive指令被调用了' + binding.value
}
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (value) {
// 逻辑...
alert("VUE 实例方法被调用了" + value)
}
}
window.MyPlugin = MyPlugin
})()
2. 调用插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-my-directive="content"></p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./plugins.js"></script>
<script>
//1. 引入插件
Vue.use(MyPlugin)
var vm=new Vue({
el:'#app',
data:{
content:'hello'
}
})
//调用插件中的实例方法
vm.$myMethod('test')
//调用全局反复，注意是Vue进行调用，不是vm
Vue.myGlobalMethod()
</script>
</body>
</html>