Просмотр исходного кода

feat: u-parse 加 tagStyle 兜底,补 rich-text 样式隔离黑盒

u-parse 内部走微信原生 <rich-text>,有样式隔离,外部 class 无法穿透,
现有 PC 端编辑器(Quill / wangEditor 5)输出 HTML 中的类名/部分基础排版
样式在小程序里会丢。这里给常见标签注入默认内联样式:

- p: 行距、字号、段距
- h1-h3: 标题字号加粗
- strong / em / u: 粗体/斜体/下划线兜底
- blockquote: 引用块左边框与配色
- img: 最大宽度 100%,避免溢出
- li: 列表标记位 inside,与 PC 端排版一致
Developer 4 недель назад
Родитель
Сommit
695b53f19a
2 измененных файлов с 16 добавлено и 3 удалено
  1. 1 2
      package-lock.json
  2. 15 1
      pagesHome/activityDetail.vue

+ 1 - 2
package-lock.json

@@ -877,8 +877,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "anymatch": {
       "version": "3.1.3",

+ 15 - 1
pagesHome/activityDetail.vue

@@ -111,7 +111,7 @@
 			<view class="box2-detail" v-if="activityInfo&&activityInfo.activityDetails">
 				<up-read-more :toggle="true" showHeight="374rpx" :shadowStyle="shadowStyle" color="#989998" fontSize="24rpx" openText="收起" closeText="展开" ref="uReadMore">
 				    <!-- <rich-text :nodes="activityInfo.activityDetails"></rich-text> -->
-					<u-parse :content="activityInfo.activityDetails" @load="load"></u-parse>
+					<u-parse :content="activityInfo.activityDetails" :tagStyle="parseTagStyle" @load="load"></u-parse>
 				</up-read-more>
 			</view>
 		</view>
@@ -258,6 +258,20 @@
 		paddingTop: "0",
 		marginTop: "20rpx"
 	})
+	// u-parse 内部走 <rich-text>,有样式隔离黑盒,外部 class 无法穿透。
+	// 这里给常见标签注入默认内联样式,补齐后端 rich-text 默认不带 padding/字号/列表风格等基础视觉效果。
+	const parseTagStyle = ref({
+		p: 'text-indent: 0; line-height: 1.6; margin: 8px 0; font-size: 28rpx;',
+		h1: 'font-size: 36rpx; font-weight: bold; margin: 16px 0 8px;',
+		h2: 'font-size: 32rpx; font-weight: bold; margin: 14px 0 8px;',
+		h3: 'font-size: 30rpx; font-weight: bold; margin: 12px 0 6px;',
+		strong: 'font-weight: bold;',
+		em: 'font-style: italic;',
+		u: 'text-decoration: underline;',
+		blockquote: 'border-left: 6rpx solid #ddd; padding-left: 16rpx; color: #666; margin: 8px 0;',
+		img: 'max-width: 100%; height: auto;',
+		li: 'list-style-position: inside;'
+	})
 
 	// --- 海报生成相关 ---
 	const posterShow = ref(false) // 控制海报弹窗显示