vue3封装一个通用的弹框事件函数

vue3封装一个通用的弹框事件函数

背景

在弹框的时候，我们总是要设置变量，去控制弹框的打开和关闭，要写很多的事件和很多变量名，那么封装一套弹框的事件，去控制，就要好很多

代码

import {reactive, toRefs} from 'vue';
export default function useDialog() {
	const state = reactive({
		modals: {},
	});
	function openModal(name) {
		state.modals[name] = true;
	}

	function closeModal(name) {
		state.modals[name] = false;
	}
	return {
		...toRefs(state),
		openModal,
		closeModal
	}
}

使用

• 引入

import useDialog from '../../../../coms/dialogState';
const { modals, openModal, closeModal } = useDialog();

<OrderDetail v-if="modals['orderDetail']" :ordersn="orderSn" @close="() => {
		closeModal('orderDetail');
		table.refresh();
	}"/>