Vue3、AntDesignModal、useModal.js封装组件

• useModal.js

import { nextTick, ref } from 'vue'
import {isFunction} from "lodash-es";

export function useModal() {
	const visible = ref(false)
	const loading = ref(false)

	const showModal = () => {
		visible.value = true
	}

	const toggleLoading = () => {
		loading.value = !loading.value
	}

	// deprecated
	const handleOk = async (callbackFn) => {
		if (!callbackFn || isFunction(callbackFn) ) return
		toggleLoading()
		callbackFn(() => {
			toggleLoading();
			hideModal();
		})
	}

	// deprecated
	const hideModal = (callbackFn) => {
		console.log('output-> callbackFn ', callbackFn)
		if (callbackFn || isFunction(callbackFn) ) {
			callbackFn()
		}
		visible.value = false
	}

	return {
		visible,
		showModal,
		hideModal,
		handleOk,
		loading,
		toggleLoading
	}
}

• BaseModal.vue

<template>
	<div>
		<a-modal :visible="props.visible"
						 :title="props.title"
						 @cancel="props.onCancel"
						 :footer="null"
		>
			<slot name="content"></slot>

			<slot name="footer">

			</slot>
		</a-modal>
	</div>
</template>
<script setup>
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	loading: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: ''
	},
	onOk: {
		type: Function,
		default: () => {
		}
	},
	onCancel: {
		type: Function,
		default: () => {

		}
	}
})


</script>

• 案例 基于BaseModal的业务Modal

<template>
	<div>
		<BaseModal
			:visible="visible"
			:loading="loading"
			:on-ok="okCallbackFn"
			:on-cancel="cancelCallbackFn"
			:title="null"
			:footer="null"
		>
			<template v-slot:content>
				<main class="hz-callback-box">
					<img src="@/assets/feedback/over-icon.svg" alt="" />
					<div>是否结束此次反馈？</div>
				</main>
			</template>
			<template v-slot:footer>
				<div class="hz-btn-group">
					<a-button key="back" @click="cancelCallbackFn" style="margin-right: 12px">取消</a-button>
					<a-button key="submit"
										type="primary"
										@click="okCallbackFn"
										:loading="loading"
					>确定
					</a-button>
				</div>
			</template>
		</BaseModal>
	</div>
</template>

<script setup>

import { useModal } from '@/hooks/useModalPlus.js'
import BaseModal from '@/views/Manage/FeedbackManage/components/BaseModal.vue'

let { visible, loading, handleOk, hideModal, showModal } = useModal()

const emits = defineEmits()
defineExpose({
	showModal,
	hideModal
})

const okCallbackFn = () => {
	emits('emitOverFeedback', {loading, visible})
}

const cancelCallbackFn = () => {
	console.log('output-> hide')
	visible.value = false
}
</script>

<style lang="scss" scoped>
.hz-callback-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	img {
		width: 108px;
		height: 108px;
	}

	div {
		font-size: 16px;
		color: rgba(255, 255, 255, 1);
		margin-top: 18px;
	}
}

.hz-btn-group {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
</style>

• 使用基于BaseModal的业务Modal

<template>
<OverFeedbackModal ref="overFeedbackRef"/>

const overFeedbackRef = ref(null)

const onShowModal = () => {
	overFeedbackRef.value.showModal()
}
const onHideModal = () => {
	overFeedbackRef.value.hideModal()
}
</template

<script setup>

</script>