mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
14de879a3b
* [bugfix] Checkbox border render error in weixin browser * [bugfix] TreeSelect dependency path error * [bugfix] Swipe should clear autoplay timer when destroyed
137 lines
3.3 KiB
Markdown
137 lines
3.3 KiB
Markdown
<script>
|
||
import Dialog from 'packages/dialog';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
popupShow1: false,
|
||
popupShow2: false,
|
||
popupShow3: false,
|
||
popupShow4: false,
|
||
popupShow5: false
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
popupShow3(val) {
|
||
if (val) {
|
||
setTimeout(() => {
|
||
this.popupShow3 = false;
|
||
}, 2000);
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
showDialog() {
|
||
Dialog.confirm({
|
||
title: 'confirm标题',
|
||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||
}).then((action) => {
|
||
console.log(action);
|
||
}, (error) => {
|
||
console.log(error);
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
## Popup
|
||
|
||
### Install
|
||
``` javascript
|
||
import { Popup } from 'vant';
|
||
|
||
Vue.component(Popup.name, Popup);
|
||
```
|
||
|
||
### Usage
|
||
|
||
#### Basic Usage
|
||
|
||
`popup`默认情况下是从中间弹出。
|
||
|
||
:::demo Basic Usage
|
||
```html
|
||
<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
|
||
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
|
||
从中间弹出popup
|
||
</van-popup>
|
||
```
|
||
|
||
```javascript
|
||
export default {
|
||
data() {
|
||
return {
|
||
popupShow1: false
|
||
}
|
||
}
|
||
};
|
||
```
|
||
:::
|
||
|
||
#### 从不同位置弹出层
|
||
|
||
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
|
||
|
||
:::demo 从不同位置弹出层
|
||
```html
|
||
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
|
||
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
|
||
<van-button @click="showDialog">弹出dialog</van-button>
|
||
</van-popup>
|
||
|
||
<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
|
||
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
|
||
更新成功
|
||
</van-popup>
|
||
|
||
<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
|
||
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
|
||
<van-button @click.native="popupShow4 = false">关闭 popup</van-button>
|
||
</van-popup>
|
||
|
||
|
||
<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
|
||
<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
|
||
<van-button @click.native="popupShow5 = false">关闭 popup</van-button>
|
||
</van-popup>
|
||
```
|
||
|
||
```javascript
|
||
export default {
|
||
data() {
|
||
return {
|
||
popupShow1: false,
|
||
popupShow2: false,
|
||
popupShow3: false,
|
||
popupShow4: false
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
popupShow2(val) {
|
||
if (val) {
|
||
setTimeout(() => {
|
||
this.popupShow2 = false;
|
||
}, 2000);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
```
|
||
:::
|
||
|
||
### API
|
||
|
||
| Attribute | Description | Type | Default | Accepted Values |
|
||
|-----------|-----------|-----------|-------------|-------------|
|
||
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
|
||
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
|
||
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
|
||
| position | 弹出层位置 | `String` | - | `top`, `bottom`, `right`, `left` |
|
||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
|
||
| transition | 弹出层的`transition` | `String` | `popup-slide` | |
|
||
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
|