一、在Vue中编写插件流程
1、创建组件 components/message.vue
<template>
<div class="message" v-if="isShow">
<span>{{message}}</span>
</div>
</template> <script>
export default {
created () {
console.log(this.message)
},
props:{
message:{
type:String,
default:"成功"
},
isShow:{
type:Boolean,
default:true
}
},
methods:{
close(){
this.isShow=false
}
}
}
</script>
2、定义插件
Vue.js 的插件有一个公开方法 install方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，我们可以通过这个方法来定义插件
import MsgCom from "./message.vue";
const message = {};
//Vue中用install来定义插件
message.install = function (Vue) {
//避免重复install
if(message.installed)return;
//通过Vue.extend创建一个Vue的子类
const MessageInstance = Vue.extend(MsgCom);
let currentMsg;
const initInstance = () => {
//实例化vue子类
currentMsg = new MessageInstance();
//获取子类的挂载点
let msgEl = currentMsg.$mount().$el;
//将子类的挂载点挂载在页面上
document.body.appendChild(msgEl);
};
//在Vue的原型上添加实例，以全局调用
Vue.prototype.$msg = {
//在实例上创建方法调用插件
showMsg(options) {
if (!currentMsg) {
initInstance();
}
//将页面的对象传给currentMsg对象
Object.assign(currentMsg, options);
setTimeout(() => {
currentMsg.close();
}, );
}
}
}
export default message;
3、使用插件
import Message from "./publish/message";
Vue.use(Message);