vue3.0 + vite + ts + antd model二次封裝

1.對ant design vue model的二次封裝

父組件：

<myModal ref= "myModal"  @handleOk="handdleOk"  @handleCancel= "handleCancel" >
         這裏是對話框內容部門
</myModal>
<script lang="ts">
  import  myModal from './components/myModal.vue'
import { defineComponent,ref,reactive,toRefs} from 'vue';
export default defineComponent({
        components: {myModal},
        setup(props) {
            const visible=ref(false);
            const myModal= ref();
           /**這裏也可以直接將params這個對象的數據拿出來用props來傳值**/
            const open = () =>{
                const params = {
                    visible: true, // 打開對話框
                    title:'對話框標題',
                    okText:'確定',
                    cancelText:'取消',
                    width:'300px',
                    // okButtonProps:{style:{display: 'none'}}, // 不展示OK按鈕
                    // cancelButtonProps:{style:{display: 'none'}}, // 不展示Cancel按鈕
                    showFooter:true, // 底部按鈕展示與否
                    size:'medium', 
                }
                bdoModal.value.openModal(params)
            };
          //子組件的方法
            const submitModalData = reactive({
                handleOk:(val:Boolean) => {
                    console.log(val, 'submitModalData')
                }
            })
            return {
                open,visible,myModal,...toRefs(submitModalData)
            };
        },
        methods:{

        }
    });
</script>

子組件：

<template>
    <a-modal
        :title="title"
        :visible="visible"
        :okText="okText"
        :cancelText="cancelText"
        :cancelButtonProps="cancelButtonProps"
        :okButtonProps="okButtonProps"
        :confirm-loading="confirmLoading"
        :confirmLoading="confirmLoading"
        :width="width"
        :maskClosable="false"
        :footer="showFooter ? undefined : null"
        @ok="handleOk"
        @cancel="handleCancel"
    >
        <div class="modal-content">
            <slot></slot>
        </div>
    </a-modal>
</template>
<script lang="ts">
    import { defineComponent,ref,defineExpose,watch,toRefs,reactive} from 'vue'; 
    export default defineComponent({
        components: {},
        setup(props,{emit}) {
            const data = reactive({
                visible:false,
                title:'查看', // 對話框標題
                okText:'確定',  // 確定按鈕文案
                cancelText:'取消', // 取消按鈕文案
                confirmLoading:false, // 確定按鈕loading
                okButtonProps:{style:{display:"inline-block"}},  // 展示確定按鈕
                cancelButtonProps:{style:{display:"inline-block"}}, // 展示取消按鈕
                showFooter:false, // 對話框footer展示
                width:520, //寬度
                 size:'', // 尺寸 'mini':650,'small':750,'medium':900
            });
            const sizeObj = {'mini':650,'small':750,'medium':900}
              // 如果是用props的話，可以通過watch監聽對話框的狀態
            // watch( ()=> props.visible,(newS,oldS)=>{
            //     visible.value=newS
            // });
            /** 打開對話框並初始化 **/
            const openModal = (value) => {
                data.visible=value.visible;
                data.title = value.title || value.title;
                data.okText = value.okText || data.okText;
                data.cancelText = value.cancelText || data.cancelText;
                data.okButtonProps = value.okButtonProps || data.okButtonProps;
                data.cancelButtonProps = value.cancelButtonProps || data.cancelButtonProps;
                data.showFooter = value.showFooter || data.showFooter;
                if(value.size) setWidth(value.size);
            };
            // 設置對話框寬度
            const setWidth = (size) => {
                Object.keys(sizeObj).forEach( key => {
                    if(key === size) data.width = sizeObj[key]
                })
            };
          // 確定
            const handleOk = ()=>{
                emit('handleOk',false)
            };
          // 取消
            const handleCancel = () => {
                data.visible = false;
            }
            return {
                ...toRefs(data),openModal,handleOk,handleCancel,setWidth
            };
        }
    });
</script>

2.監聽visible（props傳值）

父組件：
<myModal ref= "myModal"  @handleOk="handdleOk"  @handleCancel= "handleCancel" :visible="visible">
         這裏是對話框內容部門
</myModal>
<script lang="ts">
// 省略其它如上
const open = () =>{
                visible.value=true
}
</script>

子組件：
props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
setup(props,{emit}) {
      /** 監聽visible的變化並賦值給data.visible **/
            const visible = reactive({visible:false})
            watch( ()=> props.visible,(newS,oldS)=>{
                visible.visible=newS
            });
        return {
                ...toRefs(visible)
            };
}）