API
Variables
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | boolean | 是否关闭，使用v-model绑定 | -- | |
| height | string | auto | 高度，设置100%为整屏高度。当 position 为 top 或者 bottom 时有效。 | -- |
| hide-on-blur | boolean | true | 点击遮罩时是否自动关闭 | -- |
| is-transparent | boolean | false | 是否为透明背景 | v2.1.1-rc.9 |
| width | string | auto | 设置 100% 宽度必须使用该属性。在 position 为 left 或者 right 时有效。 | v2.2.1-rc.6 |
| position | string | bottom | 位置，可取值 ['left', 'right', 'top', 'bottom'] | v2.2.1-rc.6 |
| show-mask | boolean | true | 是否显示遮罩 | v2.2.1-rc.6 |
| popup-style | object | 弹窗样式，可以用于强制指定 z-index | v2.5.2 | |
| hide-on-deactivated | boolean | true | 是否在 deactived 事件触发时自动关闭，避免在路由切换时依然显示弹窗 | v2.5.5 |
| should-rerender-on-show | boolean | false | 是否在显示时重新渲染内容区域(以及滚动到顶部)，适用于每次显示弹窗需要重新获取数据初始化的场景 | v2.9.0 |
| should-scroll-top-on-show | boolean | false | 是否在显示时自动滚动到顶部，当你自定义滚动容器时需要手动为该容器加上类名 vux-scrollable | v2.9.0 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-hide | -- | 关闭时触发 | -- |
| @on-show | -- | 显示时触发 | -- |
| @on-first-show | -- | 第一次显示时触发，可以在该事件回调里初始化数据或者界面 | -- |
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | 弹窗主体内容 | -- |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @popup-picker-header-text-color | #04BE02 | -- | @theme-color |
| @popup-picker-header-bg-color | #fbf9fe | -- | |
| @popup-picker-header-font-size | 16px | -- | |
| @popup-picker-header-cancel-text-color | #828282 | -- | |
| @popup-background-color | #eee | -- | |
| @popup-header-height | 44px | -- | |
| @popup-header-bg-color | #fbf9fe | -- | |
| @popup-header-font-size | 16px | -- | |
| @popup-header-left-text-color | #828282 | -- | |
| @popup-header-right-text-color | #04BE02 | -- | @theme-color |
| @popup-header-title-text-color | #222 | -- | |
| @popup-header-left-text-padding | 15px | -- | |
| @popup-header-right-text-padding | 15px | -- |
Changelog
发布日志
- v2.9.1 [fix] 修正弹出框右边有黑边 #2651
- v2.9.0 [feature] 支持 should-rerender-on-show 实现每次打开重新渲染 #2598
- v2.9.0 [feature] 支持自动滚动到顶部 #2598
- v2.5.12 [fix] 在 beforeDestroy 和 deactivated 事件中清除设置于 body 上的 vux-modal-open 类名 #1921
- v2.5.11 [fix] 仅在全局配置 $layout = VIEW_BOX 时用 fixed body 的形式阻止页面滚动 #1893
- v2.5.10 [fix] 修复 class 工具函数拼写错误 #1893
- v2.5.9 [feature] 修复当body没有设置100%宽度时出现的布局错乱问题 #1867
- v2.5.5 [feature] 在 deactived 事件触发时自动关闭，避免在路由切换时依然显示弹窗，可以使用 prop:hide-on-deactivated 进行禁用 #1774
- v2.5.2 [feature] 支持弹窗样式设置 prop:popup-style #1656
- v2.3.7 [fix] 修复默认值为 true 时遮罩没有显示的问题 #1555
- v2.3.3 [enhance] 默认 max-height 设为 100%，避免不设置高度时内容过长无法滚动
- v2.3.3 [feature] 支持 prop:max-height
- v2.3.3 [fix] 禁止遮罩层在手机上滚动 #1475 @xiaobinhong1
- v2.2.2 [fix] 修复在某些情况下遮罩被错误关闭的问题 #1312
- v2.2.1-rc.6 [fix] 修复 popup 类名丢失问题
- v2.2.1-rc.6 [feature] 支持 prop:show-mask 隐藏遮罩
- v2.2.1-rc.6 [feature] 支持 prop:position 设定位置
- v2.2.1-rc.6 [feature] 支持 prop:width 设定左右位置时的宽度
- v2.1.1-rc.11 [fix] 修复遮罩禁用点击时错误设置 overflowScrolling 的问题
- v2.1.1-rc.9 [enhance] 更流畅的遮罩层动画
- v2.1.1-rc.9 [feature] 支持透明背景
- v2.1.1-rc.9 [feature] 支持背影颜色变量 @popup-background-color
- v2.1.1-rc.6 [fix] 修复 Safari 上关闭第二个popup导致的问题 #1015 @think2011
- v2.1.1-rc.1 [fix] 修复 `overflow-scrolling` 设置逻辑遗漏问题 #311 @linhaobin