Skip to content

Commit 884363a

Browse files
muronggjuzi214032
murongg
authored and
juzi214032
committed
feat(ArcPopup)：新增 ArcPopup 组件 (#791)
1 parent 20e8782 commit 884363a

File tree

19 files changed

+748
-2
lines changed

19 files changed

+748
-2
lines changed

‎dist/arc-popup/index.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/arc-popup/index.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"component":true,"usingComponents":{"l-popup":"../popup/index"}}

‎dist/arc-popup/index.wxml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<l-popup show="{{show}}" direction="{{direction}}" transition="{{transition}}" opacity="{{opacity}}" locked="{{locked}}" z-index="{{zIndex}}" l-class="l-class" l-bg-class="l-bg-class" bind:lintap="onArcPopupTap">
2+
<scroll-view scroll-y="true" class="content-arc-popup l-panel-class" style="{{arcStyle}}">
3+
<slot></slot>
4+
</scroll-view>
5+
</l-popup>

‎dist/arc-popup/index.wxss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.container-arc-popup{width:100%}.content-arc-popup{width:100%;background:#fff;padding:20rpx;box-sizing:border-box}

‎examples/app.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@
6666
"pages/loadmore/case/index",
6767
"pages/steps/index",
6868
"pages/skeleton/index",
69-
"pages/progress/index"
69+
"pages/progress/index",
70+
"pages/arc-popup/index"
7071
]
7172
},
7273
{

‎examples/dist/arc-popup/index.js‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import validator from '../behaviors/validator';
2+
import zIndex from '../behaviors/zIndex';
3+
const detail = true;
4+
const option = { bubbles: true, composed: true };
5+
6+
Component({
7+
/**
8+
* 组件的属性列表
9+
*/
10+
behaviors: [zIndex, validator],
11+
externalClasses: ['l-class', 'l-panel-class', 'l-bg-class'],
12+
properties: {
13+
// 显示与隐藏
14+
show: {
15+
type: Boolean,
16+
value: false
17+
},
18+
// 最大高度
19+
maxHeight: {
20+
type: Number,
21+
value: 600
22+
},
23+
// 最小高度
24+
minHeight: {
25+
type: Number,
26+
value: 200
27+
},
28+
// 顶部弧度
29+
arcRadius: {
30+
type: Number,
31+
value: 18
32+
},
33+
// 动画效果的显示和隐藏
34+
transition: {
35+
type: Boolean,
36+
value: true
37+
},
38+
// 锁定
39+
locked: {
40+
type: Boolean,
41+
value: false
42+
},
43+
// 背景透明度
44+
opacity: {
45+
type: Number,
46+
value: 0.4
47+
},
48+
// 弹出方向
49+
direction: {
50+
type: String,
51+
options: ['top', 'bottom'],
52+
value: 'bottom'
53+
}
54+
},
55+
56+
/**
57+
* 组件的初始数据
58+
*/
59+
data: {
60+
_arcRadiusTop: 12,
61+
_ardRadiusBottom: 18,
62+
arcStyle: ''
63+
},
64+
65+
/**
66+
* 侦听器
67+
*/
68+
observers: {
69+
'show': function (show) {
70+
if (show) {
71+
this.triggerEvent('linshow', detail, option);
72+
this.getArcPopupStyle();
73+
} else {
74+
this.triggerEvent('linclose', detail, option);
75+
}
76+
},
77+
'arcRadius': function (arcRadius) {
78+
if (this.properties.direction === 'top') {
79+
this.data._arcRadiusTop = arcRadius
80+
} else {
81+
this.data._ardRadiusBottom = arcRadius
82+
}
83+
this.getArcPopupStyle();
84+
}
85+
},
86+
87+
pageLifetimes: {
88+
show() {
89+
this._init();
90+
},
91+
},
92+
93+
/**
94+
* 组件的方法列表
95+
*/
96+
methods: {
97+
_init() {
98+
wx.lin = wx.lin || {};
99+
wx.lin.showArcPopup = (options) => {
100+
const {
101+
zIndex = 99,
102+
tranistion = true,
103+
direction = 'bottom',
104+
locked = false
105+
} = { ...options };
106+
this.setData({
107+
zIndex,
108+
tranistion,
109+
direction,
110+
locked,
111+
show: true
112+
});
113+
};
114+
wx.lin.hideArcPopup = () => {
115+
this.setData({
116+
show: false
117+
});
118+
};
119+
},
120+
getArcPopupStyle() {
121+
const direction = this.properties.direction
122+
const arcRadiusTop = this.data._arcRadiusTop
123+
const ardRadiusBottom = this.data._ardRadiusBottom
124+
const maxHeight = this.properties.maxHeight
125+
const minHeight = this.properties.minHeight
126+
const style = `
127+
border-bottom-left-radius:${direction === 'top' ? arcRadiusTop : 0}rpx;
128+
border-bottom-right-radius:${direction === 'top' ? arcRadiusTop : 0}rpx;
129+
border-top-left-radius:${direction === 'bottom' ? ardRadiusBottom : 0}rpx;
130+
border-top-right-radius:${direction === 'bottom' ? ardRadiusBottom : 0}rpx;
131+
max-height:${maxHeight}rpx;
132+
min-height:${minHeight}rpx;
133+
`
134+
this.setData({
135+
arcStyle: style
136+
})
137+
},
138+
onArcPopupTap() {
139+
if (this.data.locked) {
140+
return
141+
}
142+
if (this.properties.show) {
143+
this.setData({
144+
show: false
145+
})
146+
}
147+
}
148+
},
149+
150+
ready() {
151+
this.getArcPopupStyle();
152+
}
153+
})

‎examples/dist/arc-popup/index.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"component": true,
3+
"usingComponents": {
4+
"l-popup": "../popup/index"
5+
}
6+
}

‎examples/dist/arc-popup/index.wxml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<l-popup
2+
show="{{show}}"
3+
direction="{{direction}}"
4+
transition="{{transition}}"
5+
opacity="{{opacity}}"
6+
locked="{{locked}}"
7+
z-index="{{zIndex}}"
8+
l-class="l-class"
9+
l-bg-class="l-bg-class"
10+
bind:lintap="onArcPopupTap"
11+
>
12+
<scroll-view
13+
scroll-y="true"
14+
class="content-arc-popup l-panel-class"
15+
style="{{arcStyle}}"
16+
>
17+
<slot></slot>
18+
</scroll-view>
19+
</l-popup>

‎examples/dist/arc-popup/index.wxss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.container-arc-popup{width:100%}.content-arc-popup{width:100%;background:#fff;padding:20rpx;box-sizing:border-box}

‎examples/pages/components/view/pages/arc-popup/index.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
// pages/components/view/pages/arc-popup/index.js
2+
import navConfig from './popup-nav.js';
3+
4+
Page({
5+
6+
/**
7+
* 页面的初始数据
8+
*/
9+
data: {
10+
navConfig: navConfig,
11+
currentConf: {
12+
13+
}
14+
},
15+
16+
// 显示Popup
17+
onShowPopupTap(e) {
18+
const type = e.currentTarget.dataset.type
19+
const config = this.data.navConfig[type].config
20+
this.setData({
21+
currentConf: config,
22+
type
23+
})
24+
},
25+
26+
// 隐藏Popup
27+
onHidePopupTap() {
28+
const type = this.data.type
29+
this.data.currentConf.show = false
30+
this.setData({
31+
currentConf: this.data.currentConf
32+
})
33+
34+
if (type === 3) {
35+
wx.showToast({
36+
title: '已取消~',
37+
icon: 'none'
38+
})
39+
}
40+
},
41+
/**
42+
* 生命周期函数--监听页面加载
43+
*/
44+
onLoad: function (options) {
45+
46+
},
47+
48+
/**
49+
* 生命周期函数--监听页面初次渲染完成
50+
*/
51+
onReady: function () {
52+
53+
},
54+
55+
/**
56+
* 生命周期函数--监听页面显示
57+
*/
58+
onShow: function () {
59+
60+
},
61+
62+
/**
63+
* 生命周期函数--监听页面隐藏
64+
*/
65+
onHide: function () {
66+
67+
},
68+
69+
/**
70+
* 生命周期函数--监听页面卸载
71+
*/
72+
onUnload: function () {
73+
74+
},
75+
76+
/**
77+
* 页面相关事件处理函数--监听用户下拉动作
78+
*/
79+
onPullDownRefresh: function () {
80+
81+
},
82+
83+
/**
84+
* 页面上拉触底事件的处理函数
85+
*/
86+
onReachBottom: function () {
87+
88+
},
89+
90+
/**
91+
* 用户点击右上角分享
92+
*/
93+
onShareAppMessage: function () {
94+
95+
}
96+
})

0 commit comments

Comments
 (0)