vue 项目中使用 JSX 以及 $createElement 使用方式

先说一下 element 中 Message 消息提示,MessageBox 弹框,Notification 通知组件怎么插入自定义的HTML?用 JSX 的方式怎么实现以及 vue 项目中怎么使用 JSX ?
我拿 element 组件中常用的 Notification 组件举例,在项目中怎么使用 JSX 以及怎么用 $createElement.
自定义HTML放在 message 中:

this.$notify({

message: `<div onclick="handleClick">查看详情</div>`,

dangerouslyUseHTMLString: true

});
  • 刚看是没有注意 createElement 的方式,发现如果按照我上面这么写,在 vue 中肯定不能实现。
  • 接下来用 createElement 的方式创建
const h = this.$createElement;

this.$notify({

title: '这是提示标题',

message: h('div', { on: { click: handleClick }, '查看详情'),

dangerouslyUseHTMLString: true,

});
  • 如果我们有多个嵌套的标签,需要怎么创建
const h = this.$createElement;
 this.$notify({
      title: '这是提示标题',
      message: h('div', null, [
          '这是一个段文字',
          h('a', 
            { attrs: { 
                href: 'https://www.jianshu.com/u/639201a5d397' , 
                target: '_blank'
              }
            },
            [
              h('el-button', {
                style: {
                  marginLeft: '20px'
                },
                attrs: {
                  size: 'small',
                  type: 'primary'
                },
                on: {
                  click: this.handleClick
                }
              }, '查看详情')
            ]
           ) 
        ]),
      dangerouslyUseHTMLString: true,
  });

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值