【vue】vue +element 搭建項目，$createElement使用

語法：

它有三個參數

　　第一個：html標簽名

　　第二個：配置的數據對象

　　第三個：內容

應用1：自定義彈窗

html:

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

js

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://blog.csdn.net/kkae8643150/article/details/52910389
• https://blog.csdn.net/wbiokr/article/details/77894946

作者：smile.轉角

QQ：493177502