微信小程序渲染html字符串

88 阅读1分钟

rich-text

使用rich-text组件可以渲染html元素

属性nodes

接收两种类型的参数

<rich-text nodes="{{htmlSnip}}"></rich-text>

1.string

<div class="div_class">
  <h1>Title</h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>.
  </p>
</div>

2.node

nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you're gonna get.'
      }]
    }]

添加自己的样式

const data = htmlStr.replace(/img/g, "img class='img'")