Modal 对话框 | WinDesign

# 💡 常见问题

1.为什么在多重嵌套 `Modal` 时，会出现某些 `Modal` 无法显示？

答：如果需要在页面上同时显示多个 Modal，可以将它们平级放置。对于确实需要嵌套 Modal 的场景，我们提供了append-to-bod 属性。将内层 Modal 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Modal 和遮罩层级关系的正确。

# 代码演示

基础用法

before-close-modal，before-close-button，before-close分别在点击遮罩层，关闭图标和全部时起效

查看代码

<template>
  <w-button type="text" @click="visible = !visible">点击打开Modal</w-button>
  <w-modal
    :visible.sync="visible"
    :title="title"
    :before-close-modal="handleCloseModal"
    subtitle="副标题"
    width="30%"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <w-button @click="visible = false">取 消</w-button>
      <w-button
        style="margin-left: 16px"
        type="primary"
        @click="visible = false"
      >
        确 定
      </w-button>
    </span>
  </w-modal>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      }
    },
    methods: {
      handleCloseModal(done) {
        this.$Confirm('确认关闭Modal？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
</script>

关闭时销毁

当出现性能问题时，可以启用此功能。需要注意的是，当这个属性被启用时，在 transition.beforeEnter 事件卸载前，除了 header (可选) 与 footer (可选)，Modal 内不会有任何其它的 DOM 节点存在。

查看代码

<template>
  <w-button type="text" @click="visible = !visible">点击打开Modal</w-button>
  <w-modal
    :visible.sync="visible"
    :title="title"
    destroyOnClose
    width="30%"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <w-button @click="visible = false">取 消</w-button>
      <w-button
        style="margin-left: 16px"
        type="primary"
        @click="visible = false"
      >
        确 定
      </w-button>
    </span>
  </w-modal>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      }
    },
  }
</script>

可拖拽对话框

试着拖动一下 header 部分吧！设置 draggable 属性为 true 以做到拖拽

查看代码

<template>
  <w-button type="text" @click="visible = !visible">点击打开Modal</w-button>
  <w-modal
    :visible.sync="visible"
    :title="title"
    draggable
    width="30%"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <w-button @click="visible = false">取 消</w-button>
      <w-button
        style="margin-left: 16px"
        type="primary"
        @click="visible = false"
      >
        确 定
      </w-button>
    </span>
  </w-modal>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      }
    },
  }
</script>

确认类对话框

正常情况下，我们不建议使用嵌套的 Modal，如果需要在页面上同时显示多个 Modal，可以将它们平级放置。对于确实需要嵌套 Modal 的场景，我们提供了append-to-body属性。将内层 Modal 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Modal 和遮罩层级关系的正确。

查看代码

<template>
  <section class="pagination-demo">
      description="正常情况下，我们不建议使用嵌套的 Modal，如果需要在页面上同时显示多个 Modal，可以将它们平级放置。对于确实需要嵌套 Modal 的场景，我们提供了append-to-body属性。将内层 Modal 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Modal 和遮罩层级关系的正确。">
      <w-button type='text'
                @click="outerVisible = true">点击打开外层 Modal</w-button>
      <w-modal  :visible.sync="outerVisible"
                width="60%"
                color
                title="外层 Modal"
                >
        <w-modal
          width="30%"
          title="内层 Modal"
          :visible.sync="innerVisible"
          append-to-body>
        </w-modal>
        <span slot="footer" class="dialog-footer">
            <w-button @click="outerVisible = false">取 消</w-button>
            <w-button style="margin-left: 16px;" type="primary" @click="innerVisible = true">点击打开内层 Modal</w-button>
          </span>
      </w-modal>
  </section>
</template>

彩色样式

需要使用 color 属性可以为Modal添加色彩。

查看代码

<template>
  <w-button @click="visible = !visible">彩色样式的Modal</w-button>
  <w-modal  :visible.sync="visible"
    color
    :title="title"
    width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
    <w-button @click="visible = false">取 消</w-button>
    <w-button type="primary" @click="visible = false">确 定</w-button>
    </span>
  </w-modal>
</template>

异步关闭

点击确定，查看异步关闭效果。

查看代码

<template>
  <w-button @click="visible = !visible">点击打开 Modal</w-button>
  <w-modal  :visible.sync="visible"
    :title="title"
    width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <w-button :icon="loadingIcon" @click="showModal()">取 消</w-button>
      <w-button type="primary" :icon="loadingIcon" @click="showModal()">确 定</w-button>
    </span>
  </w-modal>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      isIcon: '',
      title:'异步关闭',
      showClose: false
    }
  },
  computed:{
    loadingIcon:function(){
      return this.isIcon ? 'w-icon-loading' : ''
    }
  },
  methods: {
    showModal (val) {
      this.isIcon = true
      let _this= this
      setTimeout(function()  {
        _this.visible = false
        _this.isIcon = false
      }, 1500)
    }
  }
}
</script>

自定义内容

Modal 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 tree 组件的样例。

查看代码

<template>
  <w-button @click="visible = !visible">打开嵌套树的Modal</w-button>
  <w-modal :visible.sync="visible"
    :title="title"
    width="30%">
    <w-tree :data="data" :props="defaultProps"></w-tree>
    <span slot="footer" class="dialog-footer">
      <w-button @click="visible = false">取 消</w-button>
      <w-button type="primary" @click="visible = false">确 定</w-button>
    </span>
  </w-modal>
</template>
<script>
  export default {
    data () {
      return {
         data: [
          {
            label: '一级 1',
            children: [{
              label: '二级 1-1',
              children: [{
                label: '三级 1-1-1'
              }]
            }]
          }, {
            label: '一级 2',
            children: [{
              label: '二级 2-1',
              children: [{
                label: '三级 2-1-1'
              }]
            }, {
              label: '二级 2-2',
              children: [{
                label: '三级 2-2-1'
              }]
            }]
          }, {
            label: '一级 3',
            children: [{
              label: '二级 3-1',
              children: [{
                label: '三级 3-1-1'
              }]
            }, {
              label: '二级 3-2',
              children: [{
                label: '三级 3-2-1'
              }]
            }]
          }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
    }
</script>

居中布局

标题和底部可水平居中。

查看代码

<template>
  <w-button @click="visible = !visible">点击打开Modal</w-button>
  <w-modal  :visible.sync="visible"
    center
    :title="title"
    width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <w-button @click="visible = false">取 消</w-button>
      <w-button type="primary" @click="visible = false">确 定</w-button>
    </span>
  </w-modal>
</template>

# API

# Attributes

参数	说明	类型	可选值	默认值	Version
destroy-on-close	当关闭 Modal 时，销毁其中的元素	Boolean	—	false	v2.0.9
draggable	为 Modal 启用可拖拽功能	Boolean	—	false	v2.0.9
append-to-body	Modal 自身是否插入至 body 元素上。嵌套的 Modal 必须指定该属性并赋值为 true	Boolean	—	false
before-close	关闭前的回调，会暂停 Modal 的关闭	Function(done)，done 用于关闭 Modal	—	—
before-close-modal	点击遮罩层关闭前的回调，会暂停 Modal 的关闭，使用 before-close，此方法失效	Function(done)，done 用于关闭 Modal	—	—
before-close-button	点击关闭 icon 关闭前的回调，会暂停 Modal 的关闭，使用 before-close，此方法失效	Function(done)，done 用于关闭 Modal	—	—
center	是否对头部和底部采用居中布局	Boolean	—	false
custom-class	Modal 的自定义类名	String	—	—
close-on-click-modal	是否可以通过点击遮罩关闭 Modal	Boolean	—	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Modal	Boolean	—	true
fullscreen	是否为全屏 Modal	Boolean	—	false
lock-scroll	是否在 Modal 出现时将 body 滚动锁定	Boolean	—	true
modal	是否显示遮罩, 默认显示	Boolean	—	true
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Modal 的父元素上	Boolean	—	true
title	Modal 的标题，也可通过具名 slot （见下表）传入	String	—	—
top	Modal CSS 中的 margin-top 值	String	—	20vh
show-close	是否显示关闭按钮	Boolean	—	true
subtitle	副标题	String	—	—	v2.0.0
visible	是否显示 Modal，支持 .sync 修饰符	Boolean	—	true
width	Modal 的宽度	String	—	50%

# Slot

名称	说明	Version
—	Modal 的内容
footer	Modal 按钮操作区的内容
title	Modal 标题区的内容

# Events

事件名称	说明	回调参数
close	Modal 关闭的回调	—
closed	Modal 关闭动画结束时的回调	—
open	Modal 打开的回调	—
opened	Modal 打开动画结束时的回调	—

上次更新: 4/13/2023, 4:36:58 PM

← MessageBox 弹框 Notification 通知 →

# Modal 对话框

# 💡 常见问题

# 代码演示

基础用法

查看代码

关闭时销毁

查看代码

可拖拽对话框

查看代码

确认类对话框

查看代码

彩色样式

查看代码

异步关闭

查看代码

自定义内容

查看代码

居中布局

查看代码

# API

# Attributes

# Slot

# Events