mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
docs(Popup): update demo (#1926)
This commit is contained in:
neverland
GitHub
parent
09f2a3d94e
commit
33764cd328
@ -3,44 +3,58 @@ import Page from '../../common/page';
|
||||
Page({
|
||||
data: {
|
||||
show: {
|
||||
middle: false,
|
||||
basic: false,
|
||||
top: false,
|
||||
bottom: false,
|
||||
right: false,
|
||||
right2: false
|
||||
left: false,
|
||||
right: false
|
||||
}
|
||||
},
|
||||
|
||||
onTransitionEnd() {
|
||||
console.log(`You can't see me 🌚`);
|
||||
},
|
||||
toggle(type) {
|
||||
toggle(type, show) {
|
||||
this.setData({
|
||||
[`show.${type}`]: !this.data.show[type]
|
||||
[`show.${type}`]: show
|
||||
});
|
||||
},
|
||||
|
||||
togglePopup() {
|
||||
this.toggle('middle');
|
||||
showBasic() {
|
||||
this.toggle('basic', true);
|
||||
},
|
||||
|
||||
toggleRightPopup() {
|
||||
this.toggle('right');
|
||||
hideBasic() {
|
||||
this.toggle('basic', false);
|
||||
},
|
||||
|
||||
toggleRightPopup2() {
|
||||
this.toggle('right2');
|
||||
showTop() {
|
||||
this.toggle('top', true);
|
||||
},
|
||||
|
||||
toggleBottomPopup() {
|
||||
this.toggle('bottom');
|
||||
hideTop() {
|
||||
this.toggle('top', false);
|
||||
},
|
||||
|
||||
toggleTopPopup() {
|
||||
this.toggle('top');
|
||||
setTimeout(() => {
|
||||
this.toggle('top');
|
||||
}, 2000);
|
||||
showLeft() {
|
||||
this.toggle('left', true);
|
||||
},
|
||||
|
||||
hideLeft() {
|
||||
this.toggle('left', false);
|
||||
},
|
||||
|
||||
showRight() {
|
||||
this.toggle('right', true);
|
||||
},
|
||||
|
||||
hideRight() {
|
||||
this.toggle('right', false);
|
||||
},
|
||||
|
||||
showBottom() {
|
||||
this.toggle('bottom', true);
|
||||
},
|
||||
|
||||
hideBottom() {
|
||||
this.toggle('bottom', false);
|
||||
},
|
||||
|
||||
onClickLeft() {
|
||||
|
||||
@ -6,65 +6,47 @@
|
||||
/>
|
||||
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-button bind:click="togglePopup">弹出 Popup</van-button>
|
||||
<van-button type="primary" bind:click="showBasic">展示弹出层</van-button>
|
||||
<van-popup
|
||||
show="{{ show.middle }}"
|
||||
custom-class="center"
|
||||
transition="none"
|
||||
bind:close="togglePopup"
|
||||
bind:transitionEnd="onTransitionEnd"
|
||||
show="{{ show.basic }}"
|
||||
custom-style="padding: 30px 50px"
|
||||
bind:close="hideBasic"
|
||||
>
|
||||
内容
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="弹出位置" padding>
|
||||
<van-button bind:click="toggleBottomPopup" class="demo-margin-right">底部弹出</van-button>
|
||||
<view style="margin-bottom: 15px">
|
||||
<van-button type="primary" bind:click="showTop" class="demo-margin-right">顶部弹出</van-button>
|
||||
<van-button type="primary" bind:click="showBottom">底部弹出</van-button>
|
||||
</view>
|
||||
|
||||
<van-popup
|
||||
show="{{ show.bottom }}"
|
||||
position="bottom"
|
||||
custom-class="bottom"
|
||||
bind:close="toggleBottomPopup"
|
||||
bind:transitionEnd="onTransitionEnd"
|
||||
>
|
||||
内容
|
||||
</van-popup>
|
||||
<van-button type="primary" bind:click="showLeft" class="demo-margin-right">左侧弹出</van-button>
|
||||
<van-button type="primary" bind:click="showRight">右侧弹出</van-button>
|
||||
|
||||
<van-button bind:click="toggleTopPopup" class="demo-margin-right">顶部弹出</van-button>
|
||||
<van-popup
|
||||
show="{{ show.top }}"
|
||||
position="top"
|
||||
safe-area-inset-top
|
||||
overlay="{{ false }}"
|
||||
custom-class="top"
|
||||
bind:close="toggleTopPopup"
|
||||
bind:transitionEnd="onTransitionEnd"
|
||||
>
|
||||
内容
|
||||
</van-popup>
|
||||
|
||||
<van-button bind:click="toggleRightPopup">右侧弹出</van-button>
|
||||
custom-style="height: 20%"
|
||||
bind:close="hideTop"
|
||||
/>
|
||||
<van-popup
|
||||
show="{{ show.bottom }}"
|
||||
position="bottom"
|
||||
custom-style="height: 20%"
|
||||
bind:close="hideBottom"
|
||||
/>
|
||||
<van-popup
|
||||
show="{{ show.left }}"
|
||||
position="left"
|
||||
custom-style="width: 20%; height: 100%"
|
||||
bind:close="hideLeft"
|
||||
/>
|
||||
<van-popup
|
||||
show="{{ show.right }}"
|
||||
position="right"
|
||||
safe-area-inset-top
|
||||
custom-class="right"
|
||||
bind:close="toggleRightPopup"
|
||||
bind:transitionEnd="onTransitionEnd"
|
||||
>
|
||||
<van-button bind:click="toggleRightPopup" class="demo-margin-right">关闭弹层</van-button>
|
||||
|
||||
<van-button bind:click="toggleRightPopup2">右侧弹出</van-button>
|
||||
<van-popup
|
||||
show="{{ show.right2 }}"
|
||||
position="right"
|
||||
safe-area-inset-top
|
||||
custom-class="right"
|
||||
bind:close="toggleRightPopup2"
|
||||
bind:transitionEnd="onTransitionEnd"
|
||||
>
|
||||
<van-button bind:click="toggleRightPopup2">关闭弹层</van-button>
|
||||
</van-popup>
|
||||
</van-popup>
|
||||
custom-style="width: 20%; height: 100%"
|
||||
bind:close="hideRight"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -1,32 +1,3 @@
|
||||
:host {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 60%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
border-radius: 0;
|
||||
line-height: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.8)!important;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
line-height: 100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -12,9 +12,14 @@
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
`popup`默认从中间弹出
|
||||
|
||||
通过`show`属性控制弹出层是否展示
|
||||
|
||||
```html
|
||||
<van-button type="primary" bind:click="showPopup">
|
||||
展示弹出层
|
||||
</van-button>
|
||||
|
||||
<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>
|
||||
```
|
||||
|
||||
@ -24,6 +29,10 @@ Page({
|
||||
show: false
|
||||
},
|
||||
|
||||
showPopup() {
|
||||
this.setData({ show: true });
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({ show: false });
|
||||
}
|
||||
@ -31,17 +40,16 @@ Page({
|
||||
```
|
||||
|
||||
### 弹出位置
|
||||
通过`position`属性设置 Popup 弹出位置
|
||||
|
||||
通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`
|
||||
|
||||
```html
|
||||
<van-popup
|
||||
show="{{ show }}"
|
||||
position="top"
|
||||
overlay="{{ false }}"
|
||||
style="height: '20%'"
|
||||
bind:close="onClose"
|
||||
>
|
||||
内容
|
||||
</van-popup>
|
||||
/>
|
||||
```
|
||||
|
||||
### Props
|
||||
@ -50,12 +58,12 @@ Page({
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| show | 是否显示弹出层 | *boolean* | `false` |
|
||||
| z-index | z-index 层级 | *number* | `100` |
|
||||
| overlay | 是否显示背景蒙层 | *boolean* | `true` |
|
||||
| position | 可选值为 `top` `bottom` `right` `left` | *string* | - |
|
||||
| overlay | 是否显示遮罩层 | *boolean* | `true` |
|
||||
| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | *string* | `center` |
|
||||
| duration | 动画时长，单位为毫秒 | *number \| object* | `300` |
|
||||
| custom-style | 自定义弹出层样式 | *string* | `` |
|
||||
| overlay-style | 自定义背景蒙层样式 | *string* | `` |
|
||||
| close-on-click-overlay | 点击蒙层是否关闭 Popup | *boolean* | `true` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | *boolean* | `true` |
|
||||
| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度 + 导航栏高度） | *boolean* | `false` |
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user