Ant Design Vue封装a-drawer

1.创建子组件

<template>
    <a-drawer
        :title="drawerInfo.customTitle"
        :placement="placement"
        :closable="drawerInfo.showCloseIcon"
        :visible="drawerInfo.visible"
        @close="onClose"
        :width="drawerInfo.width"
        :maskClosable="drawerInfo.clickmaskFlag"
    >
        <div clang="cont-all">
            <slot></slot>
        </div>
    </a-drawer>
</template>
<script lang="ts">
import { defineComponent,reactive,watch } from 'vue'
export default defineComponent({
    props: {
        // 从那个方向打开
        openlocal: {
            type: String,default: 'right',},// 宽度
        width: {
            type: String,default: '461px',// 标题
        customTitle: {
            type: String,required: true,// 是否展示抽屉
        showMskFalg: {
            type: Boolean,default: false,// 显示关闭图标
        showCloseflag: {
            type: Boolean,default: true,// 	点击蒙层是否允许关闭
        clickmaskFlag: {
            type: Boolean,setup(props,{ emit }) {
        const drawerInfo = reactive({
            placement: props.openlocal,//打开的方向
            width: props.width,//宽度
            customTitle: props.customTitle,//标题
            visible: props.showMskFalg,//默认关闭
            showCloseIcon: props.showCloseflag,//closable
            clickmaskFlag: props.clickmaskFlag,//	点击蒙层是否允许关闭
        })
        // 点击遮罩层或右上角叉或取消按钮的回调
        function onClose() {
            emit('otherHander')
        }
        // 监听打开或者关闭
        watch(props,({ showMskFalg }) => {
            drawerInfo.visible = showMskFalg
        })
        return {
            drawerInfo,onClose,}
    },})
</script>

2封装时的注意点

showMskFalg这个参数是控制抽屉是否展开的一个变量
默认这个值是关闭的
由于这个值是有父级传递过来的
我们需要对这个值进行监听
于是便有了
监听打开或者关闭
watch(props,({ showMskFalg }) => {
   drawerInfo.visible = showMskFalg
})
他表示的是监听props中的showMskFalg这个值

3.使用组件

<a-button type="primary" @click="showDrawer">Open</a-button>
<drawer-com
      openlocal="right"
      @otherHander="otherHander"
      :showCloseflag="comInfo.showCloseflag"
      customTitle="新建目录"
      :showMskFalg="comInfo.showMskFalg"
></drawer-com>

let comInfo = reactive({
    showMskFalg: false,//默认关闭
    showCloseflag: true,//没有关闭图标
})

// 打开抽屉
function showDrawer() {
    comInfo.showMskFalg = true
}
// 关闭抽屉
function otherHander() {
    comInfo.showMskFalg = false
}