Dialog 对话框

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

基础用法

使用 v-model 绑定一个响应式变量控制对话框显示隐藏。可以通过title属性设置对话框标题。使用默认插槽传入对话框主体内容。

<template>
    <div class="container">
    <ym-dialog 
    v-model="show" 
    title="这是标题" 
    >
      <span>这是一个dialog弹框</span>
    </ym-dialog>
    <ym-button @click="open">开启</ym-button>
    </div>
</template>

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

const open = () => {
    show.value = true
}

</script>

<style lang="scss" scoped>

</style>

自定义头部和底部

使用header和footer具名插槽来自定义头部和底部内容。在不需要头部或者底部时，可以设置header和footer属性为false来隐藏头部和底部显示。

自定义头部底部

隐藏头部底部

<template>
    <div class="container">
        <div class="item">
            <h4>自定义头部底部</h4>
            <ym-dialog 
            v-model="show1" 
            >   
                <template #header>
                    <h3>自定义头部</h3>
                </template>
                <template #footer>
                    <ym-button @click="show1 = false">取消</ym-button>
                </template>
                <span>这是一个dialog弹框</span>
            </ym-dialog>
            <ym-button @click="open1">开启</ym-button>
        </div>
        <div class="item">
            <h4>隐藏头部底部</h4>
            <ym-dialog 
            v-model="show2" 
            :header="false"
            :footer="false"
            >
            <template #header>
                <h3>自定义头部</h3>
            </template>
            <template #footer>
                <ym-button @click="show1 = false">取消</ym-button>
            </template>

            <span>这是一个dialog弹框</span>
            </ym-dialog>
            <ym-button @click="open2">开启</ym-button>
                </div>
            </div>
</template>

<script setup>
import { ref } from 'vue'
const show1 = ref(false)
const show2 = ref(false)

const open1 = () => {
    show1.value = true
}
const open2 = () => {
    show2.value = true
}



</script>

<style  scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
</style>

自定义宽度

可以通过 width 属性来设置对话框的宽度。该属性接受三种数据类型，分别是number整数数值类型，表示对话框宽度，单位为px，也可以是一个string的数值类型，还可以传入一个百分比字符串或者一个带单位的字符串。可以使用 fullscreen属性来设置对话框全屏显示。

number数字

string数字

百分比

带单位

全屏

<template>
    <div class="container">
        <div class="item">
            <h4>number数字</h4>
            <ym-dialog 
            v-model="show1" 
            title="标题"
            :width="300"
            >   
                <template #footer>
                    <ym-button @click="show1 = false">取消</ym-button>
                </template>
                <span>这是一个dialog弹框</span>
            </ym-dialog>
            <ym-button @click="open1">开启</ym-button>
        </div>
        <div class="item">
            <h4>string数字</h4>
            <ym-dialog 
            v-model="show2" 
            title="标题"
            width="500"
            >
            <template #footer>
                <ym-button @click="show2 = false">取消</ym-button>
            </template>

            <span>这是一个dialog弹框</span>
            </ym-dialog>
            <ym-button @click="open2">开启</ym-button>
        </div>
        <div class="item">
            <h4>百分比</h4>
            <ym-dialog 
            v-model="show3" 
            title="标题"
            width="60%"
            >
            <template #footer>
                <ym-button @click="show3 = false">取消</ym-button>
            </template>

            <span>这是一个dialog弹框</span>
            </ym-dialog>
            <ym-button @click="open3">开启</ym-button>
        </div>
        <div class="item">
            <h4>带单位</h4>
            <ym-dialog 
            v-model="show4" 
            title="标题"
            width="700px"
            >
            <template #footer>
                <ym-button @click="show4 = false">取消</ym-button>
            </template>

            <span>这是一个dialog弹框</span>
            </ym-dialog>
            <ym-button @click="open4">开启</ym-button>
        </div>
        <div class="item">
            <h4>全屏</h4>
            <ym-dialog 
            v-model="show5" 
            title="标题"
            fullscreen
            >
            <template #footer>
                <ym-button @click="show5 = false">取消</ym-button>
            </template>

            <span>这是一个dialog弹框</span>
            </ym-dialog>
            <ym-button @click="open5">开启</ym-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const show5 = ref(false)

const open1 = () => {
    show1.value = true
}
const open2 = () => {
    show2.value = true
}
const open3 = () => {
    show3.value = true
}
const open4 = () => {
    show4.value = true
}
const open5 = () => {
    show5.value = true
}



</script>

<style  scoped>
.container {
    display: flex;
    gap: 20px;
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}
</style>

延迟开启与关闭

通过openDelay和closeDelay属性来设置对话框开启和关闭的延迟时间，单位为毫秒。

<template>
    <div class="container">
    <ym-dialog 
    v-model="show" 
    title="这是标题" 
    :openDelay="1000"
    :closeDelay="1000"
    @opened="opend"
    @closed="closed"
    >
      <span>这是一个dialog弹框</span>
    </ym-dialog>
    <ym-button @click="open">开启</ym-button>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { YmMessage  } from 'guyan-ym-ui';
const show = ref(false)

const open = () => {
    show.value = true
}
const opend = () => {
    YmMessage.success('打开成功')
}
const closed = () => {
    YmMessage.success('关闭成功')
}


</script>

<style lang="scss" scoped>

</style>

Dialog API

Props

Name	Description	Type	Default
modelValue	是否显示	boolean	false
title	标题	string	-
width	宽度	string	number
fullscreen	是否全屏	boolean	false
top	距离顶部距离	string	-
modal	是否显示遮罩	boolean	true
modalClass	遮罩样式	string	-
lockScroll	是否锁定滚动	boolean	true
openDelay	打开延时	number	0
closeDelay	关闭延时	number	0
closeOnClickModal	点击遮罩是否关闭	boolean	true
closeOnPressEscape	按下ESC是否关闭	boolean	true
showClose	是否显示关闭按钮	boolean	true
beforeClose	关闭前的回调	`(done: () => void) => void`	-
center	是否居中	boolean	false
closeIcon	关闭图标	string	-
zIndex	层级	number	2000
customClass	自定义类名	string	-
appendTo	挂载节点	string	-
header	是否显示头部	boolean	true
footer	是否显示底部	boolean	true
alginCenter	是否居中	boolean	false

Events

Name	Description	Type
open	打开对话框时触发	-
close	关闭对话框时触发	-
opened	打开动画结束时触发	-
closed	关闭动画结束时触发	-
update:modelValue	modelValue 改变时触发	`(value: boolean) => void`

Slots

Name	Description	Sub Component
default	默认插槽	-
header	头部插槽	-
footer	底部插槽	-

Dialog 对话框 ​

基础用法 ​

自定义头部和底部 ​

自定义头部底部

隐藏头部底部

自定义宽度 ​

number数字

string数字

百分比

带单位

全屏

延迟开启与关闭 ​

Dialog API ​

Props ​

Events ​

Slots ​