yizhizan-h5/components/c-modal.vue

<template>
	<u-modal
		v-model="visible"
		:show-confirm-button="false"
		:show-cancel-button="false"
		:show-title="false"
		:mask-close-able="maskCloseAble"
		@close="handleClose"
	>
		<view class="modal-container">
			<view class="wrapper">
				<view class="title" v-if="showTitle">{{ title }}</view>
				<view class="content">
					<slot></slot>
				</view>
			</view>
			
			<view class="buttons flex align-center justify-between">
				<view class="button cancel-button" v-if="showCancelButton" @click="handleCancel">{{ cancelButtonText }}</view>
				<view class="button confirm-button" v-if="showConfirmButton" @click="handleConfirm">{{ confirmButtonText }}</view>
			</view>
		</view>		
	</u-modal>
</template>

<script>
	export default {
		name:"c-modal",
		props: {
			value: {
				type: Boolean,
				default: false
			},
			confirmButtonText: {
				type: String,
				default: '确定'
			},
			cancelButtonText: {
				type: String,
				default: '取消'
			},
			showConfirmButton: {
				type: Boolean,
				default: true
			},
			showCancelButton: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: '提示'
			},
			showTitle: {
				type: Boolean,
				default: true
			},
			maskCloseAble: {
				type: Boolean,
				default: false
			}
		},
		computed: {
		    // 处理 v-model 双向绑定
		    visible: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit("input", val);
				}
		    }
		},
		data() {
			return {};
		},
		methods: {
			handleCancel() {
				this.$emit('cancel')
			},
			handleConfirm() {
				this.$emit('confirm')
			},
			handleClose() {
				// 只有在mask-close-able未true时，点击遮罩才生效
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-container {
		font-family: DM Sans;
		padding: 38rpx 40rpx 28rpx;
		
		.wrapper {
			.title {
				color: rgba(31, 44, 55, 1);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 44rpx;
				margin-bottom: 16rpx;
			}
			.content {
				color: rgba(158, 158, 158, 1);
				font-size: 28rpx;
				font-weight: 400;
				line-height: 36rpx;
				min-height: 120rpx;
				margin-bottom: 40rpx;
			}
		}
		
		.buttons {
			gap: 16rpx;
			.button {
				flex: 1;
				height: 80rpx;
				border-radius: 80rpx;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 80rpx;
				text-align: center;
			}
			.cancel-button {
				color: rgba(1, 107, 246, 1);
				background: rgba(1, 107, 246, 0.1);
			}
			.confirm-button {
				color: #fff;
				background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
			}
		}
	}
</style>