Dialog 对话框

TIP

点击按钮，打开对应对话框组件。

● 类型

通过type属性来设置对话框的类型

展示代码

vue

<template>
    <div>
        <k-space>
            <k-button :onclick = "() => {clickToShow(0)}" type="primary">Open a dialog of type info</k-button>
            <k-button :onclick = "() => {clickToShow(1)}" type="success">Open a dialog of type confirm</k-button>
            <k-button :onclick = "() => {clickToShow(2)}" type="warming">Open a dialog of type warning</k-button>
            <k-button :onclick = "() => {clickToShow(3)}" type="danger">Open a dialog of type error</k-button>
        </k-space>
        
        <k-dialog v-if = "isShow[0]"
        titleText = "Title"
        contentText = "Some contents... Some contents... Some contents... Some contents... Some contents... Some contents... Some contents... Some contents... Some contents..."
        ></k-dialog>
       
        <k-dialog v-if = "isShow[1]"
        titleText = "Title"
        contentText = "Some contents... Some contents... Some contents... Some contents... Some contents... Some contents... Some contents... Some contents... Some contents..."
        type="confirm"
        ></k-dialog>
       
        <k-dialog v-if = "isShow[2]"
        titleText = "Are you sure delete this task?"
        contentText = "Some contents... Some contents... Some contents... Some contents... Some contents... Some contents... Some contents... Some contents... Some contents..."
        type="warning"
        ></k-dialog>
       
        <k-dialog v-if = "isShow[3]"
        titleText = "A serious error has occurred here !"
        contentText = "It needs to be updated online. Please confirm that your network connection is normal and try again."
        type="error"
        ></k-dialog>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    let isShow: any = ref([false, false, false, false]);
    let clickToShow = (i:number) => {
        isShow.value.forEach((item:boolean, index:number) => isShow.value[index] = false);
        isShow.value[i] = true;
    }
</script>

注意

请勿将<k-dialog>组件放入行内元素中。

● 自定义大小

通过width和height属性来设置对话框的整体宽度和高度

展示代码

vue

<template>
    <div>
        <k-space>
            <k-button :onclick = "() => {clickToShow(0)}" type="primary">600×200</k-button>
            <k-button :onclick = "() => {clickToShow(1)}" type="primary">400×170</k-button>
        </k-space>
        
        <k-dialog v-if = "isShow[0]"
        titleText = "对话框标题"
        contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
        width="600px"
        height="200px"
        ></k-dialog>

        <k-dialog v-if = "isShow[1]"
        titleText = "对话框标题"
        contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
        width="400px"
        height="170px"
        ></k-dialog>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    let isShow: any = ref([false, false]);
    let clickToShow = (i:number) => {
        isShow.value.forEach((item:boolean, index:number) => isShow.value[index] = false);
        isShow.value[i] = true;
    }
</script>

● 自定义主题颜色

通过themeColor属性来设置对话框的主题颜色

展示代码

vue

<template>
    <div>
        <k-space>
            <k-button :onclick = "() => {clickToShow(6)}" type="success">themeColor = "#1ABC9C"</k-button>
        </k-space>
    
        <k-dialog v-if = "isShow[0]"
        titleText = "对话框标题"
        contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
        themeColor="#1ABC9C"
        ></k-dialog>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    let isShow: any = ref([false]);
    let clickToShow = (i:number) => {
        isShow.value.forEach((item:boolean, index:number) => isShow.value[index] = false);
        isShow.value[i] = true;
    }
</script>

● 位置

通过location属性来设置对话框的位置

展示代码

vue

<template>
    <div>
        <k-space>
            <k-button :onclick = "() => {clickToShow(0)}" type="primary">top</k-button>
            <k-button :onclick = "() => {clickToShow(1)}" type="primary">center</k-button>
        </k-space>

        <k-dialog v-if = "isShow[0]"
            titleText = "对话框标题"
            contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
            location="top"
        ></k-dialog>

        <k-dialog v-if = "isShow[1]"
            titleText = "对话框标题"
            contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
            location="center"
        ></k-dialog>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    let isShow: any = ref([false, false]);
    let clickToShow = (i:number) => {
        isShow.value.forEach((item:boolean, index:number) => isShow.value[index] = false);
        isShow.value[i] = true;
    }
</script>

● 按钮

通过closable属性来设置是否展示对话框的关闭按钮

通过footerBtn属性来设置对话框的底部按钮的展示情况

展示代码

vue

<template>
    <div>
        <k-space>
            <k-button :onclick = "() => {clickToShow(0)}" type="primary">无关闭按钮</k-button>
            <k-button :onclick = "() => {clickToShow(1)}" type="primary">仅含确认按钮</k-button>
            <k-button :onclick = "() => {clickToShow(2)}" type="primary">仅含取消按钮</k-button>
            <k-button :onclick = "() => {clickToShow(3)}" type="primary">不展示确认和取消按钮</k-button>
        </k-space>
        <k-dialog v-if = "isShow[0]"
            titleText = "对话框标题"
            contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
            :closable = false
        ></k-dialog>
        <k-dialog v-if = "isShow[1]"
            titleText = "对话框标题"
            contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
            footerBtn="confirm"
        ></k-dialog>
        <k-dialog v-if = "isShow[2]"
            titleText = "对话框标题"
            contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
            footerBtn="cancel"
        ></k-dialog>
        <k-dialog v-if = "isShow[3]"
            titleText = "对话框标题"
            contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
            footerBtn="null"
        ></k-dialog> 
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    let isShow: any = ref([false, false, false, false]);
    let clickToShow = (i:number) => {
        isShow.value.forEach((item:boolean, index:number) => isShow.value[index] = false);
        isShow.value[i] = true;
    }
</script>

● 点击事件

通过confirmClick和cancelClick属性来注册对话框的确认按钮和取消按钮的点击事件

展示代码

vue

<template>
    <div>
        <k-space>
            <k-button :onclick = "() => {clickToShow(0)}" type="primary">确认按钮点击事件</k-button>
            <k-button :onclick = "() => {clickToShow(1)}" type="primary">取消按钮点击事件</k-button>       
        </k-space>

        <k-dialog v-if = "isShow[0]"
            titleText = "对话框标题"
            contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
            :confirmClick="confirmClick"
        ></k-dialog>

        <k-dialog v-if = "isShow[1]"
            titleText = "对话框标题"
            contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
            :cancelClick="cancelClick"
        ></k-dialog>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    // 是否展示对话框组件
    let isShow: any = ref([false, false]);
    // 点击按钮显示对应对话框
    let clickToShow = (i:number) => {
        isShow.value.forEach((item:boolean, index:number) => isShow.value[index] = false);
        isShow.value[i] = true;
    }

    // 自定义确认按钮点击事件
    let confirmClick = () => {
        window.alert("点击了确认按钮");
    }
    // 自定义取消按钮点击事件
    let cancelClick = () => {
        window.alert("点击了取消按钮");
    }
</script>

● 异步确认

通过confirmLoading属性来设置确认按钮是否为异步按钮

展示代码

vue

<template>
    <div>
        <k-space>
            <k-button :onclick = "() => {clickToShow()}" type="primary">异步确认</k-button>            
        </k-space>
        <k-dialog v-if = "isShow"
            titleText = "对话框标题"
            contentText = "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
            :confirmLoading = true
            :confirmClick="confirmClick"
        ></k-dialog>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    // 是否展示对话框组件
    let isShow: any = ref(false);
    // 点击按钮显示对应对话框
    let clickToShow = () => {
        isShow.value = true;
    }
    // 自定义异步确认按钮点击事件
    let confirmClick = () => {
        let p = new Promise<void>((resolve, reject) => {
            setTimeout(()=> {
                resolve();
            }, 1000)
        })
        p.then(()=> {
            isShow.value = false;
        })
    }
</script>

● Attributes 参数

参数	说明	类型	默认值
type	提示框类型：info、confirm、warning、error	string	"info"
themeColor	主题颜色，包括头部背景颜色、图标颜色、确认按钮颜色	string	-
titleColor	标题文字颜色	string	"white"
contentColor	提示框内容文字颜色	string	"black"
titleText	标题文本	string	-
contentText	提示框内容文本	string	-
confirmBtnText	确认按钮文本	string	"确认"
cancelBtnText	取消按钮文本	string	"取消"
closable	是否显示右上角的关闭按钮	boolean	true
footerBtn	底部按钮类型：both、confirm、cancel、null	string	"both"
width	对话框整体宽度	string	"500px"
height	对话框整体高度	string	"200px"
location	提示框位置：top、center	string	"top"
confirmClick	确定按钮点击事件	function	-
cancelClick	取消按钮点击事件	function	-
confirmLoading	异步确认按钮	boolean	false

Dialog 对话框 #

● 类型 #

● 自定义大小 #

● 自定义主题颜色 #

● 位置 #

● 按钮 #

● 点击事件 #

● 异步确认 #

● Attributes 参数 #

Dialog 对话框

● 类型

● 自定义大小

● 自定义主题颜色

● 位置

● 按钮

● 点击事件

● 异步确认

● Attributes 参数