Vue和React两个AntDesign可复用Modal Template

React Ant Design Modal

* useModal.js
export function useModal(callbackOk, callbackCancel) {
    const [visible, setVisible] = useState(false)
    const showModal = () => {
        setVisible(true)
    }
    const handleOk = () => {
        callbackOk().then(res => {
            if(res) setVisible(false)
        })
    };
    const handleCancel = () => {
        callbackCancel()
        setVisible(false);
    };
    return {
        visible,
        showModal,
        handleOk,
        handleCancel,
        setVisible
    }
}
 
 
* Modal.tsx
 const {visible, showModal, handleOk, handleCancel} = useMdoal(callbackCustomOk, callbackCustomCancel)
 
 // 当组件挂载后，将这个组件的实例传递给父组件
    React.useImperativeHandle(ref, () => ({
        showModal,
        setDataSource
    }));
<>
 
<Modal
            destroyOnClose={true}
            visible={visible}
            title={''}
            className={ModalStyl["keyMan-custom-modal"]}
            bodyStyle={{height: '800px', overflowY: 'auto'}}
            onCancel={handleCancel}
            footer={[
                <Button
                    key={"close"}
                    style={CLOSE_BTN_STYLE}
                        onClick={handleCancel}
                >关闭</Button>,
                <Button
                    key={"confirm"}
                    style={CONFIRM_BTN_STYLE}
                        onClick={handleOk}
                >确认</Button>
            ]}
        >
 
</Modal>
</>

Vue Ant Design Modal

<template>
  <main>
    <a-modal
      title="我的订阅"
      v-model:visible="open"
      @ok="handleOk"
      @cancel="handleCancel"
      :destroyOnClose="true"
      >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </main>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const open = ref<boolean>(false);
 
const showModal = () => {
  open.value = true
}
 
const handleOk = (e: MouseEvent) => {
  console.log(e)
  open.value = false
}
 
const handleCancel = () => {
  open.value = false
}
 
defineExpose({
  showModal
})
</script>