mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 10:56:35 +08:00
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [bugfix] Search box-sizing wrong * [Doc] update vant-demo respo * [Doc] translate theme & demo pages * [Doc] add Internationalization document * [bugfix] remove unnecessary props * [fix] optimize clickoutside * [new feature] optimize find-parent * [new feature]: change document title accordinng to language * [new feature] Pagination code review * [improvement] adjust icon-font unicode * [improvement] Icon spinner color inherit * [improvement] icon default width * [bugfix] DateTimePicker validate date props * [bugfix] Tab item text ellipsis * [improvement] optimize single line ellipsis * [Improvement] optimzie staticClass * [Improvement] Button: use sfc instread of jsx * [Improvement] update actionsheet close icon style * fix: yarn.lock * fix: icon test cases * [bugfix] errors during ssr * [Improvement] SubmitBar add left slot * [new feature] ImagePreview support manually close * fix: ImagePreview test case * [Doc] add switch lang button in mobile * [bugfix] Popup overlay style update
1.2 KiB
1.2 KiB
Popup 弹出层
使用指南
import { Popup } from 'vant';
Vue.component(Popup.name, Popup);
代码演示
基础用法
popup
默认从中间弹出
<van-popup v-model="show">内容</van-popup>
export default {
data() {
return {
show: false
}
}
};
弹出位置
通过position
属性设置 Popup 弹出位置
<van-popup v-model="show" position="top" :overlay="false">
内容
</van-popup>
API
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
v-model | 当前组件是否显示 | Boolean |
false |
- |
overlay | 是否显示背景蒙层 | Boolean |
true |
- |
lockOnScroll | 背景是否跟随滚动 | Boolean |
false |
- |
position | Popup 位置 | String |
- | top bottom right left |
overlayClass | 自定义蒙层 class | String |
`` | - |
overlayStyle | 自定义蒙层样式 | Object |
`` | - |
closeOnClickOverlay | 点击蒙层是否关闭 Popup | Boolean |
true |
- |
transition | transition 名称 | String |
popup-slide |
- |
preventScroll | 是否防止滚动穿透 | Boolean |
false |
- |