记录Vue生成VNode的使用方式

背景

想要做一个网页端的聊天提醒,使用elementUi的notify组件,有消息来的时候直接弹出,但是在弹出层里面想要放置一个按钮,点击按钮可以直接弹出回复框这样子的,所以就需要在notify的message属性中使用VNode来渲染按钮。

正文

使用Vue的this.$createElement来创建VNode
具体的函数使用可以百度

可以参考这篇博客:https://www.cnblogs.com/yuxiaole/p/9353031.html

首先上效果图:

然后是代码:

const h = this.$createElement;
                    this.$notify({
                        title: '私聊消息',
                        message:h('div', null, [
                            h('span', null, this.chatLog),
                            h('br',null),
                            h('button', {
                                on:{
                                    click:()=>{
                                        this.replyPrivateChat(data.userId)
                                    }
                                }
                            }, "回复")
                        ]),
                        duration: 0,
                        position: 'bottom-right',
                        dangerouslyUseHTMLString: true,
                    });

其中需要注意一下的是:
在为button绑定click方法的时候,应当注意是函数本身,而不是一个函数的引用,如果写成函数的引用如:

####错误示范####
h('button', {
         on:{
           click: this.replyPrivateChat(data.userId)
           }
         }, "回复")

则会发现单击无效,仅在消息提醒进来渲染dom的时候会被触发一次!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值