supervision-uniapp/components/modal.vue

<template>
	<view class="wrapper" v-if="show">
		<view class="modal-container">
			<view class="modal-body">
				<view class="model-title">{{ title }}</view>
				<view>
					<uni-forms ref="formRef" :modelValue="formData" :rules="rules">
						<uni-forms-item name="value">
							<uni-easyinput type="textarea" :placeholder="placeholderText" v-model="formData.value" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
			<view class="footer col-24 flex gap-8">
				<button class="col-12" @tap="close">取消</button>
				<button :type="confirmType" @tap="confirm" class="col-12">{{ confirmText }}</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, defineProps, defineEmits, defineExpose } from 'vue'
	
	const props = defineProps({
		title: {
			type: String,
			default: '温馨提示'
		},
		placeholderText: {
			type: String,
			default: ''
		},
		confirmText: {
			type: String,
			default: '提交'
		},
		confirmType: {
			type: String,
			default: 'primary'
		}
	})
	const emit = defineEmits(['confirm'])
	
	const formData = ref({});
	const rules = {
		value: {
			rules: [{
				required: true,
				errorMessage: props.placeholderText,
			}]
		},
	}
	const formRef = ref()
	const show = ref(false)
	
	function confirm() {
		formRef.value.validate().then(res => {
			emit('confirm', formData.value.value)
			close()
		})
	}
	
	function open() {
		show.value = true
	}
	
	function close() {
		show.value = false
	}
	
	defineExpose({
	    open,
		close
	});
</script>

<style lang="scss" scoped>
	.wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		.modal-container {
			background-color: #fff;
			border-radius: 16rpx;
			width: 80vw;
			.modal-body {
				padding: 24rpx 24rpx 0 24rpx;
				.model-title {
					font-size: 18px;
					font-weight: bold;
					line-height: 50rpx;
					text-align: center;
					margin-bottom: 12rpx;
				}
			}
			.footer {
				position: static;
				padding-top: 0;
			}
		}
	}
</style>