vue 全局可调用的绑定手机组件
2020-08-18 本文已影响0人
前端小白初长成
调用方式 Vue.prototype.$msgTip.showTip({title: '绑定手机号 使用全部服务',bottomx:'0'})
import toastComponent from './bindingMobile.vue'
const MessageBoxs = {};
MessageBoxs.install = function(Vue, options) {
const MessageTipInstance = Vue.extend(toastComponent);
let currentMsg;
const initInstance = () => {
// 实例化vue实例
currentMsg = new MessageTipInstance();
let msgBoxEl = currentMsg.$mount().$el;
document.body.appendChild(msgBoxEl);
};
// 在Vue的原型上添加实例方法,以全局调用
Vue.prototype.$msgTip = {
showTip(options) {
if (!currentMsg) {
initInstance();
}
if (typeof options === 'string') {
currentMsg.title = options;
} else if (typeof options === 'object') {
Object.assign(currentMsg, options);
}
return currentMsg;
}
};
};
export default MessageBoxs
image.png