《uni-app》模态弹窗代码案例, 模态弹窗，你的手机新宠

23 0

在 Uni-app 中，模态弹窗（Modal）通常用于显示信息、提示用户操作或收集用户输入。虽然 Uni-app 官方没有直接提供一个内置的模态弹窗组件，但你可以使用 uni.showModal API 来实现一个简单的模态弹窗功能，或者自己封装一个自定义的模态弹窗组件。

以下是使用 uni.showModal API 的示例代码：

javascript复制代码

	// 在某个页面的方法中调用
	uni.showModal({
	title: ‘提示’,
	content: ‘这是一个模态弹窗’,
	success: function (res) {
	if (res.confirm) {
	console.log(‘用户点击确定’);
	// 执行点击确定后的逻辑
	} elseif (res.cancel) {
	console.log(‘用户点击取消’);
	// 执行点击取消后的逻辑
	}
	}
	});

在这个示例中，title 属性用于设置弹窗的标题，content 属性用于设置弹窗的内容。success 回调函数中的参数 res 包含了用户点击确认或取消按钮的信息。

然而，如果你想要一个更自定义的模态弹窗，比如带有自定义按钮、输入框或其他复杂布局的弹窗，你可以考虑封装一个自定义组件。以下是一个简单的自定义模态弹窗组件的示例：

1. 创建模态弹窗组件（例如：components/Modal.vue）

vue复制代码

	<template>
	<view v-if=”visible” class=”modal-overlay” @click.self=”handleOverlayClick”>
	<view class=”modal-content” @click.stop>
	<view class=”modal-header”>
	<text>{{ title }}</text>
	<view class=”close-icon” @click=”handleClose”>×</view>
	</view>
	<view class=”modal-body”>
	<slot></slot> <!– 用于插入自定义内容 –>
	</view>
	<view class=”modal-footer”>
	<button @click=”handleConfirm”>确认</button>
	<button @click=”handleCancel”>取消</button>
	</view>
	</view>
	</view>
	</template>

	<script>
	export default {
	props: {
	visible: {
	type: Boolean,
	required: true
	},
	title: {
	type: String,
	default: ‘提示’
	}
	},
	methods: {
	handleOverlayClick() {
	this.$emit(‘update:visible’, false);
	},
	handleClose() {
	this.$emit(‘update:visible’, false);
	},
	handleConfirm() {
	this.$emit(‘confirm’);
	this.$emit(‘update:visible’, false);
	},
	handleCancel() {
	this.$emit(‘cancel’);
	this.$emit(‘update:visible’, false);
	}
	}
	};
	</script>

	<style scoped>
	.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.modal-content {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	width: 80%;
	max-width: 500px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	position: relative;
	}
	.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	}
	.close-icon {
	font-size: 20px;
	cursor: pointer;
	}
	.modal-body {
	/* 你可以根据需要自定义这里的样式 */
	}
	.modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
	}
	button {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	}
	</style>

2. 在页面中使用模态弹窗组件

vue复制代码

	<template>
	<view>
	<button @click=”showModal”>显示模态弹窗</button>
	<Modal :visible.sync=”modalVisible” @confirm=”handleConfirm” @cancel=”handleCancel”>
	<text>这是一个自定义内容的模态弹窗</text>
	</Modal>
	</view>
	</template>

	<script>
	import Modal from ‘@/components/Modal.vue’;

	export default {
	components: {
	Modal
	},
	data() {
	return {
	modalVisible: false
	};
	},
	methods: {
	showModal() {
	this.modalVisible = true;
	},
	handleConfirm() {
	console.log(‘用户点击确定’);
	},
	handleCancel() {
	console.log(‘用户点击取消’);
	}
	}
	};
	</script>