NN2025081602/addons/min-exam/components/showModal.vue

<template>
	<view class="uv-new-modal">
		<uv-modal ref="modal" :class="className" v-model:show="show" :title="params.title"
			:confirmText="params.confirmText" :cancelText="params.cancelText"
			:showConfirmButton="params.showConfirmButton" :showCancelButton="params.showCancelButton"
			:confirmColor="params.confirmColor" :cancelColor="params.cancelColor" :duration="params.duration||3000"
			:asyncClose="params.asyncClose" :buttonReverse="params.buttonReverse"
			:closeOnClickOverlay="params.closeOnClickOverlay" :confirmButtonShape="params.confirmButtonShape"
			@confirm="confirm" @cancel="cancel">
			<view class="slot-content">
				<view class="content">
					{{params.content}}
				</view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		name: "uv-new-modal",
		data() {
			return {
				show: false,
				className: 'show-modal',
				params: {
					title: '提示',
					content: '',
					confirmText: '确认',
					cancelText: '取消',
					showConfirmButton: true,
					showCancelButton: false,
					confirmColor: '#15B3B2',
					cancelColor: '#606266',
					duration: 0,
					buttonReverse: false,
					asyncClose: false,
					closeOnClickOverlay: false,
					confirmButtonShape: '',
				}
			};
		},
		methods: {
			open(params) {

				this.params = Object.assign({}, this.params, params)
				//console.log(this.params);

				this.show = true;
				// this.$refs.modal.close();
				this.$refs.modal.open();
			},
			close() {
				this.show = false;
				this.$refs.modal.close();
			},
			confirm(e) {
				if (typeof(this.params.confirm) != 'undefined') {
					this.params.confirm(e);
				}
				this.$emit('confirm', e);
				this.$refs.modal.close();
			},
			cancel(e) {
				this.$refs.modal.close();
				if (typeof(this.params.cancel) != 'undefined') {
					this.params.cancel(e);
				}
				this.$emit('cancel', e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uv-new-modal {
		.slot-content {
			text-align: center;
			color: #999;
			padding: 1rem 0;
		}

		.uv-popup {
			color: #13caca;

			::v-deep .uv-modal {
				border-radius: .5rem;

				.uv-modal__button-group {
					height: auto;

					::v-deep .uv-modal__button-group__wrapper--confirm {
						background: linear-gradient(to right, #13caca, #15B3B2);
						color: #fff;
						margin: .75rem 1.75rem .75rem .875rem;
						border-radius: 2rem;

						.uv-modal__button-group__wrapper__text {
							color: #fff !important;
						}
					}

					.uv-modal__button-group__wrapper--cancel {
						border: 1px solid var(--text-color);
						background-color: transparent;
						color: var(--text-color);
						margin: .75rem .875rem .75rem 1.75rem;
						border-radius: 2rem;

						.uv-modal__button-group__wrapper__text {
							color: var(--text-color) !important;
						}
					}

					.uv-modal__button-group__wrapper--only-confirm {
						background: linear-gradient(to right, #13caca, #15B3B2);
						color: #fff;
						margin: .75rem 1.75rem;
						border-radius: 2rem;

						.uv-modal__button-group__wrapper__text {
							color: #fff !important;
						}
					}
				}
			}


		}



	}
</style>