提示框 vue.extend
里面不能包含任何中文变量
<div> <el-dialog title="提示" :visible.sync="show" width="400px" :append-to-body="true" :show-close="false" :close-on-click-modal="false" :modal="false" top="30vh" custom-class="my_dg"> <span>{{content}}</span> <span slot="footer" class="dialog-footer"> <el-button @click="hide()">取 消</el-button> <el-button type="primary" @click="confirm()">确 定</el-button> </span> </el-dialog> </div>
define(function(require,exports,module){ "use strict"; const temp=require('./index.html'); module.exports={ name:'mydialog', template:temp, data:function (){ return{ content:'', show:true } }, methods:{ confirm(){ this.show = false this.callBack(true) }, hide(){ this.show = false this.callBack(false) } } } })
define(function(require,exports,module){ "use strict"; const Message=require('src/components/mydialog/index') let instance={} let currentMsg=null //实例化 let messageBox = Vue.extend(Message) messageBox.prototype.callBack = defaultCallBack const mydg=(options)=> { // 创建实例并且过滤参数 instance = new messageBox({ data: {...options} }).$mount() // 挂载实例 //document.body.appendChild(instance.$el) //return instance return new Promise((resolve,reject) => { currentMsg = {resolve,reject} }) } function defaultCallBack (action){ if(!action) currentMsg.reject() currentMsg.resolve() //instance.$el.remove() //删除 instance.$destroy() instance={} } module.exports=mydg })