效果如下:
调用:
this.$messageBox({ text: '123123213', callback:action=>{ console.log(action);//confirm(确定)cancel(确定) } })
代码:
messageBox.js
import messageBoxVue from './messageBox.vue' export default { install(Vue){ let messageBox = Vue.extend(messageBoxVue); let $messageBox = new messageBox(); document.body.appendChild($messageBox.$mount().$el); Vue.prototype.$messageBox = (model => { model.show=true; $messageBox.model=model; }); } }messageBox.vue:
<template> <div> <transition name="bounce"> <div v-show="model.show" class="messageBox"> <div class="messageBox_header"> <div class="messageBox_header_title"> 提示 </