yymini-pop-slot 1.0.0
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 +53 -0
- package/back.png +0 -0
- package/package.json +35 -0
- package/pop-slot.js +87 -0
- package/pop-slot.json +4 -0
- package/pop-slot.ttml +35 -0
- package/pop-slot.ttss +170 -0
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# yymini-pop-slot
|
|
2
|
+
小程序（抖音） 插槽 slot
|
|
3
|
+
在组件的 ttml 中可以包含 slot 节点，用于将组件使用者提供的 ttml内容分发到组件中的指定位置。
|
|
4
|
+
|
|
5
|
+
## 🌟 特性
|
|
6
|
+
- 原生小程序语法，兼容小程序（抖音）基础库
|
|
7
|
+
- 支持自定义 标题、插槽 slot内容、按钮等
|
|
8
|
+
- 提供 确认/取消 回调，支持 遮罩关闭
|
|
9
|
+
- 样式简洁美观，可自定义修改
|
|
10
|
+
|
|
11
|
+
## 📦 安装
|
|
12
|
+
在你的小程序项目根目录执行：
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install yymini-pop-slot --save
|
|
16
|
+
or
|
|
17
|
+
yarn add yymini-pop-slot
|
|
18
|
+
|
|
19
|
+
然后在 开发者工具中 构建 NPM
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## 🎨 引用
|
|
23
|
+
```json
|
|
24
|
+
{
|
|
25
|
+
"usingComponents": {
|
|
26
|
+
"pop-slot": "/miniprogram_npm/yymini-pop-slot/pop-slot"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## ▶️ use
|
|
32
|
+
```ttml / wxml
|
|
33
|
+
<pop-slot visible="{{true}}" title="插槽 slot" btnLeft="取消" btnRight="确定" bind:close="onClose" bind:confirm="onConfirm">
|
|
34
|
+
<view slot="content">
|
|
35
|
+
<view>这是里插槽 slot=content的内容</view>
|
|
36
|
+
<view>11</view>
|
|
37
|
+
<view>22</view>
|
|
38
|
+
<view>这是里插槽 slot=content的内容</view>
|
|
39
|
+
<view>111</view>
|
|
40
|
+
<view>222</view>
|
|
41
|
+
<view>333</view>
|
|
42
|
+
<view>444</view>
|
|
43
|
+
<view>这是里插槽 slot=content的内容</view>
|
|
44
|
+
<view>1111</view>
|
|
45
|
+
<view>2222</view>
|
|
46
|
+
<view>3333</view>
|
|
47
|
+
<view>4444</view>
|
|
48
|
+
</view>
|
|
49
|
+
</pop-slot
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## 👀 示例效果
|
|
53
|
+
|
package/back.png
ADDED
|
Binary file
|
package/package.json
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "yymini-pop-slot",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "小程序（抖音）-底部富文本弹出框自定义组件",
|
|
5
|
+
"main": "pop-slot.js",
|
|
6
|
+
"miniprogram": ".",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"douyin",
|
|
9
|
+
"miniProgram",
|
|
10
|
+
"抖音小程序",
|
|
11
|
+
"confirm",
|
|
12
|
+
"modal",
|
|
13
|
+
"弹出框",
|
|
14
|
+
"中间弹出框"
|
|
15
|
+
],
|
|
16
|
+
"author": "Allen.ge <gyjshow@163.com>",
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"repository": {
|
|
19
|
+
"type": "",
|
|
20
|
+
"url": ""
|
|
21
|
+
},
|
|
22
|
+
"bugs": {
|
|
23
|
+
"url": ""
|
|
24
|
+
},
|
|
25
|
+
"homepage": "",
|
|
26
|
+
"private": false,
|
|
27
|
+
"files": [
|
|
28
|
+
"*.png",
|
|
29
|
+
"pop-slot*",
|
|
30
|
+
"README.md"
|
|
31
|
+
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
34
|
+
}
|
|
35
|
+
}
|
package/pop-slot.js
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
Component({
|
|
2
|
+
properties: {
|
|
3
|
+
// 是否显示弹窗
|
|
4
|
+
visible: {
|
|
5
|
+
type: Boolean,
|
|
6
|
+
value: false,
|
|
7
|
+
observer(newVal, oldVal) {
|
|
8
|
+
if (newVal !== oldVal) {
|
|
9
|
+
// 弹窗显示时自动获取数据
|
|
10
|
+
if (newVal) {
|
|
11
|
+
// this.getBtnAreaInfo();
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
zindex: {
|
|
17
|
+
type: Number,
|
|
18
|
+
value: 999
|
|
19
|
+
},
|
|
20
|
+
width: {
|
|
21
|
+
type: Number,
|
|
22
|
+
value: 80
|
|
23
|
+
}, //内容宽度
|
|
24
|
+
height: {
|
|
25
|
+
type: Number,
|
|
26
|
+
value: 50
|
|
27
|
+
}, //内容高度
|
|
28
|
+
isBackLeft: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
value: false
|
|
31
|
+
},
|
|
32
|
+
title: {
|
|
33
|
+
type: String,
|
|
34
|
+
value: '这是 插槽 slot'
|
|
35
|
+
},
|
|
36
|
+
btnLeft: {
|
|
37
|
+
type: String,
|
|
38
|
+
value: null
|
|
39
|
+
},
|
|
40
|
+
btnRight: {
|
|
41
|
+
type: String,
|
|
42
|
+
value: '确定'
|
|
43
|
+
},
|
|
44
|
+
hideFooter: {
|
|
45
|
+
type: Boolean,
|
|
46
|
+
value: true
|
|
47
|
+
}, // 是否隐藏底部按钮
|
|
48
|
+
maskClosable: {
|
|
49
|
+
type: Boolean,
|
|
50
|
+
value: true
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
|
|
54
|
+
data: {},
|
|
55
|
+
|
|
56
|
+
methods: {
|
|
57
|
+
|
|
58
|
+
// 点击遮罩层
|
|
59
|
+
onMaskClick() {
|
|
60
|
+
if (maskClosable) {
|
|
61
|
+
this.triggerEvent('close', {}, {
|
|
62
|
+
bubbles: false,
|
|
63
|
+
composed: false
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
|
|
68
|
+
// 点击取消按钮
|
|
69
|
+
onClose() {
|
|
70
|
+
this.triggerEvent('close', {
|
|
71
|
+
type: 'close'
|
|
72
|
+
});
|
|
73
|
+
},
|
|
74
|
+
|
|
75
|
+
onConfirm() {
|
|
76
|
+
this.triggerEvent('confirm', {
|
|
77
|
+
from: 'base-popup-bottom'
|
|
78
|
+
});
|
|
79
|
+
},
|
|
80
|
+
|
|
81
|
+
},
|
|
82
|
+
|
|
83
|
+
// 组件初始化
|
|
84
|
+
attached() {
|
|
85
|
+
|
|
86
|
+
}
|
|
87
|
+
});
|
package/pop-slot.json
ADDED
package/pop-slot.ttml
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<!-- 遮罩层：用样式控制显示/隐藏 -->
|
|
2
|
+
<view class="view-mask {{visible ? 'show' : ''}}" style="z-index: {{zindex}};" bindtap="onMaskClick">
|
|
3
|
+
<!-- 弹窗主体：同理，添加 show 类触发动画 -->
|
|
4
|
+
<view class="view-content {{visible ? 'show' : ''}}" style="width: {{width}}%;height: {{height}}%;">
|
|
5
|
+
<view class="view-top">
|
|
6
|
+
<button tt:if="{{isBackLeft}}" class="btn-left" bindtap="onClose">
|
|
7
|
+
<image src="../../../imgs/comment_zuo.png" class="img-left"></image>
|
|
8
|
+
</button>
|
|
9
|
+
<view tt:else class="btn-left"></view>
|
|
10
|
+
<view class="toast-title">{{title}}</view>
|
|
11
|
+
<view class="btn-left"></view>
|
|
12
|
+
</view>
|
|
13
|
+
<view class="view-area">
|
|
14
|
+
<slot name="content"></slot>
|
|
15
|
+
<!-- <view>1111</view>
|
|
16
|
+
<view>2222</view>
|
|
17
|
+
<view>3333</view>
|
|
18
|
+
<view>4444</view>
|
|
19
|
+
<view>这是里内容 flex布局撑开</view>
|
|
20
|
+
<view>1111</view>
|
|
21
|
+
<view>2222</view>
|
|
22
|
+
<view>3333</view>
|
|
23
|
+
<view>4444</view>
|
|
24
|
+
<view>这是里内容 flex布局撑开</view>
|
|
25
|
+
<view>1111</view>
|
|
26
|
+
<view>2222</view>
|
|
27
|
+
<view>3333</view>
|
|
28
|
+
<view>4444</view> -->
|
|
29
|
+
</view>
|
|
30
|
+
<view tt:if="{{hideFooter}}" class="view-btn">
|
|
31
|
+
<button tt:if="{{btnLeft}}" class="btm-left close" bindtap="onClose">{{btnLeft}}</button>
|
|
32
|
+
<button tt:if="{{btnRight}}" class="btm-left" bindtap="onConfirm">{{btnRight}}</button>
|
|
33
|
+
</view>
|
|
34
|
+
</view>
|
|
35
|
+
</view>
|
package/pop-slot.ttss
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
/* 重置 button 本身的边框和外轮廓 */
|
|
2
|
+
button {
|
|
3
|
+
border: none !important;
|
|
4
|
+
/* 去掉默认边框 */
|
|
5
|
+
outline: none !important;
|
|
6
|
+
/* 去掉点击外轮廓（可选） */
|
|
7
|
+
background: transparent;
|
|
8
|
+
/* 可选：去掉默认背景色 */
|
|
9
|
+
border-radius: 0;
|
|
10
|
+
/* 可选：去掉默认圆角 */
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* 关键：去掉 button 伪元素 ::after 的边框（抖音小程序默认通过这个渲染边框） */
|
|
14
|
+
button::after {
|
|
15
|
+
border: none !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* 遮罩层：初始透明，添加过渡 */
|
|
19
|
+
.view-mask {
|
|
20
|
+
position: fixed;
|
|
21
|
+
top: 0;
|
|
22
|
+
left: 0;
|
|
23
|
+
right: 0;
|
|
24
|
+
bottom: 0;
|
|
25
|
+
background: rgba(0, 0, 0, 0.45);
|
|
26
|
+
opacity: 0;
|
|
27
|
+
/* 初始透明 */
|
|
28
|
+
pointer-events: none;
|
|
29
|
+
/* 隐藏时不响应点击 */
|
|
30
|
+
transition: opacity 0.3s ease;
|
|
31
|
+
/* 淡入淡出过渡，时长0.3s */
|
|
32
|
+
|
|
33
|
+
/* z-index: 1000; */
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* 遮罩层显示状态 */
|
|
37
|
+
.view-mask.show {
|
|
38
|
+
opacity: 1;
|
|
39
|
+
/* 完全不透明 */
|
|
40
|
+
pointer-events: auto;
|
|
41
|
+
/* 响应点击 */
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* 弹窗主体：初始透明+轻微缩放，添加过渡 */
|
|
45
|
+
.view-content {
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 50%;
|
|
48
|
+
left: 50%;
|
|
49
|
+
transform: translate(-50%, -50%) scale(0.9);
|
|
50
|
+
/* 初始缩放0.9倍 */
|
|
51
|
+
background: #fff;
|
|
52
|
+
border-radius: 16rpx;
|
|
53
|
+
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
|
54
|
+
opacity: 0;
|
|
55
|
+
/* 初始透明 */
|
|
56
|
+
pointer-events: none;
|
|
57
|
+
/* 隐藏时不响应点击 */
|
|
58
|
+
/* 透明度+缩放同时过渡，曲线ease更自然 */
|
|
59
|
+
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
/* background-color: #409eff; */
|
|
63
|
+
border-radius: 20rpx;
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
|
|
66
|
+
max-height: 90%;
|
|
67
|
+
|
|
68
|
+
/* width: 85%;
|
|
69
|
+
height: 45%; */
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* 弹窗主体显示状态 */
|
|
73
|
+
.view-content.show {
|
|
74
|
+
opacity: 1;
|
|
75
|
+
/* 完全不透明 */
|
|
76
|
+
transform: translate(-50%, -50%) scale(1);
|
|
77
|
+
/* 恢复原大小 */
|
|
78
|
+
pointer-events: auto;
|
|
79
|
+
/* 响应点击 */
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.view-btn {
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-direction: row;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.btm-left {
|
|
88
|
+
flex: 1;
|
|
89
|
+
height: 100rpx;
|
|
90
|
+
color: #333;
|
|
91
|
+
border-radius: 8rpx;
|
|
92
|
+
font-size: 32rpx;
|
|
93
|
+
border: none;
|
|
94
|
+
line-height: 88rpx;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.btm-left.close {
|
|
98
|
+
color: #666;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.btm-left::after {
|
|
102
|
+
border: none;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.btm-left:active {
|
|
106
|
+
box-shadow: inset 0 0 2rpx rgba(0, 0, 0, 0.05);
|
|
107
|
+
opacity: 0.9;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.view-top {
|
|
111
|
+
height: 120rpx;
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-direction: row;
|
|
114
|
+
align-items: center;
|
|
115
|
+
/* background: red; */
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.btn-left {
|
|
119
|
+
background-color: #FFF;
|
|
120
|
+
display: flex;
|
|
121
|
+
height: 120rpx;
|
|
122
|
+
width: 96rpx;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
align-items: center;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.btn-left:active {
|
|
128
|
+
box-shadow: inset 0 0 2rpx rgba(0, 0, 0, 0.05);
|
|
129
|
+
opacity: 0.7;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.img-left {
|
|
133
|
+
width: 48rpx;
|
|
134
|
+
height: 48rpx;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
/* 标题样式 */
|
|
139
|
+
.toast-title {
|
|
140
|
+
font-size: 40rpx;
|
|
141
|
+
font-weight: 600;
|
|
142
|
+
flex: 1;
|
|
143
|
+
text-align: center;
|
|
144
|
+
font-style: italic;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.view-area {
|
|
148
|
+
/* background-color: #e8e8e8; */
|
|
149
|
+
display: flex;
|
|
150
|
+
flex: 1;
|
|
151
|
+
flex-direction: column;
|
|
152
|
+
padding: 0 30rpx 30rpx;
|
|
153
|
+
margin-bottom: 30rpx;
|
|
154
|
+
/* background-color: #333; */
|
|
155
|
+
overflow-y: auto;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* 取消按钮 */
|
|
159
|
+
.cancel-button {
|
|
160
|
+
height: 100rpx;
|
|
161
|
+
width: 100%;
|
|
162
|
+
display: flex;
|
|
163
|
+
justify-content: center;
|
|
164
|
+
align-items: center;
|
|
165
|
+
background: #FFF;
|
|
166
|
+
border-top: 1rpx solid #e8e8e8;
|
|
167
|
+
font-size: 32rpx;
|
|
168
|
+
color: #333;
|
|
169
|
+
padding-bottom: 30rpx;
|
|
170
|
+
}
|