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

╰半橙微兮° 2021-12-18 17:37 889阅读 0赞

语法：

它有三个参数

第一个：html标签名

第二个：配置的数据对象

第三个：内容

应用1：自定义弹窗

html:

<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
                });
            });
        }
    },

效果

![880812-20180611164644253-1390507162.png][]

未完待续。。。

参考链接：

*  [https://blog.csdn.net/kkae8643150/article/details/52910389][https_blog.csdn.net_kkae8643150_article_details_52910389]
 *  [https://blog.csdn.net/wbiokr/article/details/77894946][https_blog.csdn.net_wbiokr_article_details_77894946]

作者：smile.轉角

QQ：493177502

转载于:https://www.cnblogs.com/websmile/p/9167913.html

[880812-20180611164644253-1390507162.png]: /images/20211218/ef05e53e419a464fa979251199b5d83a.png
[https_blog.csdn.net_kkae8643150_article_details_52910389]: https://blog.csdn.net/kkae8643150/article/details/52910389
[https_blog.csdn.net_wbiokr_article_details_77894946]: https://blog.csdn.net/wbiokr/article/details/77894946