Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
fc3ad76a
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6037
Star
91
Fork
164
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
19
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
19
Issue
19
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
fc3ad76a
编写于
11月 08, 2024
作者:
DCloud_iOS_XHY
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
合并 rich-text.uvue 解决冲突
上级
6d9db730
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
95 addition
and
85 deletion
+95
-85
pages/component/rich-text/rich-text.uvue
pages/component/rich-text/rich-text.uvue
+95
-85
未找到文件。
pages/component/rich-text/rich-text.uvue
浏览文件 @
fc3ad76a
<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>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录