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>