提示框 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
})

 

posted @ 2020-05-20 21:24  一大二王里  阅读(282)  评论(0编辑  收藏  举报