Ant Design Vue封装a-drawer

标签：The   button   fun   des   封装   default   ret   UNC   turn   

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
}

Ant Design Vue封装a-drawer

标签：The   button   fun   des   封装   default   ret   UNC   turn   

原文地址：https://www.cnblogs.com/IwishIcould/p/15034290.html