Dialog 对话框

模态对话框。

基本用法

可通过 visible 属性控制对话框显示隐藏。

<template>
  <i-button @click="handleShow">打开对话框</i-button>
  <i-dialog :visible="visible" @close="handleHide">
    <span>对话框内容</span>
    <template #header>
      对话框标题
    </template>
  </i-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>

显示代码复制代码复制代码

禁用退出键关闭功能

可通过 closeOnEsc 属性控制打开对话框时按下 ESC 退出键是否触发关闭事件，默认为 true，表示 ESC 退出键触发 @close 关闭事件。

<template>
  <i-button @click="handleShow">禁用对话框退出键功能</i-button>
  <i-dialog :visible="visible" :closeOnEsc="false" @close="handleHide">
    <span>对话框内容</span>
    <template #header>
      对话框标题
    </template>
  </i-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>

显示代码复制代码复制代码

隐藏遮罩层

可通过 showMask 属性控制打开对话框时是否显示遮罩层，默认为 true。

<template>
  <i-button @click="handleShow">隐藏遮罩层</i-button>
  <i-dialog :visible="visible" :showMask="false" @close="handleHide">
    <span>对话框内容</span>
    <template #header>
      对话框标题
    </template>
  </i-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>

显示代码复制代码复制代码

自定义对话框宽度

可通过 width 属性控制对话框宽度。

<template>
  <i-button @click="handleShow">自定义宽度</i-button>
  <i-dialog :visible="visible" :width="800" @close="handleHide">
    <span>对话框内容</span>
    <template #header>
      对话框标题
    </template>
  </i-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>

显示代码复制代码复制代码

自定义对话框头部

可通过 header 插槽设置对话框头部内容。

<template>
  <i-button @click="handleShow">自定义头部</i-button>
  <i-dialog :visible="visible" @close="handleHide">
    <span>对话框内容</span>
    <template #header>
      <i-icon name="TipWarningFill" />
      <span>这是一个自定义标题</span>
    </template>
  </i-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>

显示代码复制代码复制代码

自定义对话框底部

可通过 footer 插槽设置对话框底部内容。

<template>
  <i-button @click="handleShow">自定义底部</i-button>
  <i-dialog :visible="visible" @close="handleHide">
    <span>对话框内容</span>
    <template #header>
      对话框标题
    </template>
    <template #footer>
      <i-button variant="outline" @click="handleHide">
        我再想想
      </i-button>
      <i-button>去意已决</i-button>
    </template>
  </i-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>

显示代码复制代码复制代码

Dialog Attributes

属性	说明	类型	默认值
visible	控制对话框显示隐藏	boolean	false
closeOnEsc	按下退出键是否触发关闭事件	boolean	true
showMask	是否显示遮罩层	boolean	true
width	对话框宽度	string〡number	--

Dialog Slots

插槽名	说明
header	自定义头部
footer	自定义底部

Dialog Events

属性	说明	类型	默认值
close	对话框关闭时触发事件	() => void	--