当前位置: 首页 > 文档资料 > VUX 中文文档 >

XDialog 组件使用教程

优质
小牛编辑
140浏览
2023-12-01

安装

import { XDialog } from 'vux'

export default {
  components: {
    XDialog
  }
}
// 在入口文件全局引入

import Vue from 'vue'
import { XDialog } from 'vux'

Vue.component('x-dialog', XDialog)

如果当前组件某一父级使用了 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'
})

属性

名字类型默认值说明版本要求
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
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