hookehuyr

fix(rich-text): 修复 v-html 样式不生效问题

移除 scoped 和 :deep(),使用 #rich-text-renderer ID 选择器限制作用范围。
参考 @tarojs/taro/html.css 添加完整 HTML4 样式支持。

- 移除 scoped(v-html 内容不受 scoped 影响)
- 移除 :deep()(小程序 WXSS 不支持)
- 新增完整的 .h5-* 样式定义(表格、代码、列表等)
- 使用 ID 选择器避免全局样式污染

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
......@@ -263,81 +263,294 @@ watch(() => props.enableTransform, () => {
// transformElement 已在初始化时设置,watch immediate 已处理首次渲染
</script>
<style lang="less" scoped>
.rich-text-content {
// Taro v-html 基础样式(替代 @tarojs/taro/html.css)
:deep(.h5-p) {
margin: 16rpx 0;
<style lang="less">
// 注意:v-html 内容不受 scoped 样式影响,因此不使用 scoped
// 通过 #rich-text-renderer ID 选择器限制样式作用范围,避免污染全局
// 参考 @tarojs/taro/html.css 的完整 HTML4 样式
#rich-text-renderer {
// ========== 基础显示属性 ==========
.h5-html,
.h5-address,
.h5-blockquote,
.h5-body,
.h5-dd,
.h5-div,
.h5-dl,
.h5-dt,
.h5-fieldset,
.h5-form,
.h5-frame,
.h5-frameset,
.h5-h1,
.h5-h2,
.h5-h3,
.h5-h4,
.h5-h5,
.h5-h6,
.h5-noframes,
.h5-ol,
.h5-p,
.h5-ul,
.h5-center,
.h5-dir,
.h5-hr,
.h5-menu,
.h5-pre {
display: block;
unicode-bidi: embed;
}
:deep(.h5-img) {
max-width: 100%;
height: auto;
display: block;
.h5-li {
display: list-item;
}
.h5-head {
display: none;
}
// ========== 表格样式 ==========
.h5-table {
display: table;
border-spacing: 2px;
}
.h5-tr {
display: table-row;
}
.h5-thead {
display: table-header-group;
}
.h5-tbody {
display: table-row-group;
}
.h5-tfoot {
display: table-footer-group;
}
.h5-col {
display: table-column;
}
:deep(h1) {
font-size: 48rpx;
font-weight: bold;
margin: 32rpx 0 16rpx;
.h5-colgroup {
display: table-column-group;
}
:deep(h2) {
font-size: 40rpx;
font-weight: bold;
margin: 24rpx 0 12rpx;
.h5-td,
.h5-th {
display: table-cell;
}
:deep(h3) {
font-size: 36rpx;
font-weight: bold;
margin: 20rpx 0 12rpx;
.h5-caption {
display: table-caption;
text-align: center;
}
:deep(h4) {
font-size: 32rpx;
font-weight: bold;
margin: 16rpx 0 8rpx;
.h5-th {
text-align: center;
font-weight: bolder;
}
:deep(p) {
font-size: 28rpx;
line-height: 1.6;
margin: 12rpx 0;
color: #333;
.h5-thead,
.h5-tbody,
.h5-tfoot {
vertical-align: middle;
}
:deep(ul),
:deep(ol) {
padding-left: 48rpx;
margin: 16rpx 0;
.h5-td,
.h5-th,
.h5-tr {
vertical-align: inherit;
}
:deep(li) {
font-size: 28rpx;
line-height: 1.6;
margin: 8rpx 0;
// ========== 标题样式 ==========
.h5-body {
margin: 8px;
}
:deep(strong) {
font-weight: bold;
.h5-h1 {
margin: 0.67em 0;
font-size: 2em;
}
:deep(em) {
.h5-h2 {
margin: 0.75em 0;
font-size: 1.5em;
}
.h5-h3 {
margin: 0.83em 0;
font-size: 1.17em;
}
.h5-h4,
.h5-p,
.h5-blockquote,
.h5-ul,
.h5-fieldset,
.h5-form,
.h5-ol,
.h5-dl,
.h5-dir,
.h5-menu {
margin: 1.12em 0;
}
.h5-h5 {
margin: 1.5em 0;
font-size: 0.83em;
}
.h5-h6 {
margin: 1.67em 0;
font-size: 0.75em;
}
.h5-h1,
.h5-h2,
.h5-h3,
.h5-h4,
.h5-h5,
.h5-h6 {
line-height: 1;
}
.h5-h1,
.h5-h2,
.h5-h3,
.h5-h4,
.h5-h5,
.h5-h6,
.h5-b,
.h5-strong {
font-weight: bolder;
}
// ========== 文本样式 ==========
.h5-blockquote {
margin-left: 40px;
margin-right: 40px;
}
.h5-i,
.h5-cite,
.h5-em,
.h5-var,
.h5-address {
font-style: italic;
}
:deep(a) {
color: #1989fa;
.h5-pre,
.h5-tt,
.h5-code,
.h5-kbd,
.h5-samp {
font-family: monospace;
}
.h5-pre {
white-space: pre;
}
.h5-big {
font-size: 1.17em;
}
.h5-small,
.h5-sub,
.h5-sup {
font-size: 0.83em;
}
.h5-sub {
vertical-align: sub;
}
.h5-sup {
vertical-align: super;
}
.h5-s,
.h5-strike,
.h5-del {
text-decoration: line-through;
}
.h5-u,
.h5-ins {
text-decoration: underline;
}
:deep(span) {
font-size: 28rpx;
.h5-center {
text-align: center;
}
// ========== 列表样式 ==========
.h5-ol,
.h5-ul,
.h5-dir,
.h5-menu,
.h5-dd {
margin-left: 40px;
}
.h5-ol {
list-style-type: decimal;
}
.h5-ol .h5-ul,
.h5-ul .h5-ol,
.h5-ul .h5-ul,
.h5-ol .h5-ol {
margin-top: 0;
margin-bottom: 0;
}
// ========== 其他元素 ==========
.h5-button,
.h5-textarea,
.h5-input,
.h5-select {
display: inline-block;
}
input[type="hidden"] {
display: none !important;
}
.h5-a {
display: inline;
}
.h5-button::after {
border: none;
}
.h5-span {
display: inline;
}
.h5-hr {
border: 1px inset;
}
.h5-br::before {
white-space: pre-line;
content: "\A";
}
// ========== 自定义补充样式 ==========
// 图片样式(transformElement 已添加 mode 和 style,这里做兜底)
.h5-img,
img {
max-width: 100%;
height: auto;
}
// 文件链接样式
:deep(div[data-is-link="true"]) {
// 文件链接交互样式
div[data-is-link="true"] {
cursor: pointer;
transition: opacity 0.2s;
......