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({
|
Page({
|
||||||
|
|
||||||
data: {
|
data: {
|
||||||
showPopup: false,
|
show: {
|
||||||
showLeftPopup: false,
|
middle: false,
|
||||||
showRightPopup: false,
|
top: false,
|
||||||
showTopPopup: false,
|
bottom: false,
|
||||||
showBottomPopup: false
|
right: false,
|
||||||
|
right2: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
toggle(type) {
|
||||||
|
this.setData({
|
||||||
|
[`show.${type}`]: !this.data.show[type]
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
togglePopup() {
|
togglePopup() {
|
||||||
this.setData({
|
this.toggle('middle');
|
||||||
showPopup: !this.data.showPopup
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
toggleLeftPopup() {
|
|
||||||
this.setData({
|
|
||||||
showLeftPopup: !this.data.showLeftPopup
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleRightPopup() {
|
toggleRightPopup() {
|
||||||
this.setData({
|
this.toggle('right');
|
||||||
showRightPopup: !this.data.showRightPopup
|
},
|
||||||
});
|
|
||||||
|
toggleRightPopup2() {
|
||||||
|
this.toggle('right2');
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleBottomPopup() {
|
toggleBottomPopup() {
|
||||||
this.setData({
|
this.toggle('bottom');
|
||||||
showBottomPopup: !this.data.showBottomPopup
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleTopPopup() {
|
toggleTopPopup() {
|
||||||
this.setData({
|
this.toggle('top');
|
||||||
showTopPopup: !this.data.showTopPopup
|
setTimeout(() => {
|
||||||
});
|
this.toggle('top');
|
||||||
|
}, 2000);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"navigationBarTitleText": "Popup 弹出层",
|
"navigationBarTitleText": "Popup 弹出层",
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
"van-popup": "../../dist/popup/index",
|
"van-popup": "../../dist/popup/index",
|
||||||
"van-button": "../../dist/button/index"
|
"van-button": "../../dist/button/index"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,84 +1,54 @@
|
|||||||
<van-button class="van-button" bind:tap="togglePopup">
|
<demo-block title="基础用法" padding>
|
||||||
弹出popup
|
<van-button bind:tap="togglePopup">弹出 Popup</van-button>
|
||||||
</van-button>
|
<van-popup
|
||||||
<van-button class="van-button" bind:tap="toggleTopPopup">
|
show="{{ show.middle }}"
|
||||||
从顶部弹出popup
|
custom-class="center"
|
||||||
</van-button>
|
bind:close="togglePopup"
|
||||||
<van-button class="van-button" bind:tap="toggleBottomPopup">
|
>
|
||||||
从底部弹出popup
|
内容
|
||||||
</van-button>
|
</van-popup>
|
||||||
<van-button class="van-button" bind:tap="toggleLeftPopup">
|
</demo-block>
|
||||||
从左边弹出popup
|
|
||||||
</van-button>
|
|
||||||
<van-button class="van-button" bind:tap="toggleRightPopup">
|
|
||||||
从右边弹出popup
|
|
||||||
</van-button>
|
|
||||||
|
|
||||||
<!-- 中间弹出框 -->
|
<demo-block title="弹出位置" padding>
|
||||||
<van-popup
|
<van-button bind:tap="toggleBottomPopup" custom-class="demo-margin-right">底部弹出</van-button>
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- 左侧弹出框 -->
|
<van-popup
|
||||||
<van-popup
|
show="{{ show.bottom }}"
|
||||||
show="{{ showLeftPopup }}"
|
position="bottom"
|
||||||
type="left"
|
custom-class="bottom"
|
||||||
bindclose="toggleLeftPopup"
|
bind:close="toggleBottomPopup"
|
||||||
>
|
>
|
||||||
<view class="pop-example__container pop-example__container--left">
|
内容
|
||||||
<view class="van-buttons">
|
</van-popup>
|
||||||
<button class="van-button" bindtap="toggleLeftPopup">
|
|
||||||
关闭 popup
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</van-popup>
|
|
||||||
|
|
||||||
<!-- 右侧弹出框 -->
|
<van-button bind:tap="toggleTopPopup" custom-class="demo-margin-right">顶部弹出</van-button>
|
||||||
<van-popup
|
<van-popup
|
||||||
show="{{ showRightPopup }}"
|
show="{{ show.top }}"
|
||||||
type="right"
|
position="top"
|
||||||
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-popup
|
|
||||||
show="{{ showTopPopup }}"
|
|
||||||
overlay="{{ false }}"
|
overlay="{{ false }}"
|
||||||
type="top"
|
custom-class="top"
|
||||||
bindclose="toggleTopPopup"
|
bind:close="toggleTopPopup"
|
||||||
>
|
>
|
||||||
<view class="pop-example--top">内容</view>
|
内容
|
||||||
</van-popup>
|
</van-popup>
|
||||||
|
|
||||||
<!-- 底部弹出框 -->
|
<van-button bind:tap="toggleRightPopup">右侧弹出</van-button>
|
||||||
<van-popup
|
<van-popup
|
||||||
show="{{ showBottomPopup }}"
|
show="{{ show.right }}"
|
||||||
type="bottom"
|
position="right"
|
||||||
bindclose="toggleBottomPopup"
|
custom-class="right"
|
||||||
>
|
bind:close="toggleRightPopup"
|
||||||
<view class="pop-example__container pop-example__container--bottom">
|
>
|
||||||
<view class="van-buttons">
|
<van-button bind:tap="toggleRightPopup" custom-class="demo-margin-right">关闭弹层</van-button>
|
||||||
<button class="van-button" catchtap="toggleBottomPopup">
|
|
||||||
关闭 popup
|
<van-button bind:tap="toggleRightPopup2">右侧弹出</van-button>
|
||||||
</button>
|
<van-popup
|
||||||
</view>
|
show="{{ show.right2 }}"
|
||||||
</view>
|
position="right"
|
||||||
</van-popup>
|
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 {
|
:host {
|
||||||
width: 100vw;
|
font-size: 16px;
|
||||||
padding: 15px;
|
}
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
color: #fff;
|
.center {
|
||||||
font-size: 12px;
|
width: 60%;
|
||||||
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pop-example__container {
|
.top {
|
||||||
overflow: hidden;
|
color: #fff;
|
||||||
background: #fff;
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 0;
|
||||||
|
line-height: 20px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8)!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pop-example__container--bottom {
|
.bottom {
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
line-height: 100px;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pop-example__container--left, .pop-example__container--right {
|
.right {
|
||||||
height: 100vh;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,62 +3,65 @@
|
|||||||
### 使用指南
|
### 使用指南
|
||||||
在 index.json 中引入组件
|
在 index.json 中引入组件
|
||||||
```json
|
```json
|
||||||
{
|
"usingComponents": {
|
||||||
"usingComponents": {
|
|
||||||
"van-popup": "path/to/vant-weapp/dist/popup/index"
|
"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>
|
`popup`默认从中间弹出
|
||||||
|
|
||||||
<!-- 从左侧弹出的弹层 -->
|
|
||||||
<van-popup type="left" show="{{ show }}"></van-popup>
|
|
||||||
|
|
||||||
<!-- 从右侧弹出的弹层 -->
|
|
||||||
<van-popup type="right" show="{{ show }}"></van-popup>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 控制显示，隐藏
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-popup show="{{ isShow }}" bindclose="togglePopup"></van-popup>
|
<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```javascript
|
||||||
data: {
|
Page({
|
||||||
isShow: false
|
data: {
|
||||||
},
|
show: false
|
||||||
togglePopup() {
|
},
|
||||||
this.setData({
|
|
||||||
isShow: !this.data.isShow
|
onClose() {
|
||||||
});
|
this.setData({ show: false });
|
||||||
}
|
}
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### 具体参数和事件
|
#### 弹出位置
|
||||||
#### 参数说明
|
通过`position`属性设置 Popup 弹出位置
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
```html
|
||||||
| show | 是否显示弹出层 | Boolean | false | |
|
<van-popup
|
||||||
| overlay | 是否显示遮罩层 | Boolean | true | |
|
show="{{ show }}"
|
||||||
| closeOnClickOverlay | 遮罩层点击时，是否触发关闭事件 | Boolean | true | |
|
position="top"
|
||||||
| type | 弹出层动画方式, 可选`center`, `left`, `right`, `top`, `bottom` | String | center | |
|
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 | 遮罩层点击触发 | |
|
| click-overlay | 点击蒙层时触发 | - |
|
||||||
| close | 遮罩层关闭时触发 | |
|
| close | 蒙层关闭时触发 | - |
|
||||||
|
|
||||||
|
### 外部样式类
|
||||||
|
|
||||||
|
| 类名 | 说明 |
|
||||||
|
|-----------|-----------|
|
||||||
|
| custom-class | 根节点样式类 |
|
||||||
|
| overlay-class | 蒙层样式类 |
|
||||||
|
|||||||
@ -1,35 +1,33 @@
|
|||||||
Component({
|
Component({
|
||||||
properties: {
|
externalClasses: [
|
||||||
show: {
|
'custom-class',
|
||||||
type: Boolean,
|
'overlay-class'
|
||||||
value: false
|
],
|
||||||
},
|
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
show: Boolean,
|
||||||
|
overlayStyle: String,
|
||||||
overlay: {
|
overlay: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: true
|
value: true
|
||||||
},
|
},
|
||||||
|
|
||||||
closeOnClickOverlay: {
|
closeOnClickOverlay: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: true
|
value: true
|
||||||
},
|
},
|
||||||
|
position: {
|
||||||
// 弹出方向
|
|
||||||
type: {
|
|
||||||
type: String,
|
type: String,
|
||||||
value: 'center'
|
value: 'center'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleMaskClick() {
|
onClickOverlay() {
|
||||||
this.triggerEvent('click-overlay', {});
|
this.triggerEvent('click-overlay');
|
||||||
|
|
||||||
if (!this.data.closeOnClickOverlay) {
|
if (this.data.closeOnClickOverlay) {
|
||||||
return;
|
this.triggerEvent('close');
|
||||||
}
|
}
|
||||||
this.triggerEvent('close', {});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,6 +1,3 @@
|
|||||||
{
|
{
|
||||||
"component": true,
|
"component": true
|
||||||
"usingComponents": {
|
|
||||||
"pop-manager": "../common/pop-manager/index"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
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
|
<view
|
||||||
show="{{ show }}"
|
wx:if="{{ overlay }}"
|
||||||
type="{{ type }}"
|
class="overlay-class van-popup__overlay {{ show ? 'van-popup--show' : '' }}"
|
||||||
show-overlay="{{ overlay }}"
|
style="{{ overlayStyle }}"
|
||||||
bindclickmask="handleMaskClick"
|
bind:tap="onClickOverlay"
|
||||||
>
|
/>
|
||||||
<slot></slot>
|
<view class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }} {{ show ? 'van-popup--show' : '' }}">
|
||||||
</pop-manager>
|
<slot />
|
||||||
|
</view>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user