rich-text.uvue

<template>
  <view>
    <page-head title="rich-text"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-btn-v">
        <navigator url="/pages/component/rich-text/rich-text-tags">
          <button type="primary">rich-text渲染单个HTML标签示例</button>
        </navigator>
      </view>
      <view class="uni-btn-v">
        <navigator url="/pages/component/rich-text/rich-text-complex">
          <button type="primary">rich-text渲染复杂HTML示例</button>
        </navigator>
      </view>
      <view class="uni-title">
        <text class="uni-subtitle-text">selectable</text>
      </view>
      <view class="text-box">
        <rich-text id="richtext" @click="changeText" style="border: 1px; border-style: solid; border-color: red;" :selectable="true"
          :nodes="text"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text: "<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>",
        richTextHeight: 0,
        richTextElement: null as UniElement | null
      }
    },
    onReady() {
      this.richTextElement = uni.getElementById('richtext') as UniElement
      setTimeout(() => {
        this.updateRichTextHeight()
      }, 500)
    },
    methods: {
      changeText() {
        if (this.text === "<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>") {
          this.text = "<h1>hello uni-app x!</h1><br/><h2>uni-app x，终极跨平台方案</h2>"
        } else {
          this.text = "<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>"
        }
        setTimeout(() => {
          this.updateRichTextHeight()
        }, 200)
      },
      updateRichTextHeight() {
        if (this.richTextElement != null) {
          const elRect = this.richTextElement!.getBoundingClientRect()
          this.richTextHeight = elRect.height
          console.log('richTextHeight:', this.richTextHeight)
        }
      }
    }
  }
</script>

<style>
  .text-box {
    padding: 20px 0;
    background-color: white;
  }
</style>