Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

Dialog 默认从中间弹出居中显示。

<template>
  <ImDialog v-model="open">
    <ImDialogHeader>标题</ImDialogHeader>
    <ImDialogBody>让我们一起摇摆！</ImDialogBody>
    <ImDialogFooter>
      <ImButton @click="open = false">关闭</ImButton>
      <ImButton @click="open = false" color="primary">确认</ImButton>
    </ImDialogFooter>
  </ImDialog>
  <ImButton @click="open = true">打开一下</ImButton>
</template>

全屏对话框

使用 fullscreen 属性可以让对话框的内容区全屏显示。

<template>
  <ImDialog v-model="fullShow" fullscreen>
    <ImDialogHeader divider
      >标题
      <template #action>
        <ImButton @click="fullShow = false" shape="circle" variant="text">
          <ImIcon name="close" size="20"></ImIcon>
        </ImButton>
      </template>
    </ImDialogHeader>
    <ImDialogBody>
      <div v-for="i in 8">
        <ImCheckbox size="48">
          支持选择 Google 帮助应用确定位置。这意味着将匿名位置数据发送给 Google
        </ImCheckbox>
      </div>
    </ImDialogBody>
  </ImDialog>
  <ImButton @click="fullShow = true" color="primary" variant="outlined"
    >打开全屏</ImButton
  >
</template>

触发器打开

设置 getTarget 属性，可以将 Dialog 的打开与关闭绑定到某个元素上。

<template>
  <ImDialog v-model="trigger">
    <ImDialogHeader>标题</ImDialogHeader>
    <ImDialogBody>一段话</ImDialogBody>
    <ImDialogFooter>
      <ImButton @click="trigger = false">关闭</ImButton>
    </ImDialogFooter>
  </ImDialog>
  <ImButton @click="trigger = true" id="Demo_Button">试试吧</ImButton>
</template>

嵌套使用

<template>
  <ImDialog v-model="parent">
    <ImDialogHeader>父标题</ImDialogHeader>
    <ImDialogBody
      >这里是内容区域
      <ImButton @click="child = true">打开子级对话框</ImButton>
    </ImDialogBody>

    <ImDialog v-model="child" parent>
      <ImDialogHeader>子标题</ImDialogHeader>
      <ImDialogBody>这里是内容区域</ImDialogBody>
    </ImDialog>
  </ImDialog>
  <ImButton @click="parent = true">打开父级对话框</ImButton>
</template>

支持拖拽

设置 draggable 属性，可以让对话框支持拖拽。支持 PC 端 移动端。

<template>
  <ImDialog v-model="drag" draggable>
    <ImDialogHeader>标题</ImDialogHeader>
    <ImDialogBody>你可以拖拽头部</ImDialogBody>
    <ImDialogFooter>
      <ImButton @click="drag = false" color="primary">Confirm</ImButton>
    </ImDialogFooter>
  </ImDialog>
  <ImButton @click="drag = true" color="primary" variant="outlined"
    >打开对话</ImButton
  >
</template>

自定义头部关闭按钮

<template>
  <ImDialog v-model="headerClose">
    <ImDialogHeader
      >标题
      <template #action>
        <ImButton @click="headerClose = false" shape="circle" variant="text">
          <ImIcon name="close" size="20"></ImIcon>
        </ImButton>
      </template>
    </ImDialogHeader>
    <ImDialogBody>Let Google help apps determine location. </ImDialogBody>
    <ImDialogFooter>
      <ImButton @click="headerClose = false">关闭</ImButton>
    </ImDialogFooter>
  </ImDialog>
  <ImButton @click="headerClose = true" color="primary" variant="outlined"
    >打开对话</ImButton
  >
</template>

分割线

设置分割线属性，可以让头部显示分割线。

<template>
  <ImDialog v-model="dividerShow">
    <ImDialogHeader divider>标题 </ImDialogHeader>
    <ImDialogBody>你就说好不好</ImDialogBody>
    <ImDialogFooter divider>
      <ImButton @click="dividerShow = false">关闭</ImButton>
    </ImDialogFooter>
  </ImDialog>
  <ImButton @click="dividerShow = true" color="primary" variant="outlined"
    >打开对话</ImButton
  >
</template>

顶部距离

设置 top 属性，可以设置对话框顶部距离。

<template>
  <ImDialog v-model="top" top="100px">
    <ImDialogHeader>标题</ImDialogHeader>
    <ImDialogBody>可以设置对话框顶部距离</ImDialogBody>
    <ImDialogFooter>
      <ImButton @click="top = false">关闭</ImButton>
    </ImDialogFooter>
  </ImDialog>
  <ImButton @click="top = true" color="primary" variant="outlined"
    >打开对话</ImButton
  >
</template>

API

Dialog 组件提供了以下属性：

属性	类型	描述	默认值	其他值
modelValue	Boolean	是否显示对话框	false	-
closeOnClickMask	Boolean	是否可以通过点击遮罩关闭对话框	true	-
width	String	对话框的宽度	-	-
height	String	对话框的高度	-	-
fullscreen	Boolean	是否全屏显示对话框	false	-
closeOnEscape	Boolean	是否可以通过按下 Esc 键关闭对话框	true	-
mask	Boolean	是否显示背景遮罩	true	-
zIndex	Number	对话框的 z-index 值	-	-
top	String | Number	对话框距离顶部的距离	-	-
getTarget	Function	返回对话框挂载的目标元素	-	-
draggable	Boolean	是否可以拖动对话框	false	-