From fc3ad76ac843828dadbadd2ef53516f1fc3b370a Mon Sep 17 00:00:00 2001
From: XHY <xionghuayu@dcloud.io>
Date: Fri, 8 Nov 2024 20:07:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=20rich-text.uvue=20=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/rich-text/rich-text.uvue | 180 ++++++++++++-----------
 1 file changed, 95 insertions(+), 85 deletions(-)

diff --git a/pages/component/rich-text/rich-text.uvue b/pages/component/rich-text/rich-text.uvue
index 6b3298b6..f4770514 100644
--- a/pages/component/rich-text/rich-text.uvue
+++ b/pages/component/rich-text/rich-text.uvue
@@ -1,92 +1,102 @@
-<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>
+<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>
+        <button type="default" @click="changeText">修改文本内容</button>
+      </view>
+      <view class="text-box" id="rich-text-parent" @click="richTextParentClick">
+        <rich-text id="richtext" style="border: 1px; border-style: solid; border-color: red;" :selectable="true"
+          :nodes="text"></rich-text>
+        <view>
+          <text>rich-text-parent</text>
+          <text id='rich-text-str'>{{richTextStr}}</text>
+        </view>
       </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>
-        <button type="default" @click="changeText">修改文本内容</button>
-      </view>
-      <view class="text-box" id="rich-text-parent" @click="richTextParentClick">
-        <rich-text id="richtext" style="border: 1px; border-style: solid; border-color: red;" :selectable="true"
+      <view class="text-box2">
+        <rich-text style="height: 80px;" :selectable="true"
           :nodes="text"></rich-text>
-        <view>
-          <text>rich-text-parent</text>
-          <text id='rich-text-str'>{{richTextStr}}</text>
-        </view>
-      </view>
-    </view>
-  </view>
-  <rich-text v-if="autoTest" id="test-rich-text" :nodes="testNodes" :selectable="true" @itemclick="itemClickForTest" style="position: fixed;width: 100px;height: 100px;"></rich-text>
-</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,
-        // 自动化测试
-        autoTest: false,
-        testNodes: '<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img>',
-        isItemClickTrigger: false,
-        richTextStr: false
-      }
-    },
-    onReady() {
-      this.richTextElement = uni.getElementById('richtext') as UniElement
-      setTimeout(() => {
-        this.updateRichTextHeight()
-      }, 1200)
-    },
-    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)
-        }
-      },
-      // 自动化测试
-      itemClickForTest(_ : RichTextItemClickEvent) {
-        this.isItemClickTrigger = true;
-      },
-      getBoundingClientRectForTest() : DOMRect {
-        return uni.getElementById('test-rich-text')?.getBoundingClientRect()!;
-      },
-      getWindowInfoForTest() : GetWindowInfoResult {
-        return uni.getWindowInfo();
-      },
-      richTextParentClick() {
-        this.richTextStr = true;
-      }
-    }
+      </view>
+    </view>
+  </view>
+  <rich-text v-if="autoTest" id="test-rich-text" :nodes="testNodes" :selectable="true" @itemclick="itemClickForTest" style="position: fixed;width: 100px;height: 100px;"></rich-text>
+</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,
+        // 自动化测试
+        autoTest: false,
+        testNodes: '<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img>',
+        isItemClickTrigger: false,
+        richTextStr: false
+      }
+    },
+    onReady() {
+      this.richTextElement = uni.getElementById('richtext') as UniElement
+      setTimeout(() => {
+        this.updateRichTextHeight()
+      }, 1200)
+    },
+    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)
+        }
+      },
+      // 自动化测试
+      itemClickForTest(_ : RichTextItemClickEvent) {
+        this.isItemClickTrigger = true;
+      },
+      getBoundingClientRectForTest() : DOMRect {
+        return uni.getElementById('test-rich-text')?.getBoundingClientRect()!;
+      },
+      getWindowInfoForTest() : GetWindowInfoResult {
+        return uni.getWindowInfo();
+      },
+      richTextParentClick() {
+        this.richTextStr = true;
+      }
+    }
+  }
+</script>
+
+<style>
+  .text-box {
+    padding: 20px 0;
+    background-color: white;
   }
-</script>
 
-<style>
-  .text-box {
-    padding: 20px 0;
+  .text-box2 {
+    top: 20px;
     background-color: white;
   }
+
 </style>
-- 
GitLab