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
}
 

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！