当多个使用弹窗类组件,可使用这种方式封装组件。(以下使用antd-vue、vue3)
1.代码
点击查看代码
<template>
<slot :openDialog="openDialog" :closDialog="modalCancel"></slot>
<a-modal v-model:open="open" title="Basic Modal" @cancel="modalCancel">
<template #footer>
<a-button type="primary" @click="modalComfirm">确定</a-button>
<a-button @click="modalCancel">取消</a-button>
</template>
</a-modal>
</template>
<script lang="ts" setup name="modalComponent">
import { ref } from 'vue';
// 弹窗
const open = ref(false);
const openDialog = () => {
open.value = true;
};
const modalCancel = () => {
open.value = false;
};
const modalComfirm = () => {
open.value = false;
};
</script>
<style lang="less" scoped></style>
2.使用方式
点击查看代码
<modalBtn>
<template #default='{ openDialog }'>
<button @click='openDialog'>操作按钮</button>
</template>
</modalBtn>