XDialog

XDialog

demo 原始链接demo 源码编辑文档组件源码

x-dialog - 图1

二维码

x-dialog - 图2

Install

安装

局部注册

全局注册

  1. import { XDialog } from 'vux'
  2. export default {
  3. components: {
  4. XDialog
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { XDialog } from 'vux'
  4. Vue.component('x-dialog', XDialog)

如果当前组件某一父级使用了 ViewBox 组件或者直接使用了 Safari 的 overflowScrolling:touch,请引入指令 transfer-dom 以解决其带来的 z-index 失效问题。如果你没有使用,那么不需要参照 demo 加上v-transfer-dom

  1. import { TransferDomDirective as TransferDom } from 'vux'
  2. export default {
  3. directives: {
  4. TransferDom
  5. }
  6. }
  1. <div v-transfer-dom>
  2. <x-dialog></x-dialog>
  3. </div>

scroll 属性已经在 v2.5.12 废弃,因为它并没有实现阻止 body 滚动。如果你是 100% 布局,按照下面配置布局可以实现阻止滚动。

  1. import { ConfigPlugin } from 'vux'
  2. Vue.use(ConfigPlugin, {
  3. $layout: 'VIEW_BOX'
  4. })

API

属性

名字类型默认值说明版本要求
showbooleanfalse弹窗是否可见,使用 v-model 绑定,在 v2.5.3 之后版本支持.sync修饰符
mask-transitionstringvux-mask遮罩层动画
dialog-transitionstringvux-dialog弹窗动画
hide-on-blurbooleanfalse是否在点击遮罩时自动关闭弹窗
scrollbooleantrue【废弃】是否在弹窗上滚动时 body 内容也滚动
dialog-styleobject设置内部弹窗样式,覆盖原有的宽度、背景颜色等样式v2.2.2
mask-z-indexnumber string1000遮罩层 z-index 值v2.6.4

事件

名字参数说明版本要求
@on-show弹窗可见时触发
@on-hide弹窗关闭时触发

插槽

名字说明版本要求
默认插槽弹窗的主体内容

Variables

样式变量

名字默认值说明继承自变量
@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 影响,样式里针对大屏的样式生效:

  1. @media screen and (min-width: 1024px) {
  2. .weui-dialog {
  3. width: 35%;
  4. }
  5. }

目前只能手动覆盖该样式,如果你有更好的解决方式欢迎建议或者提 PR

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 46,贡献人数 6
airylandvv13Annall万刚光君Lin Sen

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绑定