yymini-pop-html 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -18
- package/package.json +1 -1
- package/pop-html.js +5 -4
package/README.md
CHANGED
|
@@ -1,25 +1,28 @@
|
|
|
1
1
|
# yymini-pop-html
|
|
2
|
-
|
|
2
|
+
一款**轻量级、无额外依赖、开箱即用**的抖音小程序底部富文本弹出框自定义组件，专注于富文本内容的展示，支持富文本内部链接跳转事件透传，适用于富文本公告、带格式说明、含链接的详情展示等底部弹出场景。
|
|
3
3
|
|
|
4
|
-
##
|
|
5
|
-
-
|
|
6
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
在你的小程序项目根目录执行：
|
|
4
|
+
## 特性
|
|
5
|
+
- 专属适配：专为**抖音小程序**设计，无需额外适配，兼容性更优
|
|
6
|
+
- 富文本支持：原生支持富文本内容渲染，可展示带格式的文本、图片、链接等内容
|
|
7
|
+
- 轻量无依赖：零外部依赖，引入即可使用，不增加项目体积负担
|
|
8
|
+
- 核心交互可控：支持遮罩点击关闭、自定义弹窗高度、标题显示/隐藏
|
|
9
|
+
- 链接事件透传：富文本内部链接点击事件精准透传，便于业务层处理跳转逻辑
|
|
10
|
+
- 状态同步流畅：通过属性监听实现显示状态同步，避免异步延迟问题
|
|
11
|
+
- 防穿透设计：内置点击穿透阻止机制，避免内容区点击触发遮罩事件
|
|
13
12
|
|
|
13
|
+
## 安装
|
|
14
|
+
1. 执行 npm 安装
|
|
14
15
|
```bash
|
|
15
16
|
npm install yymini-pop-html --save
|
|
16
17
|
or
|
|
17
18
|
yarn add yymini-pop-html
|
|
18
|
-
|
|
19
|
-
然后在 开发者工具中 构建 NPM
|
|
20
19
|
```
|
|
20
|
+
2. 抖音小程序构建 npm
|
|
21
|
+
打开抖音小程序开发者工具 → 工具 → 构建 npm
|
|
21
22
|
|
|
22
|
-
##
|
|
23
|
+
## 快速使用
|
|
24
|
+
### 1. 配置组件
|
|
25
|
+
在需要使用弹窗的页面或组件的 `json` 文件中声明组件引用：
|
|
23
26
|
```json
|
|
24
27
|
{
|
|
25
28
|
"usingComponents": {
|
|
@@ -28,10 +31,73 @@ yarn add yymini-pop-html
|
|
|
28
31
|
}
|
|
29
32
|
```
|
|
30
33
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
+
### 2. 页面中使用
|
|
35
|
+
在 `ttml` 中添加组件标签，绑定属性与事件：
|
|
36
|
+
```html
|
|
37
|
+
<!-- 页面 ttml -->
|
|
38
|
+
<pop-html
|
|
39
|
+
visible="{{isVisible}}"
|
|
40
|
+
title="富文本公告"
|
|
41
|
+
content='<div>这是一条带格式的公告：<br/>1. 活动时间：2025.4.1-2025.4.30<br/>2. 点击<a href="activity/detail">查看活动详情</a><br/>3. 最终解释权归平台所有</div>'
|
|
42
|
+
height="{{80}}"
|
|
43
|
+
bgSrc="/images/bg-notice.png"
|
|
44
|
+
maskCloseable="{{false}}"
|
|
45
|
+
bind:close="onClose"
|
|
46
|
+
bind:linktap="onLinkTap"
|
|
47
|
+
>
|
|
48
|
+
</pop-html>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
在 `js` 中控制弹窗显示与事件处理：
|
|
52
|
+
```js
|
|
53
|
+
Page({
|
|
54
|
+
data: {
|
|
55
|
+
isVisible: false
|
|
56
|
+
},
|
|
57
|
+
// 打开弹窗
|
|
58
|
+
openPopup() {
|
|
59
|
+
this.setData({ isVisible: true });
|
|
60
|
+
},
|
|
61
|
+
// 弹窗关闭事件（遮罩/关闭按钮触发）
|
|
62
|
+
onClose() {
|
|
63
|
+
this.setData({ isVisible: false });
|
|
64
|
+
},
|
|
65
|
+
// 富文本内部链接点击事件
|
|
66
|
+
onLinkTap(e) {
|
|
67
|
+
console.log("富文本链接点击，透传参数：", e.detail);
|
|
68
|
+
// 执行业务跳转逻辑（如跳转到活动详情页）
|
|
69
|
+
}
|
|
70
|
+
})
|
|
34
71
|
```
|
|
35
72
|
|
|
36
|
-
##
|
|
37
|
-
|
|
73
|
+
## 组件属性
|
|
74
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
75
|
+
|----------------|---------|--------------|----------------------------------------------------------------------|
|
|
76
|
+
| visible | Boolean | false | 【必填】控制弹窗的显示/隐藏 |
|
|
77
|
+
| zindex | Number | 999 | 弹窗及遮罩层层级，默认999，可根据页面元素层级调整，避免被遮挡 |
|
|
78
|
+
| content | String | '' | 【核心】富文本内容，支持标准HTML标签（如div、br、a、img等，需符合抖音小程序富文本渲染规范） |
|
|
79
|
+
| height | Number | 85 | 弹窗高度，单位为百分比（%），默认占屏幕高度的85% |
|
|
80
|
+
| title | String | null | 弹窗顶部标题，为null时不显示标题区域 |
|
|
81
|
+
| bgSrc | String | "bgSrc.png" | 弹窗背景图片地址，默认值为"bgSrc.png"，需确保项目中存在该图片或自定义替换 |
|
|
82
|
+
| maskCloseable | Boolean | false | 点击遮罩层是否关闭弹窗，默认不关闭，需手动点击关闭按钮关闭 |
|
|
83
|
+
|
|
84
|
+
## 组件事件
|
|
85
|
+
| 事件名 | 触发时机 | 事件参数 | 说明 |
|
|
86
|
+
|----------------|--------------------------------------------|---------------------------|----------------------------------------------------------------------|
|
|
87
|
+
| bind:close | 点击遮罩层或关闭按钮时触发 | 无 | 弹窗关闭事件，用于关闭弹窗并重置状态 |
|
|
88
|
+
| bind:linktap | 点击富文本内部的链接（<a>标签）时触发 | { ...event.detail } | 透传富文本链接点击的原生事件参数（含href等信息），便于业务层处理跳转 |
|
|
89
|
+
|
|
90
|
+
## 效果预览
|
|
91
|
+
[效果预览地址](https://raw.githubusercontent.com/AllenGe/yy/main/pop-image-html.png)
|
|
92
|
+
|
|
93
|
+
## 注意事项
|
|
94
|
+
1. 平台适配说明：组件专为抖音小程序
|
|
95
|
+
2. 无依赖特性：组件无需额外引入其他库或资源，安装后直接使用，降低项目依赖风险
|
|
96
|
+
3. 富文本兼容性：content属性支持的HTML标签需符合抖音小程序富文本渲染规范
|
|
97
|
+
4. 背景图配置：默认背景图地址为“bgSrc.png”，若项目中无该图片，需通过bgSrc属性自定义替换，否则可能显示空白背景
|
|
98
|
+
5. 尺寸单位说明：height属性值为百分比，无需手动添加“%”符号，组件内部自动拼接处理
|
|
99
|
+
6. 状态同步机制：组件通过observer监听visible属性变化，自动同步内部show状态，无需手动控制内部状态
|
|
100
|
+
7. 事件穿透防护：弹窗内容区点击不会穿透到遮罩层，已通过stopPropagation方法阻止事件冒泡
|
|
101
|
+
8. 层级调整建议：若弹窗被其他页面元素遮挡，可增大zindex属性值
|
|
102
|
+
9. 富文本图片规则：富文本中的图片支持本地图片和网络图片，使用网络图片时，需在抖音小程序后台配置对应的域名白名单
|
|
103
|
+
10. 链接事件绑定：若富文本中包含链接，需绑定bind:linktap事件才能处理跳转逻辑，否则点击链接无响应
|
package/package.json
CHANGED
package/pop-html.js
CHANGED
|
@@ -13,18 +13,18 @@ Component({
|
|
|
13
13
|
zindex: {
|
|
14
14
|
type: Number,
|
|
15
15
|
value: 999
|
|
16
|
-
},
|
|
16
|
+
}, //弹出框层级，默认999
|
|
17
17
|
content: {
|
|
18
18
|
type: String,
|
|
19
19
|
value: ''
|
|
20
|
-
},
|
|
20
|
+
}, //富文本内容
|
|
21
21
|
height: {
|
|
22
22
|
type: Number,
|
|
23
23
|
value: 85
|
|
24
|
-
}, //
|
|
24
|
+
}, // 弹窗高度，默认85，百分比%
|
|
25
25
|
title: {
|
|
26
26
|
type: String,
|
|
27
|
-
value:
|
|
27
|
+
value: null
|
|
28
28
|
}, // 弹窗标题
|
|
29
29
|
bgSrc: {
|
|
30
30
|
type: String,
|
|
@@ -63,6 +63,7 @@ Component({
|
|
|
63
63
|
this.triggerEvent('close');
|
|
64
64
|
},
|
|
65
65
|
|
|
66
|
+
//富文本内部的链接跳转
|
|
66
67
|
linktap(event) {
|
|
67
68
|
this.triggerEvent('linktap', {
|
|
68
69
|
...event?.detail
|