Dialog 对话框

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

基础用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

需要设置 model-value / v-model 属性，它接收 Boolean ，当为 true 时显示 Dialog 。Dialog 分为三个部分: header 、 container 和 footer ，footer 需要具名为 footer 的 slot 。title 属性用于定义标题，他是可选的，默认值为空。本组件对话框还展现了完全不一样的对话框 UI 。

<template>
    <div>
        <kl-button @click="dialogFlag = true">click to open the dialog</kl-button>
        <kl-dialog v-model="dialogFlag" top="-25%">
            <template #header>Tips</template>
            <span>this is a message</span>
            <template #footer>
                <span class="footer">
                    <kl-button @click="dialogFlag = false">Cancel</kl-button>
                    <kl-button type="primary" @click="dialogFlag = false">Enter</kl-button>
                </span>
            </template>
        </kl-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const dialogFlag = ref(false)
</script>

<style scoped></style>

Mode

kunlun design 新模式

Dialog 变成了横向出现，跨越全屏的弹窗提示，动画更加丝滑。您只需要对 mode 属性配置为 kunlun，就可以将 Dialog 变化成实例那样。

<template>
    <div>
        <kl-button @click="dialogFlag = true">click to open the dialog</kl-button>
        <kl-dialog
            v-model="dialogFlag"
            mode="kunlun"
            :show-close="false"
            cxt-position="center"
            bgColor="rgb(58,194,167)"
            foot-position="right"
        >
            <template #header>
                <span class="header-title"> Tips </span>
            </template>
            <div class="container">KUNLUN DESIGN</div>
            <template #footer>
                <div class="footer" @click="dialogFlag = false">
                    <span>点击此处或空白处关闭提示</span>
                </div>
            </template>
        </kl-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const dialogFlag = ref(false)
</script>

<style scoped lang="scss">
.header-title {
    color: rgb(35 117 53);
    font-size: 20px;
}

em {
    font-style: italic;
}

.container {
    font-size: 20px;
    color: white;
}

.footer > span {
    cursor: pointer;
    color: gray;

    &:hover {
        color: black;
    }
}
</style>

自定义内容

kunlun design 支持您设置内容的对齐方式，甚至支持您自己完全自定义 Dialog 内容。

您可以通过设置 ctxPosition 属性来达到 left 左对齐、 right 右对齐和 center 居中对齐

<template>
    <div>
        <kl-button @click="dialogFlag = true">click to open the dialog</kl-button>
        <kl-dialog v-model="dialogFlag" :showClose="false" cxtPosition="right">
            <template #header>
                <span>Tips</span>
            </template>
            <div>
                <kl-input type="text" placeholder="username" />
                <kl-input type="password" placeholder="password" />
            </div>
            <template #footer>
                <span class="footer">
                    <kl-button @click="dialogFlag = false">Cancel</kl-button>
                    <kl-button type="primary" @click="dialogFlag = false">Enter</kl-button>
                </span>
            </template>
        </kl-dialog>
    </div>
</template>

<script setup lang="ts">
import { KlMessage } from '@kunlun-design/components'
import { ref } from 'vue'
const dialogFlag = ref(false)
const handleClose = (done: () => void) => {
    KlMessage.warning('2s 后关闭对话框')
    setTimeout(() => {
        done()
    }, 2000)
}
</script>

<style scoped>
.kl-input {
    margin: 10px 0;
}
</style>

自定义头部

kunlun design 支持您自定义 Dialog 的头部

<template>
    <div>
        <kl-button @click="dialogFlag = true">click to open the dialog</kl-button>
        <kl-dialog v-model="dialogFlag" :showClose="false" cxtPosition="left">
            <template #header="{ close }">
                <span>Tips</span>
                <kl-button type="danger" @click="close">关闭</kl-button>
            </template>
            this is a message
        </kl-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const dialogFlag = ref(false)
</script>

<style scoped>
.kl-input {
    margin: 10px 0;
}

.kl-dialog .kl-button {
    margin-left: 50px;
}
</style>

关闭前回调

kunlun design 支持您在关闭对话框前，执行一些您业务上所想执行的事情，您只需要添加 before-close 属性即可。

before-close 属性接收一个方法为参数。

<template>
    <div>
        <kl-button @click="dialogFlag = true">click to open the dialog</kl-button>
        <kl-dialog v-model="dialogFlag" :before-close="handleClose" cxtPosition="center">
            <template #header>
                <span>Tips</span>
            </template>
            this is a message
        </kl-dialog>
    </div>
</template>

<script setup lang="ts">
import { KlMessage } from '@kunlun-design/components'
import { ref } from 'vue'
const dialogFlag = ref(false)
const handleClose = (done: () => void) => {
    KlMessage.warning(`3s 后关闭对话框`, 3000)
    setTimeout(() => {
        KlMessage.success(`关闭对话框`)
        done()
    }, 3000)
}
</script>

<style scoped>
.kl-input {
    margin: 10px 0;
}
</style>

自定义对话框基本样式

kunlun design 支持您在属性上对对话框基本样式进行快速设置。

您可以通过 width 属性对对话框宽度进行设置，如不设置，组件宽度则是被内容撑开。您可以通过 top 和 left 对对话框位置进行设置，让对话框出现在您想要它出现在的位置。您还可以通过 bgColor 属性对对话框背景颜色进行配置。

<template>
    <div>
        <kl-button @click="dialogFlag = true">click to open the dialog</kl-button>
        <kl-dialog v-model="dialogFlag" top="-25%" bgColor="rgb(57,183,84)">
            <template #header>Tips</template>
            <span>this is a message</span>
            <template #footer>
                <span class="footer">
                    <kl-button @click="dialogFlag = false">Cancel</kl-button>
                    <kl-button type="primary" @click="dialogFlag = false">Enter</kl-button>
                </span>
            </template>
        </kl-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const dialogFlag = ref(false)
</script>

<style scoped></style>

属性

属性	说明	类型	默认值	可选值
modelValue / v-model	是否显示 Dialog	boolean
width	对话框宽度	string
mode	对话框模式	string	default	kunlun
left \| top	对话框位置	string		带单位的值
cxtPosition	对话框内容对齐方式	string	center	left \| center \| right
footPosition	对话框底部对齐方式	string	center	left \| center \| right
bgColor	对话框颜色	string	white	任何代表颜色的值
show-close	是否显示关闭按钮	boolean	true	false
before-close	对话框关闭前的回调	function
close-on-click-modal	点击模态框是否关闭对话框	boolean	true	false

Dialog 对话框 #

基础用法 #

Mode #

自定义内容 #

自定义头部 #

关闭前回调 #

自定义对话框基本样式 #

属性 #