Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fcfcaac3 1 parent ddfaf9cd

test(rich-text): 添加富文本渲染测试页面 

- 添加 v-html 渲染测试页面 (index.vue)
- 添加 mp-html 组件测试页面 (index1.vue)
- 测试内容：HTML实体解析、a标签替换为div、图片预览、文件链接点击
- 使用 useFileOperation 处理 PDF 文件打开

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Inline Side-by-side
Showing 3 changed files with 726 additions and 0 deletions
......@@ -37,6 +37,7 @@ const pages = [
if (process.env.NODE_ENV === 'development') {
pages.push('pages/test-tabs/index')
pages.push('pages/rich-text-test/index') // 富文本渲染测试页面
// pages.push('pages/nfcTest/index')
// pages.push('pages/tailwindTest/index')
}
......
/*
* @Date: 2022-09-26 14:36:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-26 14:41:01
* @FilePath: /swx/src/pages/activityDetail/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '活动详情',
usingComponents: {
},
}
<!--
* @Date: 2026-02-27
* @Description: v-html 测试页面 - 验证 v-html 在 Taro 中是否可用
*
* @purpose
* 验证 v-html 指令在 Taro + Vue3 小程序中是否能正常运行
* 对比 index1.vue 中 mp-html 组件的绑定方式
*
* @test-cases
* 1. v-html 渲染响应式变量
* 2. 内容切换响应性
* 3. HTML 标签解析
-->
<template>
<view class="rich-text-test-page">
<!-- 导航栏 -->
<NavHeader title="v-html 测试" />
<view class="test-container">
<!-- 测试说明 -->
<view class="test-info">
<text class="test-title">测试项目：</text>
<text class="test-item">1. v-html 渲染 {{ renderTest ? '✅' : '❌' }}</text>
<text class="test-item">2. 内容切换 {{ contentSwitchTest ? '✅' : '❌' }}</text>
<text class="test-item">3. HTML 解析 {{ htmlParseTest ? '✅' : '❌' }}</text>
</view>
<!-- v-html 渲染区域 -->
<view class="v-html-container">
<text class="container-title">v-html 绑定区域：</text>
<view id="taro_html" v-html="testHtml" class="taro_html"></view>
</view>
<!-- 测试结果 -->
<view class="test-results">
<text class="result-title">测试结果：</text>
<text class="result-item">当前内容: {{ currentContentType }}</text>
<text class="result-item">内容长度: {{ contentLength }} 字符</text>
<text class="result-item">切换次数: {{ switchCount }}</text>
<text class="result-item">最后操作: {{ lastAction }}</text>
</view>
<!-- 切换测试内容 -->
<view class="test-actions">
<view class="action-btn primary" @tap="switchTestContent(1)">测试1: 纯文本</view>
<view class="action-btn primary" @tap="switchTestContent(2)">测试2: HTML标签</view>
<view class="action-btn primary" @tap="switchTestContent(3)">测试3: 图片</view>
<view class="action-btn primary" @tap="switchTestContent(4)">测试4: 链接</view>
<view class="action-btn warning" @tap="clearContent">清空内容</view>
<view class="action-btn success" @tap="loadFromAPI">模拟API加载</view>
<view class="action-btn danger" @tap="loadRealApiData">📄 真实API</view>
<view class="action-btn info" @tap="loadRealApiDataWithDiv">📄 真实API(a→div)</view>
</view>
<!-- 对比说明 -->
<view class="compare-note">
<text class="note-title">与 index1.vue 对比：</text>
<text class="note-item">• index1.vue 使用 &lt;mp-html&gt; 组件 + :content="testHtml"</text>
<text class="note-item">• 本页使用 v-html="testHtml" 指令</text>
<text class="note-item">• 两者都绑定响应式变量 testHtml</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import Taro, { definePageConfig } from '@tarojs/taro'
import NavHeader from '@/components/navigation/NavHeader.vue'
import { $ } from '@tarojs/extend'
import { useFileOperation } from '@/composables/useFileOperation'
// v-html 需要导入 Taro 的 HTML 样式
import '@tarojs/taro/html.css'
// 文件操作
const { viewFile } = useFileOperation()
// 配置页面
definePageConfig({
navigationBarTitleText: 'v-html 测试'
})
// 测试状态
const renderTest = ref(false)
const contentSwitchTest = ref(false)
const htmlParseTest = ref(false)
const switchCount = ref(0)
const currentContentType = ref('未加载')
const contentLength = ref(0)
const lastAction = ref('页面初始化')
// 测试 HTML 内容
const testHtml = ref('')
// 真实 API 数据（来自 raw.md）
const realApiData = {
id: 3185667,
post_title: "IANG Profile入职指引",
post_content: `<p><img src="https://cdn.ipadbiz.cn/space_3079606/微信图片_20260227170749_FhZ6SHYxM9yVKOPo1LeqVO25I35q.jpg" alt="微信图片_20260227170749.jpg" width="800" height="340" /></p>
<p>&nbsp;</p>
<p>📝IANG&nbsp;Profile入职指引💡</p>
<hr />
<p>&nbsp;</p>
<p>符合IANG&nbsp;计划的招募对象👥</p>
<p>1️⃣年龄：21-55岁</p>
<p>2️⃣持IANG、高才通B/C类 VISA及大学毕业或以上学历</p>
<p>3️⃣非香港永久性居民</p>
<p>4️⃣并非宏利前代理人</p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<p>📑📌IANG Profile需注意事项：</p>
<p>1.此计划提供18个月每月津贴（底薪），并设有3年约束期；每月津贴申请金额：本科毕业生每月津贴为港元 10,000-港元 20,000; 硕士毕业生每月津贴为港元 15,000-港元 25,000; 博士毕业生：每月津贴为港元 20,000-港元 30,000</p>
<p>2.如代理人业绩未达到该月的业绩规定，将不會获发放该月的每月津貼。代理人可于第三个、第六个、第九个、第十二个、第十五个及第十八个合約月份结束时达到相应的的业绩规定及课程规定（第四个合约月内完成财富管家课程），将可获补发未获发放的每月津贴；</p>
<p>3.若于第36个合约月内合约因任何原因被终止，需全数退还已收取的每月津贴；</p>
<p>4.若首 18 个合约月份代理人所销售保单续保率为55%以上及 80%以下，须按比例退回已收取的每月津贴；</p>
<p>5. 若首 12 个合约月份代理人所销售保单续保率为55%以上及 80%以下，须按比例退回已收取的特别业绩表现奖金 I；</p>
<p>6. 若首 13个合约月份至第24个合约月份代理人所销售保单续保率为55%以上及 80%以下，须按比例退回已收取的特别业绩表现奖金 II 。</p>
<p>&nbsp;</p>
<p>其余规定请查看以下公司IANG计划之规定文件！</p>
<p><a class="_file_list" style="display: inline-block; padding: 12px; border: 1px solid #e1e5e9; border-radius: 8px; margin: 8px; background: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; transition: all 0.3s ease; text-decoration: none; color: inherit; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,;" href="https://cdn.ipadbiz.cn/space_3079606/2-hk-prog_IANG_Profile_Program_C_Fj2lebJPQj71S8LhhOtgmcYVnpBD.pdf" target="_blank" rel="noopener"><span style="display: inline-block; font-size: 24px; margin-right: 12px; color: #6c757d; vertical-align: middle;"><img style="width: 30px; height: 30px; vertical-align: text-bottom;" src="https://cdn.ipadbiz.cn/img%2Ftinymce_icon%2Foffice-pdf.png" /></span><span style="display: inline-block; vertical-align: middle;"><span style="display: block; font-weight: 600; font-size: 14px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">2-hk-prog_IANG_Profile....pdf</span><span style="display: block; font-size: 12px; color: #6c757d; margin-top: 4px; line-height: 1.2;">384.34 KB</span></span></a></p>
<p>&nbsp;</p>
<p><a class="_file_list" style="display: inline-block; padding: 12px; border: 1px solid #e1e5e9; border-radius: 8px; margin: 8px; background: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; transition: all 0.3s ease; text-decoration: none; color: inherit; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,;" href="https://cdn.ipadbiz.cn/space_3079606/IANG Profile illustration_FriOxAVusDKilewqIqFo_OHdc84X.pdf" target="_blank" rel="noopener"><span style="display: inline-block; font-size: 24px; margin-right: 12px; color: #6c757d; vertical-align: middle;"><img style="width: 30px; height: 30px; vertical-align: text-bottom;" src="https://cdn.ipadbiz.cn/img%2Ftinymce_icon%2Foffice-pdf.png" /></span><span style="display: inline-block; vertical-align: middle;"><span style="display: block; font-weight: 600; font-size: 14px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">IANG Profile illustration.pdf</span><span style="display: block; font-size: 12px; color: #6c757d; margin-top: 4px; line-height: 1.2;">1.82 MB</span></span></a></p>
<p>&nbsp;</p>
<p><a class="_file_list" style="display: inline-block; padding: 12px; border: 1px solid #e1e5e9; border-radius: 8px; margin: 8px; background: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; transition: all 0.3s ease; text-decoration: none; color: inherit; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,;" href="https://cdn.ipadbiz.cn/space_3079606/IANG对数表_Fq3IQGJuM0SP4zAkKZDK803xVeQK.pdf" target="_blank" rel="noopener"><span style="display: inline-block; font-size: 24px; margin-right: 12px; color: #6c757d; vertical-align: middle;"><img style="width: 30px; height: 30px; vertical-align: text-bottom;" src="https://cdn.ipadbiz.cn/img%2Ftinymce_icon%2Foffice-pdf.png" /></span><span style="display: inline-block; vertical-align: middle;"><span style="display: block; font-weight: 600; font-size: 14px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">IANG对数表.pdf</span><span style="display: block; font-size: 12px; color: #6c757d; margin-top: 4px; line-height: 1.2;">65.73 KB</span></span></a></p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<p>📑📌IANG Profile入职资料</p>
<p>1.香港身份证</p>
<p>2.Visa</p>
<p>3.首次入境小票</p>
<p>4.申请VISA时登记的有效港澳通行证正反面或护照个人信息页</p>
<p>5.近三个月内由港府、香港银行、香港电话公司发出的【香港住宅英文地址证明】（注1️⃣）</p>
<p>6.毕业证及近三个月学信网学历认证，国外学历须提供留服认证或香港资历架构认证（注2️⃣）</p>
<p>7.卷一及卷三合格证明</p>
<p>8.香港电话号码（注3️⃣）</p>
<p>9.在港申请的香港银行卡</p>
<p>10.一寸证件照两张，底色无要求</p>
<p>11.简历</p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<p>⚠️入职资料注意事项：</p>
<p>1️⃣香港住宅英文地址证明，例如：水电煤气通知单、银行月结单或电话费月结单等；证券接单不可作为有效地址证明。</p>
<p>2️⃣艺术类，语言类或文科专业毕业，还需提供成绩单，且成绩单里包含中文、英语及数学成绩、成绩须达第二级/达E级或以上，IA看情况要求提供成绩认证。</p>
<p>3️⃣香港电话号码尽量不提供在内地申请的两地号码，两地号码在内地没办法收验证码，不便于办理挂牌手续。</p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<p>入职办理流程⤵️：</p>
<p>1.准招募递交入职申请后，由DD核实审批</p>
<p>2.审批完毕后，入职流程递交至AR部门，AR部门核实签证类型，没问题后Pass至AD部门</p>
<p>3.AD核实后，出Offer&nbsp;Letter</p>
<p>4.准招募签署完Offer&nbsp;Letter后，流程Pass至C&amp;B部门做资料综合审核及背景调查</p>
<p>5.审查完毕，C&amp;B同事帮准招募向保監提出挂牌申请</p>
<p>6.准招募收到保監发出的【保險中介一站通-啟動個人賬戶】郵件及公司發出的纸本AOP啟動碼</p>
<p>7.联系秘书填写一站通资料</p>
<p>8.公司审核一站通资料无误后，准招募支付挂牌费用（3年挂牌费为港元810）</p>
<p>9.挂牌后，公司生成专属Agent&nbsp;code，并发出代理人合约及奖金合约</p>
<p>10.准招募签署合约并递交给公司</p>
<p>11.收到公司配送的Welcome&nbsp;Kit，内含工牌、门卡及邮件激活密码</p>
<p>12.激活邮件及Manutouch账号后，可开始签单</p>
<p>&nbsp;</p>
<p><img src="https://cdn.ipadbiz.cn/space_3079606/微信图片_20260227171202_FhZfGYQAKK_04-E_Td5TzNosjlXm.jpg" alt="微信图片_20260227171202.jpg" width="1200" height="596" /></p>
<hr />
<p>&nbsp;</p>
<p>⭐入职需完成课程✅：</p>
<p>1.【新人课】，完成后方可发第1期底薪，建议在递交完入职资料，等待出Code过程中，联系秘书报名，最迟在入职第一个合约月内完成，完成后方可发第1个月底薪。</p>
<p>2.【财富管家课程】，入职后4个月内需上完，否则会影响底薪及佣金发放，建议出code后，尽快安排时间联系秘书报名。</p>
<p>&nbsp;</p>
<p>🕹️签署合约后，每月需交给公司200元/月行政费！</p>
<hr />
<p>&nbsp;</p>
<p>入职资料Sample</p>
<p><a class="_file_list" style="display: inline-block; padding: 12px; border: 1px solid #e1e5e9; border-radius: 8px; margin: 8px; background: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; transition: all 0.3s ease; text-decoration: none; color: inherit; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,;" href="https://cdn.ipadbiz.cn/space_3079606/需提供的部分个人资料SAMPLE（不含流水SAMPLE）_扫描版_lkAqOTlyK-jZ7RbBN43oiG5QPfr-.pdf" target="_blank" rel="noopener"><span style="display: inline-block; font-size: 24px; margin-right: 12px; color: #6c757d; vertical-align: middle;"><img style="width: 30px; height: 30px; vertical-align: text-bottom;" src="https://cdn.ipadbiz.cn/img%2Ftinymce_icon%2Foffice-pdf.png" /></span><span style="display: inline-block; vertical-align: middle;"><span style="display: block; font-weight: 600; font-size: 14px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">需提供的部分个人资料SAMPLE（不含流水S....pdf</span><span style="display: block; font-size: 12px; color: #6c757d; margin-top: 4px; line-height: 1.2;">101.91 MB</span></span></a></p>
<p>&nbsp;</p>`
}
// 测试内容模板
const testContents = {
1: {
name: '纯文本',
content: `
<h1>测试1：纯文本渲染</h1>
<p>这是一段纯文本内容，测试 v-html 是否能正确渲染基本的 HTML 结构。</p>
<p><strong>加粗文本</strong>和<em>斜体文本</em>测试。</p>
`
},
2: {
name: 'HTML标签',
content: `
<h1>测试2：HTML 标签解析</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<p>段落测试：<span style="color: red;">红色文字</span>和<span style="color: blue;">蓝色文字</span></p>
`
},
3: {
name: '图片',
content: `
<h1>测试3：图片渲染</h1>
<p>点击图片测试长按预览功能：</p>
<p class="h5-p">
<img class="h5-img" src="https://cdn.ipadbiz.cn/space_3079606/微信图片_20260227170749_FhZ6SHYxM9yVKOPo1LeqVO25I35q.jpg" alt="测试图片" style="max-width: 100%;" />
</p>
`
},
4: {
name: '链接',
content: `
<h1>测试4：链接渲染</h1>
<p>测试链接是否正确渲染：</p>
<p>
<a href="https://www.baidu.com">百度链接</a> |
<a href="https://www.github.com">GitHub 链接</a>
</p>
<p>PDF 链接测试：
<a href="https://cdn.ipadbiz.cn/space_3079606/需提供的部分个人资料SAMPLE（不含流水SAMPLE）_扫描版_lkAqOTlyK-jZ7RbBN43oiG5QPfr-.pdf">PDF 文档</a>
</p>
`
}
}
// 切换测试内容
const switchTestContent = (index) => {
const template = testContents[index]
if (template) {
testHtml.value = template.content
currentContentType.value = template.name
contentLength.value = template.content.length
switchCount.value++
lastAction.value = `切换到测试${index}: ${template.name}`
contentSwitchTest.value = true
// 绑定图片长按事件
nextTick(() => {
bindImageEvents()
})
}
}
// 清空内容
const clearContent = () => {
testHtml.value = ''
currentContentType.value = '已清空'
contentLength.value = 0
lastAction.value = '清空内容'
}
// 模拟 API 加载
const loadFromAPI = () => {
lastAction.value = '模拟 API 加载中...'
Taro.showLoading({ title: '加载中...' })
setTimeout(() => {
// 模拟 API 返回的数据
const apiData = `
<div class="api-content">
<h1>从 API 加载的内容</h1>
<p>这是模拟从后端 API 获取的富文本内容。</p>
<p>加载时间：${new Date().toLocaleString()}</p>
<p class="h5-p">
<img class="h5-img" src="https://cdn.ipadbiz.cn/space_3079606/微信图片_20260227170749_FhZ6SHYxM9yVKOPo1LeqVO25I35q.jpg" alt="API图片" />
</p>
</div>
`
testHtml.value = apiData
currentContentType.value = 'API 数据'
contentLength.value = apiData.length
lastAction.value = 'API 加载完成'
Taro.hideLoading()
nextTick(() => {
bindImageEvents()
})
}, 1000)
}
// 加载真实 API 数据（原始版本，包含 <a> 标签）
const loadRealApiData = () => {
lastAction.value = '加载真实 API 数据（原始）...'
Taro.showLoading({ title: '加载中...' })
setTimeout(() => {
testHtml.value = realApiData.post_content
currentContentType.value = `真实文章(原始<a>): ${realApiData.post_title}`
contentLength.value = realApiData.post_content.length
switchCount.value++
lastAction.value = `加载文章 ID: ${realApiData.id} (原始<a>标签)`
Taro.hideLoading()
nextTick(() => {
bindImageEvents()
})
Taro.showToast({
title: '原始 <a> 标签',
icon: 'none'
})
}, 500)
}
// 加载真实 API 数据（<a> 替换为 <div> 版本）
const loadRealApiDataWithDiv = () => {
lastAction.value = '加载真实 API 数据（a→div）...'
Taro.showLoading({ title: '加载中...' })
setTimeout(() => {
// 将 <a> 标签替换为 <div> 标签，保留 href 为 data-href
let content = realApiData.post_content
console.log('[VHtmlTest] 原始内容中的 <a> 标签示例:')
const aTagMatch = content.match(/<a[^>]*>/)
if (aTagMatch) {
console.log('[VHtmlTest]', aTagMatch[0])
}
// 替换 HTML 实体
content = content.replace(/&nbsp;/g, ' ') // 空格
content = content.replace(/&amp;/g, '&') // &
content = content.replace(/&lt;/g, '<') // <
content = content.replace(/&gt;/g, '>') // >
content = content.replace(/&quot;/g, '"') // "
content = content.replace(/&apos;/g, "'") // '
// 替换 <a ... href="..."> 为 <div ... data-href="..." data-is-link="true">
content = content.replace(/<a\s+/g, '<div data-is-link="true" ')
content = content.replace(/href=/g, 'data-href=')
content = content.replace(/<\/a>/g, '</div>')
console.log('[VHtmlTest] 替换后的 div 标签示例:')
const divTagMatch = content.match(/<div[^>]*data-is-link="true"[^>]*>/)
if (divTagMatch) {
console.log('[VHtmlTest]', divTagMatch[0])
}
// 统计 data-href 数量
const hrefCount = (content.match(/data-href=/g) || []).length
console.log('[VHtmlTest] 找到 data-href 数量:', hrefCount)
testHtml.value = content
currentContentType.value = `真实文章(<a>→<div>): ${realApiData.post_title}`
contentLength.value = content.length
switchCount.value++
lastAction.value = `加载文章 ID: ${realApiData.id} (a标签已替换为div, href=${hrefCount})`
Taro.hideLoading()
nextTick(() => {
bindImageEvents()
// 绑定文件链接点击事件
const linkCount = bindFileLinkEvents()
console.log('[VHtmlTest] 绑定了', linkCount, '个文件链接')
})
Taro.showToast({
title: `已绑定 ${hrefCount} 个文件链接`,
icon: 'success'
})
}, 500)
}
// 绑定图片长按预览事件（类似 activityDetail 页面的实现）
const bindImageEvents = () => {
const imgs = $('#taro_html').children('.h5-p').children('.h5-img')
console.log('[VHtmlTest] 找到图片数量:', imgs.length)
imgs.forEach(function (img) {
$(img).on('longpress', function () {
const src = $(img).attr('src')
console.log('[VHtmlTest] 图片长按事件:', src)
Taro.previewImage({
urls: [src],
current: src,
indicator: 'default',
loop: false,
success: res => {
console.log('[VHtmlTest] 预览成功:', res)
lastAction.value = '图片预览触发'
},
fail: err => {
console.error('[VHtmlTest] 预览失败:', err)
}
})
})
})
htmlParseTest.value = imgs.length > 0
}
// 绑定文件链接点击事件
const bindFileLinkEvents = () => {
// 先检查 #taro_html 容器是否存在
const container = $('#taro_html')
console.log('[VHtmlTest] 容器存在?', container.length > 0)
// 检查容器内所有 div
const allDivs = container.find('div')
console.log('[VHtmlTest] 容器内所有 div 数量:', allDivs.length)
// 检查带 data-is-link 属性的 div
const fileLinks = container.find('div[data-is-link="true"]')
console.log('[VHtmlTest] 找到文件链接数量 (data-is-link=true):', fileLinks.length)
// 如果找不到，尝试用 class 查找
if (fileLinks.length === 0) {
console.log('[VHtmlTest] 尝试用 _file_list class 查找...')
const classLinks = container.find('._file_list')
console.log('[VHtmlTest] 找到 _file_list 数量:', classLinks.length)
// 检查这些元素的属性
classLinks.each(function (idx, el) {
console.log('[VHtmlTest] _file_list[' + idx + '] 属性:', {
tagName: el.tagName,
className: el.className,
'data-href': el.getAttribute('data-href'),
'data-is-link': el.getAttribute('data-is-link'),
href: el.getAttribute('href'),
innerHTML: el.innerHTML.substring(0, 100)
})
})
// 如果用 class 找到了，绑定到这些元素上
classLinks.each(function (idx, el) {
const $el = $(el)
const dataHref = $el.attr('data-href')
console.log('[VHtmlTest] _file_list[' + idx + '] data-href:', dataHref)
if (dataHref) {
$el.on('tap', function () {
const fileName = $el.find('span span span').first().text() || 'document.pdf'
console.log('[VHtmlTest] 文件链接点击:', { dataHref, fileName })
lastAction.value = `打开文件: ${fileName}`
viewFile({
downloadUrl: dataHref,
fileName: fileName
})
})
}
})
return classLinks.length
}
// 原始逻辑：使用 data-is-link 查找
fileLinks.forEach(function (link) {
const $link = $(link)
const href = $link.attr('data-href')
console.log('[VHtmlTest] 文件链接 data-href:', href)
$link.on('tap', function () {
const fileName = $link.find('span span span').first().text() || 'document.pdf'
console.log('[VHtmlTest] 文件链接点击:', { href, fileName })
if (href) {
lastAction.value = `打开文件: ${fileName}`
// 使用 useFileOperation 打开文件
viewFile({
downloadUrl: href,
fileName: fileName
})
} else {
console.warn('[VHtmlTest] 链接没有 data-href 属性')
}
})
})
return fileLinks.length
}
// 监听 testHtml 变化
watch(testHtml, (newVal, oldVal) => {
console.log('[VHtmlTest] testHtml 变化:', {
oldLength: oldVal?.length || 0,
newLength: newVal?.length || 0
})
renderTest.value = true
})
// 初始化
onMounted(() => {
console.log('[VHtmlTest] 组件已挂载')
// 加载默认测试内容
switchTestContent(1)
console.log('[VHtmlTest] 初始化完成，v-html 应该已绑定到响应式变量 testHtml')
})
</script>
<style lang="less">
.rich-text-test-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.test-container {
padding: 32rpx;
}
.test-info {
background: #fff;
padding: 24rpx;
border-radius: 12rpx;
margin-bottom: 24rpx;
}
.test-title {
display: block;
font-size: 32rpx;
font-weight: bold;
margin-bottom: 16rpx;
}
.test-item {
display: block;
font-size: 28rpx;
color: #666;
margin: 8rpx 0;
}
.v-html-container {
background: #fff;
padding: 24rpx;
border-radius: 12rpx;
margin-bottom: 24rpx;
min-height: 200rpx;
}
.container-title {
display: block;
font-size: 28rpx;
color: #999;
margin-bottom: 16rpx;
}
.taro_html {
// Taro html.css 样式
:deep(.h5-p) {
margin: 16rpx 0;
}
:deep(.h5-img) {
max-width: 100%;
display: block;
}
:deep(h1) {
font-size: 48rpx;
font-weight: bold;
margin: 32rpx 0 16rpx;
}
:deep(h2) {
font-size: 40rpx;
font-weight: bold;
margin: 24rpx 0 12rpx;
}
:deep(h3) {
font-size: 36rpx;
font-weight: bold;
margin: 20rpx 0 12rpx;
}
:deep(p) {
font-size: 28rpx;
line-height: 1.6;
margin: 12rpx 0;
color: #333;
}
:deep(ul) {
padding-left: 48rpx;
margin: 16rpx 0;
}
:deep(li) {
font-size: 28rpx;
line-height: 1.6;
margin: 8rpx 0;
}
:deep(a) {
color: #1989fa;
text-decoration: underline;
}
:deep(strong) {
font-weight: bold;
}
:deep(em) {
font-style: italic;
}
:deep(span) {
font-size: 28rpx;
}
// 文件链接卡片样式
:deep(._file_list) {
display: inline-block !important;
padding: 12px;
border: 1px solid #e1e5e9;
border-radius: 8px;
margin: 8px;
background: #f8f9fa;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
max-width: 400px;
transition: all 0.3s ease;
text-decoration: none;
color: inherit;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
}
.test-results {
background: #fff;
padding: 24rpx;
border-radius: 12rpx;
margin-bottom: 24rpx;
}
.result-title {
display: block;
font-size: 32rpx;
font-weight: bold;
margin-bottom: 16rpx;
}
.result-item {
display: block;
font-size: 28rpx;
color: #666;
margin: 8rpx 0;
}
.test-actions {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-bottom: 24rpx;
}
.action-btn {
padding: 16rpx 32rpx;
border-radius: 8rpx;
font-size: 28rpx;
text-align: center;
&.primary {
background: #1989fa;
color: #fff;
}
&.warning {
background: #ff976a;
color: #fff;
}
&.success {
background: #07c160;
color: #fff;
}
&.danger {
background: #ee0a24;
color: #fff;
font-weight: bold;
}
&.info {
background: #7232dd;
color: #fff;
}
}
.compare-note {
background: #f0f9ff;
padding: 24rpx;
border-radius: 12rpx;
border-left: 8rpx solid #1989fa;
}
.note-title {
display: block;
font-size: 28rpx;
font-weight: bold;
color: #1989fa;
margin-bottom: 16rpx;
}
.note-item {
display: block;
font-size: 24rpx;
color: #666;
margin: 8rpx 0;
line-height: 1.5;
}
</style>