$createElement實現自定義彈窗

<el-button type="text" @click="open4">點擊打開 Message Box</el-button>

methods: {
        open4() {
        const h = this.$createElement;
        const aTemp = 'https://www.baidu.com/?tn=98010089_dg&ch=8';
        this.$msgbox({
            title: '消息',
            message: h('p', null, [
                h('span', null, '內容可以是 '),
                h('a', {
                    //普通html特性
                    attrs: {
                        href:aTemp
                    },
                    //相當於`v-bind:style`
                    style: {
                        color: 'red',
                        fontSize: '14px'},
                    },
                    '百度'
                )
            ]),
            showCancelButton: true,
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            beforeClose: (action, instance, done) => {
                if (action === 'confirm') {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = '執行中...';
                    setTimeout(() => {
                        done();
                        setTimeout(() => {
                        instance.confirmButtonLoading = false;
                        }, 300);
                    }, 3000);
                } else {
                    done();
                }
            }
        }).then(action => {
            alert('>>>>>');
            this.$message({
                type: 'info',
                message: 'action: ' + action
            });
        });
    }
},

 

來源 https://www.cnblogs.com/websmile/p/9167913.html