如果当前组件某一父级使用了 ViewBox
组件或者直接使用了 Safari 的 overflowScrolling:touch
,请引入指令 transfer-dom
以解决其带来的 z-index
失效问题。
如果你没有使用,那么不需要参照 demo 加上v-transfer-dom
import { TransferDomDirective as TransferDom } from 'vux'
export default {
directives: {
TransferDom
}
}
<div v-transfer-dom>
<x-dialog></x-dialog>
</div>
scroll
属性已经在 v2.5.12 废弃,因为它并没有实现阻止 body 滚动。
如果你是 100%
布局,按照下面配置布局可以实现阻止滚动。
import { ConfigPlugin } from 'vux'
Vue.use(ConfigPlugin, {
$layout: 'VIEW_BOX'
})
API
Variables
重要提示及已知问题
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
show | boolean | false | 弹窗是否可见,使用 v-model 绑定,在 v2.5.3 之后版本支持.sync修饰符 | -- |
mask-transition | string | vux-mask | 遮罩层动画 | -- |
dialog-transition | string | vux-dialog | 弹窗动画 | -- |
hide-on-blur | boolean | false | 是否在点击遮罩时自动关闭弹窗 | -- |
scroll | boolean | true | 【废弃】是否在弹窗上滚动时 body 内容也滚动 | -- |
dialog-style | object | 设置内部弹窗样式,覆盖原有的宽度、背景颜色等样式 | v2.2.2 | |
mask-z-index | number string | 1000 | 遮罩层 z-index 值 | v2.6.4 |
事件
名字 | 参数 | 说明 | 版本要求 |
@on-show | -- | 弹窗可见时触发 | -- |
@on-hide | -- | 弹窗关闭时触发 | -- |
插槽
名字 | 说明 | 版本要求 |
默认插槽 | 弹窗的主体内容 | -- |
样式变量
名字 | 默认值 | 说明 | 继承自变量 |
@dialog-button-text-primary-color | #0BB20C | -- | |
@dialog-button-text-default-color | #353535 | -- | |
@dialog-button-text-warn-color | #E64340 | -- | |
@dialog-width | 80% | -- | |
@dialog-max-width | 300px | -- | |
@dialog-gap-width | 1.6em | 标题及内容区域的 padding-left 和 padding-right | |
@dialog-mask-background | rgba(0, 0, 0, .6) | -- |
重要提示及已知问题
- Qrem 适配时 dialog 宽度过小
#2578 原因是由于 viewport 影响,样式里针对大屏的样式生效:
@media screen and (min-width: 1024px) { .weui-dialog { width: 35%; } }
目前只能手动覆盖该样式,如果你有更好的解决方式欢迎建议或者提
PR
。
Changelog
发布日志
- v2.9.0 [feature] 支持样式变量 dialog-gap-width #2640
- v2.9.0 [enhance] 支持样式变量 dialog-width and dialog-max-width #2577
- v2.7.4 [fix] 修复定位为 absolute 导致的定位问题 #2220
- v2.7.1 [fix] 修复 prevent-body-scroll.css 无法找到问题(less-loader) #2118
- v2.7.0 [feature] 添加事件 on-click-mask #2102
- v2.6.4 [feature] 支持属性 mask-z-index 设置遮罩 z-index
- v2.6.0 [fix] 修复弹窗滑动时 body 区域依然会滚动的问题
- v2.5.12 [change] 属性 scroll 已经废弃,仅对配置为 100% 布局的情况实现阻止滚动 #1858 #1877
- v2.5.3 [feature] 新增 prop:show 并且支持.sync修饰符
- v2.2.2 [feature] 支持 prop:dialog-style 覆写原有弹窗容器样式 #1282
- v2.1.1-rc.14 [fix] 修复初始化时 value 值为 true 无效的问题 #1138
- v2.1.1-rc.11 [enhance] 更流畅的遮罩动画和弹窗动画
- v2.1.1-rc.11 [enhance] 添加 dom 转移到 body 下的 demo
- v2.1.1-rc.11 [enhance] 移除无用代码
- v2.1.1-rc.2 [fix] 修复按钮文字颜色变量
- v2.1.0 [fix] 修复`transition`绑定