Dialog 对话框

对话框组件用于在当前页面上弹出一个对话框，用于展示重要的信息或与用户进行交互。

基础用法

通过标签 <NueDialog> 可以创建一个对话框组件。

显示隐藏控制

对话框组件需要使用 v-model 传入一个响应式属性用于控制对话框的显示和隐藏。

通过 title 属性设置对话框的标题。属性值类型为 string。

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

const visible = ref(false);
</script>

<template>
    <nue-button @click="visible = true">打开对话框</nue-button>
    <nue-dialog v-model="visible" title="基础对话框" />
</template>

允许通过遮罩层关闭抽屉

对话框组件默认不允许点击组件遮罩层区域触发关闭动作，通过属性 allow-close-by-overlay 设置允许通过点击遮罩层关闭。

属性 allow-close-by-overlay 被指定后，遮罩层会响应键盘 Escape 键事件，按键按下后触发对话框关闭。

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

const visible = ref(false);
</script>

<template>
    <nue-button @click="visible = true">打开对话框</nue-button>
    <nue-dialog v-model="visible" title="基础对话框" allow-close-by-overlay />
</template>

自定义头部、主体以及底部

通过指定插槽完成对应内容的自定义。

基本插槽

基础插槽包含 header、content 以及 footer 插槽，分别用于自定义对话框的头部、主体以及底部内容。这些插槽都可以解构出 close 方法，用于关闭对话框。

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

const visible = ref(false);
</script>

<template>
    <nue-button @click="visible = true">打开对话框</nue-button>
    <nue-dialog v-model="visible" title="基础对话框">
        <template #header="{ close }">
            <nue-div align="center" wrap="nowrap" gap="0.5rem">
                <nue-icon size="1rem" name="priority-1" />
                <nue-text size="1rem">提示</nue-text>
            </nue-div>
            <nue-text size="0.75rem" @click="close">关闭</nue-text>
        </template>
        <template #content>
            <nue-text size="0.875rem">这是一个基础对话框</nue-text>
        </template>
        <template #footer="{ close }">
            <nue-button theme="small" @click="close">取消</nue-button>
            <nue-button theme="small,primary" @click="close">确定</nue-button>
        </template>
    </nue-dialog>
</template>

重写插槽

重写插槽 reset 可以重写整个对话框内所有元素，包括头部、主体以及底部。提供更为灵活的自定义。

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

const visible = ref(false);
</script>

<template>
    <nue-button @click="visible = true">打开对话框</nue-button>
    <nue-dialog v-model="visible" title="基础对话框">
        <template #reset="{ close }">
            <nue-text size="1rem">自定义头部</nue-text>
            <nue-text size="0.875rem">这是一个自定义的主体内容</nue-text>
            <nue-div justify="end" gap="0.5rem">
                <nue-button theme="small" @click="close">取消</nue-button>
                <nue-button theme="small,primary" @click="close">确定</nue-button>
            </nue-div>
        </template>
    </nue-dialog>
</template>

连续打开多个对话框

对话框组件可以连续打开多个，每个对话框之间是独立的，互不干扰。

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

const visible = ref(false);
const visible2 = ref(false);
</script>

<template>
    <nue-button @click="visible = true">打开对话框</nue-button>
    <nue-dialog v-model="visible" title="对话框 A">
        <template #content>
            <nue-button @click="visible2 = true">打开对话框 B</nue-button>
        </template>
    </nue-dialog>
    <nue-dialog v-model="visible2" title="对话框 B" />
</template>

生命周期事件

对话框组件提供了 before-open、after-open、before-close、after-close 四个生命周期事件，分别在对话框打开前、打开后、关闭前、关闭后触发。

<script setup lang="ts">
import { ref } from 'vue';
import { NueMessage } from 'nue-ui';

const visible = ref(false);
</script>

<template>
    <nue-button @click="visible = true">打开对话框</nue-button>
    <nue-dialog
        v-model="visible"
        title="对话框"
        @before-open="() => NueMessage.info('打开对话框前')"
        @after-open="() => NueMessage.info('打开对话框后')"
        @before-close="() => NueMessage.info('关闭对话框前')"
        @after-close="() => NueMessage.info('关闭对话框后')"
    >
        <nue-text>这是一个基础对话框</nue-text>
    </nue-dialog>
</template>