WeUI Uniapp Design

Appearance

Dialog 对话框 ​

弹窗对话框，用于提示用户确认或展示信息。支持声明式和命令式两种调用方式。

基础用法 ​

通过 v-model:visible 控制显示，title 设置标题，content 设置内容，buttons 配置按钮，@buttontap 监听按钮点击。

查看代码
vue
<template>
  <weui-button type="primary" @click="show = true">显示 Dialog</weui-button>
  <weui-dialog
    v-model:visible="show"
    title="提示"
    content="这是一个对话框"
    :buttons="buttons"
    @buttontap="onButtonTap"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { DialogButton } from 'weui-uniapp-design'

const show = ref(false)
const buttons: DialogButton[] = [
  { label: '取消' },
  { label: '确定' },
]

const onButtonTap = (btn: DialogButton, index: number) => {
  console.log(btn, index)
}
</script>

单按钮 ​

buttons 仅配置一项时，按钮自动设为 primary 样式。

查看代码
vue
<template>
  <weui-dialog
    v-model:visible="show"
    title="提示"
    content="操作成功"
    :buttons="[{ label: '知道了' }]"
  />
</template>

三按钮（含警告） ​

通过 type: 'warn' 设置警告按钮。

查看代码
vue
<template>
  <weui-dialog
    v-model:visible="show"
    title="文件操作"
    content="请选择操作"
    :buttons="threeButtons"
    @buttontap="onButtonTap"
  />
</template>

<script setup lang="ts">
import type { DialogButton } from 'weui-uniapp-design'
const threeButtons: DialogButton[] = [
  { label: '取消' },
  { label: '确定' },
  { label: '删除', type: 'warn' },
]
</script>

按钮垂直排列 ​

通过 btn-wrap 让按钮垂直排列，适用于按钮文字较长时。

查看代码
vue
<template>
  <weui-dialog
    v-model:visible="show"
    title="提示"
    content="按钮垂直排列"
    :buttons="buttons"
    btn-wrap
  />
</template>

禁用遮罩点击 ​

通过 :mask-closable="false" 禁止点击遮罩关闭。

查看代码
vue
<template>
  <weui-dialog
    v-model:visible="show"
    title="提示"
    content="必须点击按钮关闭"
    :buttons="buttons"
    :mask-closable="false"
  />
</template>

无遮罩背景 ​

通过 :mask="false" 使遮罩透明（仍拦截点击）。

查看代码
vue
<template>
  <weui-dialog
    v-model:visible="show"
    title="提示"
    content="遮罩透明"
    :buttons="buttons"
    :mask="false"
  />
</template>

命令式：Dialog.alert ​

Dialog.alert(options) 显示只有一个"确定"按钮的对话框，点击确定后 Promise resolve。

查看代码
vue
<template>
  <weui-overlay-host />
  <weui-button type="primary" @click="onAlert">Dialog.alert</weui-button>
</template>

<script setup lang="ts">
import { Dialog } from 'weui-uniapp-design'

const onAlert = async () => {
  await Dialog.alert({ title: '提示', content: '这是一个 alert 对话框' })
}
</script>

命令式：Dialog.confirm ​

Dialog.confirm(options) 显示有"取消"和"确定"按钮的对话框，返回 Promise<boolean>，点击确定 resolve true，点击取消 resolve false。

查看代码
vue
<template>
  <weui-overlay-host />
  <weui-button type="primary" @click="onConfirm">Dialog.confirm</weui-button>
</template>

<script setup lang="ts">
import { Dialog } from 'weui-uniapp-design'

const onConfirm = async () => {
  const ok = await Dialog.confirm({ title: '确认', content: '确定删除吗？' })
  console.log(ok)
}
</script>

自定义插槽 ​

通过 title 和 default 插槽自定义标题和内容。

查看代码
vue
<template>
  <weui-button type="primary" @click="show = true">查看插槽 Dialog</weui-button>
  <weui-dialog v-model:visible="show" :buttons="buttons">
    <template #title>自定义标题</template>
    <template #default>
      <p>这是自定义内容</p>
    </template>
  </weui-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
</script>

Attributes ​

参数说明类型默认值
visible (v-model)是否显示booleanfalse
title标题string—
content内容文字（无 default slot 时使用）string—
buttons按钮列表DialogButton[][]
mask-closable点击遮罩是否关闭booleantrue
mask是否显示遮罩背景booleantrue
btn-wrap按钮是否垂直排列booleanfalse
ext-class自定义附加类名string—
z-indexz-index（命令式调用时由 overlay-host 注入）number—

DialogButton ​

属性说明类型默认值
label按钮文字string—
type按钮类型，未指定时按位置自动分配'default' | 'primary' | 'warn'—

Events ​

事件名说明回调参数
update:visible显示状态变化时触发(value: boolean)
buttontap点击按钮时触发(button: DialogButton, index: number)
close关闭时触发—

Slots ​

插槽名说明
title自定义标题
default自定义内容
footer自定义底部按钮区

命令式 API ​

Dialog.show(options): Promise<DialogShowResult> ​

显示对话框。buttons 中的按钮点击后 resolve。

Dialog.alert(options): Promise<void> ​

显示 alert 对话框（单按钮"确定"），点击确定后 resolve。

Dialog.confirm(options): Promise<boolean> ​

显示 confirm 对话框（双按钮），点击确定 resolve true，点击取消 resolve false。