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)
};
}）
