Dialog

Inform the user and host the actions while keeping the current page.

Basic usage

Dialog brings up a dialog box for scenarios that require greater customization.

You need to set the model-value/v-model property, which acceptsBooleanand displays Dialog when it is true. Dialog is divided into three parts: header, container, and footer. footer needs a slot named footer. The title attribute is used to define the title. It is optional and defaults to null. This component dialog also presents a completely different dialog 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 New model

Dialog becomes a landscape popover across the full screen, and the animation is silky. You only need to configure the mode property to kunlun to change the Dialog to that of the instance.

<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>

Custom content

kunlun design allows you to set the alignment of content and even completely customize the Dialog content yourself.

You can achieve left, left, right, and center alignment by setting the ctxPosition property

<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>

Custom header

kunlun design allows you to customize the header of the 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>

Call back before closing

The before-close property accepts a method as an argument.

<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>

Customize the basic style of the dialog box

kunlun design supports you to quickly set basic dialog box styles on the property.

You can set the width of the dialog box with the width property. If not, the component width is stretched by the content. You can set the dialog box position with top and left to make the dialog appear where you want it to appear. You can also configure the dialog background color through the bgColor property.

<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>

Attribute

attribute	description	type	default	Optional value
modelValue / v-model	Show Dialog or not	boolean
width	Dialog width	string
mode	Dialog mode	string	default	kunlun
left \| top	Dialog box location	string		Values with units
cxtPosition	Dialog box content alignment	string	center	left \| center \| right
footPosition	Dialog box bottom alignment	string	center	left \| center \| right
bgColor	Dialog color	string	white	Any value that represents a color
show-close	Whether the close button is displayed	boolean	true	false
before-close	The callback before the dialog closes	function
close-on-click-modal	Click Mode box to close the dialog box	boolean	true	false

Dialog #

Basic usage #

Mode #

Custom content #

Custom header #

Call back before closing #

Customize the basic style of the dialog box #

Attribute #