95 行
4.6 KiB
Plaintext
95 行
4.6 KiB
Plaintext
<template>
|
||
<!-- #ifdef APP && !VUE3-VAPOR -->
|
||
<scroll-view style="flex: 1;">
|
||
<!-- #endif -->
|
||
<view>
|
||
<page-head title="rich-text-complex"></page-head>
|
||
<page-intro content="本页演示 rich-text 渲染复杂 HTML：富文本内容、selectable、itemclick 与 click 事件、父 view 与自身点击区分。"></page-intro>
|
||
<enum-data title="设置mode（仅Android平台支持，默认值为web）" :disabled="data.disabledEnum" :items="modeItemTypes" @change="onModeChange"></enum-data>
|
||
<view class="uni-padding-wrap uni-common-mt" @click="fViewClick('触发父 view click 事件')">
|
||
<rich-text id="richtext" :nodes="htmlString" :selectable="true" @itemclick="itemClick" @click="selfClick('触发 richtext click 事件')" :mode="data.mode"/>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef APP && !VUE3-VAPOR -->
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
|
||
import { ItemType } from '@/components/enum-data/enum-data-types';
|
||
|
||
type DataType = {
|
||
mode: string,
|
||
imageClicked: boolean,
|
||
fViewClicked: boolean,
|
||
selfClicked: boolean,
|
||
autoTest: boolean,
|
||
disabledEnum: boolean
|
||
}
|
||
|
||
const htmlString = ref('<p><a href="https://www.dcloud.io/hbuilderx.html">HBuilderX</a><br/><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img><h1>HBuilderX，轻巧、极速，极客编辑器</h1><p style="color:red;"><small>HBuilderX，轻巧、极速，极客编辑器 </small><big>HBuilderX，轻巧、极速，极客编辑器</big><strong>HBuilderX，轻巧、极速，极客编辑器</strong><i>HBuilderX，轻巧、极速，极客编辑器 </i><u>HBuilderX，轻巧、极速，极客编辑器</u><del>HBuilderX，轻巧、极速，极客编辑器</del></p><h2>uni-app x，终极跨平台方案</h2>、<p style="background-color: yellow;"><small>uni-app x，终极跨平台方案 </small><big>uni-app x，终极跨平台方案</big><strong>uni-appx，终极跨平台方案 </strong><i>uni-app x，终极跨平台方案 </i><u>uni-app x，终极跨平台方案 </u><del>uni-appx，终极跨平台方案</del></p><h3>uniCloud，js serverless云服务</h3><p style="text-decoration: line-through;"><small>uniCloud，js serverless云服务 </small><big>uniCloud，jsserverless云服务</big><strong>uniCloud，js serverless云服务 </strong><i>uniCloud，js serverless云服务 </i><u>uniCloud，jsserverless云服务</u><del>uniCloud，js serverless云服务</del></p><h4>uts，大一统语言</h4><p style="text-align: center;"><small>uts，大一统语言 </small><big>uts，大一统语言 </big><strong>uts，大一统语言</strong><i>uts，大一统语言</i><u>uts，大一统语言 </u><del>uts，大一统语言</del></p><h5>uniMPSdk，让你的App具备小程序能力</h5><h6>uni-admin，开源、现成的全端管理后台</h6><ul><li style="color: red; text-align: left;">uni-app x，终极跨平台方案</li><li style="color: green; text-align: center;">uni-app x，终极跨平台方案</li><li style="color: blue; text-align: right;">uni-app x，终极跨平台方案</li></ul><a href="https://uniapp.dcloud.net.cn">uni-app</a><br/><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img></p>')
|
||
const modeItems = ['web', 'native']
|
||
const modeItemTypes = ref([{ 'value': 0, 'name': 'web', 'checked': true }, { 'value': 1, 'name': 'native' }] as ItemType[])
|
||
const data = reactive({
|
||
mode: 'web',
|
||
imageClicked: false,
|
||
fViewClicked: false,
|
||
selfClicked: false,
|
||
autoTest: false,
|
||
disabledEnum: true
|
||
} as DataType)
|
||
|
||
// #ifdef APP-ANDROID || (APP-HARMONY && VUE3-VAPOR) || (APP-IOS && VUE3-VAPOR)
|
||
data.disabledEnum = false
|
||
// #endif
|
||
|
||
watch((): string => data.mode, (mode: string): void => {
|
||
modeItemTypes.value.forEach((item: ItemType): void => {
|
||
item.checked = item.name == mode
|
||
})
|
||
})
|
||
|
||
function itemClick(e : UniRichTextItemClickEvent) {
|
||
console.log(JSON.stringify(e.detail));
|
||
let clicktext = '';
|
||
if (e.detail.src != null) {
|
||
clicktext = '点击了图片，src = ' + e.detail.src;
|
||
data.imageClicked = true
|
||
} else if (e.detail.href != null) {
|
||
clicktext = '点击了链接，href = ' + e.detail.href;
|
||
}
|
||
if (data.autoTest) {
|
||
return;
|
||
}
|
||
uni.showModal({
|
||
content: clicktext,
|
||
showCancel: false
|
||
});
|
||
}
|
||
|
||
function fViewClick(e : string) {
|
||
console.log(e)
|
||
data.fViewClicked = true
|
||
}
|
||
|
||
function selfClick(e : string) {
|
||
console.log(e)
|
||
data.selfClicked = true
|
||
}
|
||
|
||
function onModeChange(value : number) {
|
||
data.mode = modeItems[value];
|
||
}
|
||
|
||
function getBoundingClientRectForRichtext() : DOMRect | null {
|
||
return uni.getElementById('richtext')?.getBoundingClientRect();
|
||
}
|
||
|
||
|
||
defineExpose({
|
||
data,
|
||
getBoundingClientRectForRichtext
|
||
})
|
||
</script>
|