QilinDrawer组件

QilinDrawer组件是一个抽屉组件，用于在抽屉打开时，将页面内容隐藏，并显示抽屉内容。

基本使用

<template>
    <el-button type="primary" @click="drawerConfig.isShow=true">打开抽屉</el-button>
    <QilinDrawer v-model:drawerConfig="drawerConfig" @handleClose="drawerConfig.isShow=false">
        <span>Qilin组件的抽屉</span>
    </QilinDrawer>
</template>

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

const drawerConfig=reactive({
    isShow:false,
    title:"Qilin组件抽屉",
    withHeader:false,
    closeOnClickModal:true,
    isHideFooter:true
});
</script>

示例：

Qilin组件的抽屉

Props参数

dialogConfig object

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

属性名	类型	说明	可选值	默认值
isShow	boolean	是否显示抽屉	-	false
title	string	抽屉标题	-	-
lockScroll	boolean	是否在抽屉出现时将body滚动锁定	-	true
closeOnClickModal	boolean	是否可以通过点击阴影部分即modal部分关闭抽屉	-	false
closeOnPressEscape	boolean	是否可以通过按下ESC键关闭抽屉	-	false
modal	boolean	是否需要遮罩层即modal层	-	true
appendToBody	boolean	抽屉元素自身是否插入至body元素上去	-	true
openDelay	number	抽屉打开的延时时间，单位毫秒	-	0
closeDelay	number	抽屉关闭的延时时间，单位毫秒	-	0
withHeader	boolean	是否显示抽屉头部元素	-	true
showClose	boolean	是否显示关闭图标，当withHeader为true时生效	-	true
direction	string	抽屉打开的方向，默认从右向左	ltr/rtl/ttb/btt	rtl
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	-	默认插槽，抽屉内的自定义内容元素