ume-ui

中文

English

中文

English

Appearance

Dialog 对话框 ​

用于显示重要信息或需要用户确认的模态对话框组件，带有优雅的入场动画。

基础用法 ​

最简单的对话框用法，默认居中显示并带有缩放动画。

vue
<template>
  <u-button @click="visible = true" color="primary">打开对话框</u-button>
  <u-dialog v-model="visible">
    <u-card>
      <u-card-title>基础对话框</u-card-title>
      <u-card-text>
        <p>这是一个基础对话框。</p>
      </u-card-text>
      <div class="dialog-actions">
        <u-button @click="visible = false" color="primary" variant="text">确定</u-button>
      </div>
    </u-card>
  </u-dialog>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

自定义宽度 ​

通过 width 属性设置对话框宽度。

vue
<template>
  <u-button @click="visible = true" color="success">自定义宽度</u-button>
  <u-dialog v-model="visible" width="400px">
    <u-card>
      <u-card-title>自定义宽度</u-card-title>
      <u-card-text>
        <p>此对话框宽度为 400px。</p>
      </u-card-text>
      <div class="dialog-actions">
        <u-button @click="visible = false" color="primary">确定</u-button>
      </div>
    </u-card>
  </u-dialog>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

禁用点击遮罩关闭 ​

禁止点击遮罩层关闭对话框。

vue
<template>
  <u-button @click="visible = true" color="warning">
    禁用遮罩关闭
  </u-button>
  <u-dialog v-model="visible" :close-on-click="false">
    <u-card>
      <u-card-title>禁用遮罩关闭</u-card-title>
      <u-card-text>
        <p>点击遮罩层不会关闭此对话框。</p>
      </u-card-text>
      <div class="dialog-actions">
        <u-button @click="visible = false" color="primary">确定</u-button>
      </div>
    </u-card>
  </u-dialog>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

全屏对话框 ​

以全屏模式显示对话框，带有滑入动画。

vue
<template>
  <u-button @click="visible = true" color="error">全屏对话框</u-button>
  <u-dialog v-model="visible" fullscreen>
    <u-card>
      <u-card-title>全屏模式</u-card-title>
      <u-card-text>
        <p>这是一个全屏对话框。</p>
      </u-card-text>
      <div class="dialog-actions">
        <u-button @click="visible = false" color="primary">关闭</u-button>
      </div>
    </u-card>
  </u-dialog>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

自定义背景色和圆角 ​

自定义对话框的背景色和圆角。

vue
<template>
  <u-button @click="visible = true" color="primary">自定义样式</u-button>
  <u-dialog v-model="visible" bgColor="var(--u-success-50)" radius="16px">
    <u-card>
      <u-card-title>自定义样式</u-card-title>
      <u-card-text>
        <p>此对话框具有自定义背景色和圆角。</p>
      </u-card-text>
      <div class="dialog-actions">
        <u-button @click="visible = false" color="primary">确定</u-button>
      </div>
    </u-card>
  </u-dialog>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

动画位置 ​

通过 location 属性设置动画原点位置。

vue
<template>
  <u-button @click="visible = true" color="primary">顶部动画</u-button>
  <u-dialog v-model="visible" location="top">
    <u-card>
      <u-card-title>顶部动画</u-card-title>
      <u-card-text>
        <p>此对话框从屏幕顶部滑入。</p>
      </u-card-text>
      <div class="dialog-actions">
        <u-button @click="visible = false" color="primary">确定</u-button>
      </div>
    </u-card>
  </u-dialog>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

确认对话框 ​

带有按钮组的标准确认对话框模式。

vue
<template>
  <u-button @click="visible = true" color="primary">确认对话框</u-button>
  <u-dialog v-model="visible">
    <u-card>
      <u-card-title>确认删除</u-card-title>
      <u-card-text>
        <p>
          确定要删除此记录吗？此操作无法撤销。
        </p>
      </u-card-text>
      <div class="dialog-actions">
        <u-button @click="visible = false">取消</u-button>
        <u-button @click="visible = false" color="error">删除</u-button>
      </div>
    </u-card>
  </u-dialog>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

UDialog API ​

属性说明类型默认值
modelValue是否显示对话框booleanfalse
width对话框宽度string'520px'
fullscreen是否使用全屏模式booleanfalse
closeOnClick点击遮罩层是否关闭booleantrue
closeOnEsc按 ESC 键是否关闭booleantrue
bgColor对话框背景色string'var(--u-bg)'
radius对话框圆角string'4px'
zIndex对话框层级number1000
location动画原点位置'bottom' | 'top' | 'center''bottom'

UDialog 插槽 ​

插槽说明
default对话框内容
trigger触发器元素

UDialog 事件 ​

事件说明
update:modelValue可见性改变时触发
close对话框关闭时触发