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,
            default: true,
        },
    },
    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
}