mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[breaking change] Popup: rewrite
This commit is contained in:
陈嘉涵
parent
67862f03dc
commit
63c52edf2d
@ -1,40 +1,40 @@
|
||||
Page({
|
||||
|
||||
data: {
|
||||
showPopup: false,
|
||||
showLeftPopup: false,
|
||||
showRightPopup: false,
|
||||
showTopPopup: false,
|
||||
showBottomPopup: false
|
||||
show: {
|
||||
middle: false,
|
||||
top: false,
|
||||
bottom: false,
|
||||
right: false,
|
||||
right2: false
|
||||
}
|
||||
},
|
||||
|
||||
toggle(type) {
|
||||
this.setData({
|
||||
[`show.${type}`]: !this.data.show[type]
|
||||
});
|
||||
},
|
||||
|
||||
togglePopup() {
|
||||
this.setData({
|
||||
showPopup: !this.data.showPopup
|
||||
});
|
||||
},
|
||||
|
||||
toggleLeftPopup() {
|
||||
this.setData({
|
||||
showLeftPopup: !this.data.showLeftPopup
|
||||
});
|
||||
this.toggle('middle');
|
||||
},
|
||||
|
||||
toggleRightPopup() {
|
||||
this.setData({
|
||||
showRightPopup: !this.data.showRightPopup
|
||||
});
|
||||
this.toggle('right');
|
||||
},
|
||||
|
||||
toggleRightPopup2() {
|
||||
this.toggle('right2');
|
||||
},
|
||||
|
||||
toggleBottomPopup() {
|
||||
this.setData({
|
||||
showBottomPopup: !this.data.showBottomPopup
|
||||
});
|
||||
this.toggle('bottom');
|
||||
},
|
||||
|
||||
toggleTopPopup() {
|
||||
this.setData({
|
||||
showTopPopup: !this.data.showTopPopup
|
||||
});
|
||||
this.toggle('top');
|
||||
setTimeout(() => {
|
||||
this.toggle('top');
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Popup 弹出层",
|
||||
"usingComponents": {
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-popup": "../../dist/popup/index",
|
||||
"van-button": "../../dist/button/index"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,84 +1,54 @@
|
||||
<van-button class="van-button" bind:tap="togglePopup">
|
||||
弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:tap="toggleTopPopup">
|
||||
从顶部弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:tap="toggleBottomPopup">
|
||||
从底部弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:tap="toggleLeftPopup">
|
||||
从左边弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:tap="toggleRightPopup">
|
||||
从右边弹出popup
|
||||
</van-button>
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-button bind:tap="togglePopup">弹出 Popup</van-button>
|
||||
<van-popup
|
||||
show="{{ show.middle }}"
|
||||
custom-class="center"
|
||||
bind:close="togglePopup"
|
||||
>
|
||||
内容
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<!-- 中间弹出框 -->
|
||||
<van-popup
|
||||
show="{{ showPopup }}"
|
||||
bindclose="togglePopup"
|
||||
>
|
||||
<view class="pop-example__container">
|
||||
<view class="van-buttons">
|
||||
<button class="van-button" bindtap="togglePopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</van-popup>
|
||||
<demo-block title="弹出位置" padding>
|
||||
<van-button bind:tap="toggleBottomPopup" custom-class="demo-margin-right">底部弹出</van-button>
|
||||
|
||||
<!-- 左侧弹出框 -->
|
||||
<van-popup
|
||||
show="{{ showLeftPopup }}"
|
||||
type="left"
|
||||
bindclose="toggleLeftPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--left">
|
||||
<view class="van-buttons">
|
||||
<button class="van-button" bindtap="toggleLeftPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</van-popup>
|
||||
<van-popup
|
||||
show="{{ show.bottom }}"
|
||||
position="bottom"
|
||||
custom-class="bottom"
|
||||
bind:close="toggleBottomPopup"
|
||||
>
|
||||
内容
|
||||
</van-popup>
|
||||
|
||||
<!-- 右侧弹出框 -->
|
||||
<van-popup
|
||||
show="{{ showRightPopup }}"
|
||||
type="right"
|
||||
bindclose="toggleRightPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--right">
|
||||
<view class="van-buttons">
|
||||
<button class="van-button" catchtap="toggleRightPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</van-popup>
|
||||
<van-button bind:tap="toggleTopPopup" custom-class="demo-margin-right">顶部弹出</van-button>
|
||||
<van-popup
|
||||
show="{{ show.top }}"
|
||||
position="top"
|
||||
overlay="{{ false }}"
|
||||
custom-class="top"
|
||||
bind:close="toggleTopPopup"
|
||||
>
|
||||
内容
|
||||
</van-popup>
|
||||
|
||||
<!-- 顶部弹出框 -->
|
||||
<van-popup
|
||||
show="{{ showTopPopup }}"
|
||||
overlay="{{ false }}"
|
||||
type="top"
|
||||
bindclose="toggleTopPopup"
|
||||
>
|
||||
<view class="pop-example--top">内容</view>
|
||||
</van-popup>
|
||||
<van-button bind:tap="toggleRightPopup">右侧弹出</van-button>
|
||||
<van-popup
|
||||
show="{{ show.right }}"
|
||||
position="right"
|
||||
custom-class="right"
|
||||
bind:close="toggleRightPopup"
|
||||
>
|
||||
<van-button bind:tap="toggleRightPopup" custom-class="demo-margin-right">关闭弹层</van-button>
|
||||
|
||||
<!-- 底部弹出框 -->
|
||||
<van-popup
|
||||
show="{{ showBottomPopup }}"
|
||||
type="bottom"
|
||||
bindclose="toggleBottomPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--bottom">
|
||||
<view class="van-buttons">
|
||||
<button class="van-button" catchtap="toggleBottomPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</van-popup>
|
||||
<van-button bind:tap="toggleRightPopup2">右侧弹出</van-button>
|
||||
<van-popup
|
||||
show="{{ show.right2 }}"
|
||||
position="right"
|
||||
custom-class="right"
|
||||
bind:close="toggleRightPopup2"
|
||||
>
|
||||
<van-button bind:tap="toggleRightPopup2">关闭弹层</van-button>
|
||||
</van-popup>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
@ -1,21 +1,32 @@
|
||||
.pop-example--top {
|
||||
width: 100vw;
|
||||
padding: 15px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
:host {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 60%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pop-example__container {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
.top {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
border-radius: 0;
|
||||
line-height: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.8)!important;
|
||||
}
|
||||
|
||||
.pop-example__container--bottom {
|
||||
width: 100vw;
|
||||
.bottom {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
line-height: 100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pop-example__container--left, .pop-example__container--right {
|
||||
height: 100vh;
|
||||
.right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -3,62 +3,65 @@
|
||||
### 使用指南
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-popup": "path/to/vant-weapp/dist/popup/index"
|
||||
}
|
||||
"usingComponents": {
|
||||
"van-popup": "path/to/vant-weapp/dist/popup/index"
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
可以在页面任意位置上使用 van-popup 标签。通过 show 可以控制弹窗是否展示
|
||||
```html
|
||||
<van-popup show="{{ show }}"></van-popup>
|
||||
```
|
||||
#### popup 动画
|
||||
popup 额外支持了 上下左右 四种动画方式，通过增加 type 属性即可控制。使用方式如下
|
||||
```html
|
||||
<!-- 从底部弹出的弹层 -->
|
||||
<van-popup type="bottom" show="{{ show }}"></van-popup>
|
||||
|
||||
<!-- 从顶部弹出的弹层 -->
|
||||
<van-popup type="top" show="{{ show }}"></van-popup>
|
||||
|
||||
<!-- 从左侧弹出的弹层 -->
|
||||
<van-popup type="left" show="{{ show }}"></van-popup>
|
||||
|
||||
<!-- 从右侧弹出的弹层 -->
|
||||
<van-popup type="right" show="{{ show }}"></van-popup>
|
||||
```
|
||||
|
||||
#### 控制显示，隐藏
|
||||
#### 基础用法
|
||||
`popup`默认从中间弹出
|
||||
|
||||
```html
|
||||
<van-popup show="{{ isShow }}" bindclose="togglePopup"></van-popup>
|
||||
<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
data: {
|
||||
isShow: false
|
||||
},
|
||||
togglePopup() {
|
||||
this.setData({
|
||||
isShow: !this.data.isShow
|
||||
});
|
||||
}
|
||||
```javascript
|
||||
Page({
|
||||
data: {
|
||||
show: false
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({ show: false });
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 具体参数和事件
|
||||
#### 参数说明
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| show | 是否显示弹出层 | Boolean | false | |
|
||||
| overlay | 是否显示遮罩层 | Boolean | true | |
|
||||
| closeOnClickOverlay | 遮罩层点击时，是否触发关闭事件 | Boolean | true | |
|
||||
| type | 弹出层动画方式, 可选`center`, `left`, `right`, `top`, `bottom` | String | center | |
|
||||
#### 弹出位置
|
||||
通过`position`属性设置 Popup 弹出位置
|
||||
|
||||
#### 事件说明
|
||||
| 事件名 | 说明 | 参数 |
|
||||
```html
|
||||
<van-popup
|
||||
show="{{ show }}"
|
||||
position="top"
|
||||
overlay="{{ false }}"
|
||||
bind:close="onClose"
|
||||
>
|
||||
内容
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| show | 当前组件是否显示 | `Boolean` | `false` |
|
||||
| overlay | 是否显示背景蒙层 | `Boolean` | `true` |
|
||||
| position | 可选值为 `top` `bottom` `right` `left` | `String` | - |
|
||||
| overlay-style | 自定义蒙层样式 | `Object` | `` |
|
||||
| close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click-overlay | 遮罩层点击触发 | |
|
||||
| close | 遮罩层关闭时触发 | |
|
||||
| click-overlay | 点击蒙层时触发 | - |
|
||||
| close | 蒙层关闭时触发 | - |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点样式类 |
|
||||
| overlay-class | 蒙层样式类 |
|
||||
|
||||
@ -1,35 +1,33 @@
|
||||
Component({
|
||||
properties: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
externalClasses: [
|
||||
'custom-class',
|
||||
'overlay-class'
|
||||
],
|
||||
|
||||
properties: {
|
||||
show: Boolean,
|
||||
overlayStyle: String,
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
|
||||
// 弹出方向
|
||||
type: {
|
||||
position: {
|
||||
type: String,
|
||||
value: 'center'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMaskClick() {
|
||||
this.triggerEvent('click-overlay', {});
|
||||
onClickOverlay() {
|
||||
this.triggerEvent('click-overlay');
|
||||
|
||||
if (!this.data.closeOnClickOverlay) {
|
||||
return;
|
||||
if (this.data.closeOnClickOverlay) {
|
||||
this.triggerEvent('close');
|
||||
}
|
||||
this.triggerEvent('close', {});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"pop-manager": "../common/pop-manager/index"
|
||||
}
|
||||
"component": true
|
||||
}
|
||||
|
||||
95
packages/popup/index.pcss
Normal file
95
packages/popup/index.pcss
Normal file
@ -0,0 +1,95 @@
|
||||
@import '../common/index.pcss';
|
||||
|
||||
.van-popup {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
background-color: $white;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
|
||||
&,
|
||||
&__overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
animation: van-fade-in .3s ease;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
&--top {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
animation-name: van-popup-top;
|
||||
}
|
||||
|
||||
&--right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
animation-name: van-popup-right;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
animation-name: van-popup-bottom;
|
||||
}
|
||||
|
||||
&--left {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
animation-name: van-popup-left;
|
||||
}
|
||||
|
||||
&--show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-popup-top {
|
||||
from {
|
||||
transform: translate3d(-50%, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-popup-bottom {
|
||||
from {
|
||||
transform: translate3d(-50%, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-popup-left {
|
||||
from {
|
||||
transform: translate3d(-100%, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-popup-right {
|
||||
from {
|
||||
transform: translate3d(100%, -50%, 0);
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
<pop-manager
|
||||
show="{{ show }}"
|
||||
type="{{ type }}"
|
||||
show-overlay="{{ overlay }}"
|
||||
bindclickmask="handleMaskClick"
|
||||
>
|
||||
<slot></slot>
|
||||
</pop-manager>
|
||||
<view
|
||||
wx:if="{{ overlay }}"
|
||||
class="overlay-class van-popup__overlay {{ show ? 'van-popup--show' : '' }}"
|
||||
style="{{ overlayStyle }}"
|
||||
bind:tap="onClickOverlay"
|
||||
/>
|
||||
<view class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }} {{ show ? 'van-popup--show' : '' }}">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user