QilinDialog组件

QilinDialog组件用于创建一个弹出框。

基本使用

<template>
    <el-button type="primary" @click="dialogConfig.isShow = true;">打开弹窗</el-button>
    <QilinDialog v-model:dialogConfig="dialogConfig" @handleClose="handleClose"
        @submitConfirm="console.log('点击确定按钮')"
    >
        <template v-slot:extra>
            <div>额外的内容，extra插槽~</div>
        </template>
         <div>弹窗内内容，默认插槽~</div>
    </QilinDialog>
</template>

<script setup>
import {reactive,ref} from "vue";

const formConfigRef = ref(null);

const handleClose=()=>{
    formConfigRef.value.formResetFields();
    dialogConfig.isShow = false;
};

const dialogConfig=reactive({
    isShow:false,
    title:"Qilin弹窗",
    width:700
});

</script>

示例：

弹窗内内容，默认插槽~

Props参数

dialogConfig object

核心配置项，支持以下参数。

属性名	类型	说明	可选值	默认值
isShow	boolean	是否显示弹窗	-	false
title	string	弹窗标题	-	-
width	number/string	弹窗宽度	-	600
top	string	弹窗的margin-top值	-	15vh
closeOnClickModal	boolean	是否可以通过点击阴影部分即modal部分关闭弹窗	-	false
closeOnPressEscape	boolean	是否可以通过按下ESC键关闭弹窗	-	false
modal	boolean	是否需要遮罩层即modal层	-	true
appendToBody	boolean	弹窗元素自身是否插入至body元素上去	-	true
center	boolean	弹窗头部和底部是否居中排列	-	false
fullscreen	boolean	是否全屏显示	-	false
className	string	弹窗元素el-dialog的自定义类名	-	-
isHideFooter	boolean	是否隐藏弹窗脚部元素部分	-	false
confirmBtnConfig	object	弹窗确认按钮的配置项，详见confirmBtnConfig	-	-
cancelBtnConfig	object	弹窗取消按钮的配置项，详见cancelBtnConfig	-	-
additionalButton	array	弹窗取消额外按钮的配置项，详见additionalButton	-	-

confirmBtnConfig object

弹窗确认按钮的配置项。

属性名	类型	说明	可选值	默认值
btnName	string	确认按钮的文字名称	-	确定
btnType	string	确认按钮的样式类型	primary/success/warning/danger/info/text	primary
btnSize	string	确认按钮的尺寸	large/small/default	default
isShow	boolean	是否显示确认按钮	-	true

cancelBtnConfig object

弹窗取消按钮的配置项。

属性名	类型	说明	可选值	默认值
btnName	string	取消按钮的文字名称	-	确定
btnType	string	取消按钮的样式类型	primary/success/warning/danger/info/text	primary
btnSize	string	取消按钮的尺寸	large/small/default	default
isShow	boolean	是否显示取消按钮	-	true

additionalButton array

弹窗额外按钮的配置项。

属性名	类型	说明	可选值	默认值
btnName	string	额外按钮的文字名称	-	确定
btnType	string	额外按钮的样式类型	primary/success/warning/danger/info/text	primary
btnSize	string	额外按钮的尺寸	large/small/default	default
btnClick	function	额外按钮的点击事件	()=>{}	-

Events

组件的暴露事件。

事件名	类型	参数	说明
handleClose	function	-	关闭弹窗触发事件
submitConfirm	function	-	点击确定按钮触发事件

Slots

组件的插槽。

插槽名	数据值	说明
default	-	默认插槽，弹窗内的自定义内容元素
extra	-	弹窗内需要额外添加的内容元素