Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 fc3ad76a 编写于 作者: DCloud_iOS_XHY's avatar DCloud_iOS_XHY
浏览文件
操作

合并 rich-text.uvue 解决冲突

上级 6d9db730
隐藏空白更改
内联 并排
Showing with 95 addition and 85 deletion
pages/component/rich-text/rich-text.uvue
浏览文件 @ fc3ad76a
<template> <template>
<view> <view>
<page-head title="rich-text"></page-head> <page-head title="rich-text"></page-head>
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v"> <view class="uni-btn-v">
<navigator url="/pages/component/rich-text/rich-text-tags"> <navigator url="/pages/component/rich-text/rich-text-tags">
<button type="primary">rich-text渲染单个HTML标签示例</button> <button type="primary">rich-text渲染单个HTML标签示例</button>
</navigator> </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>
<view class="uni-btn-v"> <view class="text-box2">
<navigator url="/pages/component/rich-text/rich-text-complex"> <rich-text style="height: 80px;" :selectable="true"
<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> :nodes="text"></rich-text>
<view> </view>
<text>rich-text-parent</text> </view>
<text id='rich-text-str'>{{richTextStr}}</text> </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>
</view> </template>
</view>
</view> <script>
<rich-text v-if="autoTest" id="test-rich-text" :nodes="testNodes" :selectable="true" @itemclick="itemClickForTest" style="position: fixed;width: 100px;height: 100px;"></rich-text> export default {
</template> data() {
return {
<script> text: "<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>",
export default { richTextHeight: 0,
data() { richTextElement: null as UniElement | null,
return { // 自动化测试
text: "<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>", autoTest: false,
richTextHeight: 0, testNodes: '<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img>',
richTextElement: null as UniElement | null, isItemClickTrigger: false,
// 自动化测试 richTextStr: false
autoTest: false, }
testNodes: '<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img>', },
isItemClickTrigger: false, onReady() {
richTextStr: false this.richTextElement = uni.getElementById('richtext') as UniElement
} setTimeout(() => {
}, this.updateRichTextHeight()
onReady() { }, 1200)
this.richTextElement = uni.getElementById('richtext') as UniElement },
setTimeout(() => { methods: {
this.updateRichTextHeight() changeText() {
}, 1200) 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>"
methods: { } else {
changeText() { this.text = "<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>"
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>" setTimeout(() => {
} else { this.updateRichTextHeight()
this.text = "<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>" }, 200)
} },
setTimeout(() => { updateRichTextHeight() {
this.updateRichTextHeight() if (this.richTextElement != null) {
}, 200) const elRect = this.richTextElement!.getBoundingClientRect()
}, this.richTextHeight = elRect.height
updateRichTextHeight() { console.log('richTextHeight:', this.richTextHeight)
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 {
itemClickForTest(_ : RichTextItemClickEvent) { return uni.getElementById('test-rich-text')?.getBoundingClientRect()!;
this.isItemClickTrigger = true; },
}, getWindowInfoForTest() : GetWindowInfoResult {
getBoundingClientRectForTest() : DOMRect { return uni.getWindowInfo();
return uni.getElementById('test-rich-text')?.getBoundingClientRect()!; },
}, richTextParentClick() {
getWindowInfoForTest() : GetWindowInfoResult { this.richTextStr = true;
return uni.getWindowInfo(); }
}, }
richTextParentClick() { }
this.richTextStr = true; </script>
}
} <style>
.text-box {
padding: 20px 0;
background-color: white;
} }
</script>
<style> .text-box2 {
.text-box { top: 20px;
padding: 20px 0;
background-color: white; background-color: white;
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或