yymini-pop-content 1.0.4 → 1.0.6
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 +96 -17
- package/package.json +2 -3
- package/pop-content.js +1 -7
- package/pop-content.ttml +3 -3
- package/pop-content.wxml +3 -3
package/README.md
CHANGED
|
@@ -1,36 +1,115 @@
|
|
|
1
1
|
# yymini-pop-content
|
|
2
|
-
|
|
2
|
+
一款**轻量级、无额外依赖、开箱即用**的抖音/微信小程序底部内容弹出框自定义组件，支持自定义标题、内容明细、图片、背景图等丰富内容形态，适用于信息展示、详情预览、内容确认等底部弹出场景。
|
|
3
3
|
|
|
4
|
-
##
|
|
5
|
-
-
|
|
6
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
## 特性
|
|
5
|
+
- 跨平台兼容：无缝适配**微信小程序**与**抖音小程序**，无需额外适配开发
|
|
6
|
+
- 轻量无依赖：零外部依赖，引入即可使用，不增加项目体积负担
|
|
7
|
+
- 丰富内容自定义：支持标题、内容标题、内容信息、图片、背景图全方位自定义
|
|
8
|
+
- 灵活交互控制：可配置关闭按钮显示、取消按钮显示、底部按钮区域隐藏、遮罩点击关闭
|
|
9
|
+
- 尺寸可控：支持自定义弹窗高度，适配不同内容展示需求
|
|
10
|
+
- 状态同步流畅：通过属性监听实现显示状态同步，避免异步延迟问题
|
|
11
|
+
- 防穿透设计：内置点击穿透阻止机制，避免内容区点击触发遮罩事件
|
|
12
12
|
|
|
13
|
+
## 安装
|
|
14
|
+
1. 执行 npm 安装
|
|
13
15
|
```bash
|
|
14
16
|
npm install yymini-pop-content --save
|
|
15
17
|
or
|
|
16
18
|
yarn add yymini-pop-content
|
|
17
|
-
|
|
18
|
-
然后在 开发者工具中 构建 NPM
|
|
19
19
|
```
|
|
20
|
+
2. 小程序构建 npm
|
|
21
|
+
- 微信小程序：打开开发者工具 → 工具 → 构建 npm → 勾选「使用 npm 模块」
|
|
22
|
+
- 抖音小程序：打开开发者工具 → 工具 → 构建 npm
|
|
20
23
|
|
|
21
|
-
##
|
|
24
|
+
## 快速使用
|
|
25
|
+
### 1. 配置组件
|
|
26
|
+
在需要使用弹窗的页面或组件的 `json` 文件中声明组件引用：
|
|
22
27
|
```json
|
|
23
28
|
{
|
|
24
29
|
"usingComponents": {
|
|
25
30
|
"pop-content": "/miniprogram_npm/yymini-pop-content/pop-content"
|
|
26
31
|
}
|
|
27
32
|
}
|
|
33
|
+
```
|
|
28
34
|
|
|
35
|
+
### 2. 页面中使用
|
|
36
|
+
在 `ttml`、`wxml` 中添加组件标签，绑定属性与事件：
|
|
37
|
+
```html
|
|
38
|
+
<!-- 页面 wxml -->
|
|
39
|
+
<pop-content
|
|
40
|
+
visible="{{isVisible}}"
|
|
41
|
+
title="商品详情"
|
|
42
|
+
name="精选休闲外套"
|
|
43
|
+
desc="纯棉材质·宽松版型·多色可选，适合春秋季穿着"
|
|
44
|
+
imgSrc="/images/product.jpg"
|
|
45
|
+
bgSrc="/images/bg-detail.png"
|
|
46
|
+
height="{{80}}"
|
|
47
|
+
showCancel="{{true}}"
|
|
48
|
+
hideFooter="{{false}}"
|
|
49
|
+
maskCloseable="{{false}}"
|
|
50
|
+
bind:close="onClose"
|
|
51
|
+
bind:confirm="onConfirm"
|
|
52
|
+
></pop-content>
|
|
29
53
|
```
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
54
|
+
|
|
55
|
+
在 `js` 中控制弹窗显示与事件处理：
|
|
56
|
+
```js
|
|
57
|
+
Page({
|
|
58
|
+
data: {
|
|
59
|
+
isVisible: false
|
|
60
|
+
},
|
|
61
|
+
// 打开弹窗
|
|
62
|
+
openPopup() {
|
|
63
|
+
this.setData({ isVisible: true });
|
|
64
|
+
},
|
|
65
|
+
// 弹窗关闭事件（遮罩/取消/关闭按钮触发）
|
|
66
|
+
onClose(e) {
|
|
67
|
+
console.log("弹窗关闭，触发类型：", e.detail.type);
|
|
68
|
+
this.setData({ isVisible: false });
|
|
69
|
+
},
|
|
70
|
+
// 弹窗确认事件
|
|
71
|
+
onConfirm(e) {
|
|
72
|
+
console.log("确认按钮点击，携带参数：", e.detail);
|
|
73
|
+
// 执行业务逻辑（如跳转详情、提交订单等）
|
|
74
|
+
this.setData({ isVisible: false });
|
|
75
|
+
}
|
|
76
|
+
})
|
|
33
77
|
```
|
|
34
78
|
|
|
35
|
-
##
|
|
36
|
-
|
|
79
|
+
## 组件属性
|
|
80
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
81
|
+
|----------------|---------|--------------|----------------------------------------------------------------------|
|
|
82
|
+
| visible | Boolean | false | 【必填】控制弹窗的显示/隐藏 |
|
|
83
|
+
| zindex | Number | 999 | 弹窗及遮罩层层级，默认999，可根据页面元素层级调整，避免被遮挡 |
|
|
84
|
+
| height | Number | 85 | 弹窗高度，单位为百分比（%），默认占屏幕高度的85% |
|
|
85
|
+
| title | String | '' | 弹窗顶部标题，为空字符串时不显示标题区域 |
|
|
86
|
+
| name | String | null | 内容标题（二级标题），为null时不显示该区域 |
|
|
87
|
+
| desc | String | null | 内容信息（详情描述），为null时不显示该区域 |
|
|
88
|
+
| imgSrc | String | null | 图片地址，为null时不显示图片区域；支持本地图片和网络图片（需配置域名） |
|
|
89
|
+
| bgSrc | String | "bgSrc.png" | 弹窗背景图片地址，默认值为"bgSrc.png"，需确保项目中存在该图片或自定义替换 |
|
|
90
|
+
| cancelText | String | '取消' | 取消按钮文本，可自定义文案（如“返回”“关闭”等） |
|
|
91
|
+
| confirmText | String | '确认' | 确认按钮文本，可自定义文案（如“立即购买”“查看详情”等） |
|
|
92
|
+
| showClose | Boolean | true | 是否显示右上角关闭按钮，默认显示 |
|
|
93
|
+
| showCancel | Boolean | false | 是否显示取消按钮，默认不显示 |
|
|
94
|
+
| hideFooter | Boolean | true | 是否隐藏底部按钮区域（取消+确认按钮），默认隐藏 |
|
|
95
|
+
| maskCloseable | Boolean | false | 点击遮罩层是否关闭弹窗，默认不关闭，需手动点击按钮或关闭按钮关闭 |
|
|
96
|
+
|
|
97
|
+
## 组件事件
|
|
98
|
+
| 事件名 | 触发时机 | 事件参数 | 说明 |
|
|
99
|
+
|----------------|--------------------------------------------|---------------------------|----------------------------------------------------------------------|
|
|
100
|
+
| bind:close | 点击遮罩层、取消按钮或关闭按钮时触发 | { type: String } | type取值：mask（遮罩）、cancel（取消按钮）、close（关闭按钮），用于区分关闭来源 |
|
|
101
|
+
| bind:confirm | 点击确认按钮时触发 | { from: 'confirm' } | 固定返回from为confirm，可用于精准识别确认操作，便于后续业务逻辑处理 |
|
|
102
|
+
|
|
103
|
+
## 效果预览
|
|
104
|
+
[效果预览地址](https://raw.githubusercontent.com/AllenGe/yy/main/pop-image-con.png)
|
|
105
|
+
|
|
106
|
+
## 注意事项
|
|
107
|
+
1. 无依赖特性：组件无需额外引入其他库或资源，安装后直接使用，降低项目依赖风险
|
|
108
|
+
2. 尺寸单位说明：height属性值为百分比，无需手动添加“%”符号，组件内部自动拼接处理
|
|
109
|
+
3. 背景图配置：默认背景图地址为“bgSrc.png”，若项目中无该图片，需通过bgSrc属性自定义替换，否则可能显示空白背景
|
|
110
|
+
4. 图片显示规则：imgSrc为null或空字符串时，图片区域自动隐藏；使用网络图片时，需在小程序后台配置对应的域名白名单
|
|
111
|
+
5. 状态同步机制：组件通过observer监听visible属性变化，自动同步内部show状态，无需手动控制内部状态
|
|
112
|
+
6. 按钮显示逻辑：当hideFooter为true时，无论showCancel是否为true，底部按钮区域均隐藏；仅当hideFooter为false时，showCancel才生效
|
|
113
|
+
7. 事件穿透防护：弹窗内容区点击不会穿透到遮罩层，已通过stopPropagation方法阻止事件冒泡
|
|
114
|
+
8. 层级调整建议：若弹窗被其他页面元素遮挡，可增大zindex属性值（建议不超过9999，避免与系统层级冲突）
|
|
115
|
+
9. 内容兼容性：标题、内容等文本建议控制长度，避免因文本过长导致布局错乱；可在组件外部对长文本进行换行处理后传入
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "yymini-pop-content",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "小程序（抖音、微信）-底部内容弹出框 自定义组件",
|
|
5
5
|
"main": "pop-content.js",
|
|
6
6
|
"miniprogram": ".",
|
|
@@ -27,8 +27,7 @@
|
|
|
27
27
|
"homepage": "",
|
|
28
28
|
"private": false,
|
|
29
29
|
"files": [
|
|
30
|
-
"
|
|
31
|
-
"bgSrc.png",
|
|
30
|
+
"*.png",
|
|
32
31
|
"pop-content.*",
|
|
33
32
|
"README.md"
|
|
34
33
|
],
|
package/pop-content.js
CHANGED
|
@@ -77,7 +77,6 @@ Component({
|
|
|
77
77
|
this.triggerEvent('close', {
|
|
78
78
|
type: 'mask'
|
|
79
79
|
});
|
|
80
|
-
this.triggerEvent('cancel');
|
|
81
80
|
}
|
|
82
81
|
},
|
|
83
82
|
|
|
@@ -94,7 +93,6 @@ Component({
|
|
|
94
93
|
this.triggerEvent('close', {
|
|
95
94
|
type: 'cancel'
|
|
96
95
|
});
|
|
97
|
-
this.triggerEvent('cancel');
|
|
98
96
|
},
|
|
99
97
|
|
|
100
98
|
// 确认按钮：透传参数给业务组件
|
|
@@ -102,11 +100,8 @@ Component({
|
|
|
102
100
|
this.setData({
|
|
103
101
|
show: false
|
|
104
102
|
})
|
|
105
|
-
this.triggerEvent('close', {
|
|
106
|
-
type: 'confirm'
|
|
107
|
-
});
|
|
108
103
|
this.triggerEvent('confirm', {
|
|
109
|
-
from: '
|
|
104
|
+
from: 'confirm'
|
|
110
105
|
});
|
|
111
106
|
},
|
|
112
107
|
|
|
@@ -118,7 +113,6 @@ Component({
|
|
|
118
113
|
this.triggerEvent('close', {
|
|
119
114
|
type: 'close'
|
|
120
115
|
});
|
|
121
|
-
this.triggerEvent('cancel');
|
|
122
116
|
}
|
|
123
117
|
|
|
124
118
|
}
|
package/pop-content.ttml
CHANGED
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
|
|
8
8
|
<view class="view-area">
|
|
9
9
|
<!-- 返回按钮左上角 -->
|
|
10
|
-
<view class="popup-close" bindtap="
|
|
10
|
+
<view class="popup-close" bindtap="onClose">
|
|
11
11
|
<image src="back.png" class="comment_zuo"></image>
|
|
12
12
|
</view>
|
|
13
13
|
|
|
14
14
|
<!-- 标题 -->
|
|
15
|
-
<view tt:if="{{title}}" class="popup-title" bindtap="
|
|
15
|
+
<view tt:if="{{title}}" class="popup-title" bindtap="onClose">
|
|
16
16
|
{{title}}
|
|
17
17
|
</view>
|
|
18
18
|
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
<!-- 底部按钮区：可选 -->
|
|
27
27
|
<view class="popup-footer" tt:if="{{!hideFooter}}">
|
|
28
|
-
<button class="btn cancel" bindtap="
|
|
28
|
+
<button class="btn cancel" bindtap="onClose" tt:if="{{showCancel}}">{{cancelText}}</button>
|
|
29
29
|
<button class="btn confirm" bindtap="onConfirm">{{confirmText}}</button>
|
|
30
30
|
</view>
|
|
31
31
|
</view>
|
package/pop-content.wxml
CHANGED
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
|
|
8
8
|
<view class="view-area">
|
|
9
9
|
<!-- 返回按钮左上角 -->
|
|
10
|
-
<view class="popup-close" bindtap="
|
|
10
|
+
<view class="popup-close" bindtap="onClose">
|
|
11
11
|
<image src="back.png" class="comment_zuo"></image>
|
|
12
12
|
</view>
|
|
13
13
|
|
|
14
14
|
<!-- 标题 -->
|
|
15
|
-
<view wx:if="{{title}}" class="popup-title" bindtap="
|
|
15
|
+
<view wx:if="{{title}}" class="popup-title" bindtap="onClose">
|
|
16
16
|
{{title}}
|
|
17
17
|
</view>
|
|
18
18
|
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
<!-- 底部按钮区：可选 -->
|
|
27
27
|
<view class="popup-footer" wx:if="{{!hideFooter}}">
|
|
28
|
-
<button class="btn cancel" bindtap="
|
|
28
|
+
<button class="btn cancel" bindtap="onClose" wx:if="{{showCancel}}">{{cancelText}}</button>
|
|
29
29
|
<button class="btn confirm" bindtap="onConfirm">{{confirmText}}</button>
|
|
30
30
|
</view>
|
|
31
31
|
</view>
|