uni-app: la realización de la caja modal (realización de ventana emergente)

representaciones

el código

Etiqueta

<template>
	<view>
		<!-- 按钮用于触发模态框的显示 -->
		<button @click="showModal = true">显示模态框</button>
		<!-- 模态框组件 -->
		<view class="modal" v-if="showModal">
			<view class="modal-content">
				<view>{
   
   { modalTitle }}</view>
				<view>{
   
   { modalContent }}</view>
				<view class="modal-buttons">
					<button @click="handleConfirm">确认</button>
					<button @click="handleCancel">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

Nota:

@click="mostrarModal = verdadero"

Lo que significa este código es mostrar el cuadro modal estableciendo showModalel valor de cuando se hace clic en el botón.true

En el ejemplo de código anterior, usamos la sintaxis de vinculación de eventos de Vue.js @clickpara escuchar el evento de clic del botón. showModal = truees la acción realizada cuando se hace clic en el botón, showModalestablece el valor de truepara activar la visualización del cuadro modal. De esta manera, cuando el usuario haga clic en el botón, se mostrará el cuadro modal.

estilo 

<style scoped lang="scss">
	/* 遮罩层 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* 窗口 */
	.modal-content {
		background-color: white;
		/* padding: 20px; */
		width: 600rpx;
		height: 800rpx;
		border-radius: 8rpx;
		position: relative;
		//modal-content下的第一个view
		view:first-child{
			padding:30rpx;
			font-size:60rpx;
			font-weight:bold;
			font-family:'宋体';
		}
		//modal-content下的第二个view
		view:nth-child(2){
			padding:40rpx;
			font-size:40rpx;
			color:red
		}
	}
	/* 按钮 */
	.modal-buttons {
		width: 100%;
		display: flex;
		bottom: 0;
		position: absolute;
	}
	.modal-buttons button {
		width: 100%;
		border: none;
	}
	.modal-buttons button:first-child {
		background-color: #74bfe7;
		color: #fff;
		border-radius: 0;
	}
	.modal-buttons button:last-child {
		width: 100%;
		border: 2rpx solid #74bfe7;
		border-radius: 0px;
		background-color: #fff;
		color: #74bfe7;
	}
</style>

js

<script>
	export default {
		data() {
			return {
				showModal: false,
				modalTitle: '模态框',
				modalContent: '内容'
			};
		},
		methods: {
			//确认
			handleConfirm() {
				// 处理模态框确认按钮点击事件
				// 可以在这个方法中执行你需要的操作
				this.showModal = false; // 关闭模态框
			},
			//取消
			handleCancel() {
				// 处理模态框取消按钮点击事件
				// 可以在这个方法中执行你需要的操作
				this.showModal = false; // 关闭模态框
			}
		}
	};
</script>

analizar

En la sección HTML:

• Use  button un elemento como un botón que activa el modal que se mostrará.
• Use  v-if directivas para decidir si mostrar el modal.
• Los componentes modales se  view envuelven con elementos y se les aplica el estilo correspondiente.

En la sección JavaScript:

• data La función devuelve el estado inicial del componente, que incluye una variable que controla si mostrar el cuadro modal  showModal, así como el título y el contenido del cuadro modal.
• handleConfirm Los  handleCancel métodos y se utilizan respectivamente para manejar los eventos de clic del botón de confirmación y el botón de cancelación, y las operaciones requeridas se pueden realizar en estos métodos.
• En este ejemplo, después de hacer clic en el botón confirmar o cancelar,   cierre el modal showModal configurando  .false

En la sección de estilos:

• Utilice  scoped palabras clave para aplicar estilos a los componentes.
• .modal La clase diseña la superposición para que cubra toda la página y utiliza un diseño flexible para centrar el contenido verticalmente.
• .modal-content Clase para establecer el estilo del cuadro modal, incluido el color de fondo, el ancho y el alto, etc.
• .modal-buttons class para aplicar estilo al botón, lo que incluye colocarlo en la parte inferior del cuadro modal y usar un diseño flexible para estirar el botón en todo su ancho
• El primer botón usa  #74bfe7 un color de fondo y texto blanco para confirmar la acción.
• El segundo botón usa  #74bfe7 un borde y un color de fondo blanco para indicar una operación de cancelación.

código completo 

<template>
	<view>
		<!-- 按钮用于触发模态框的显示 -->
		<button @click="showModal = true">显示模态框</button>
		<!-- 模态框组件 -->
		<view class="modal" v-if="showModal">
			<view class="modal-content">
				<view>{
   
   { modalTitle }}</view>
				<view>{
   
   { modalContent }}</view>
				<view class="modal-buttons">
					<button @click="handleConfirm">确认</button>
					<button @click="handleCancel">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showModal: false,
				modalTitle: '模态框',
				modalContent: '内容'
			};
		},
		methods: {
			//确认
			handleConfirm() {
				// 处理模态框确认按钮点击事件
				// 可以在这个方法中执行你需要的操作
				this.showModal = false; // 关闭模态框
			},
			//取消
			handleCancel() {
				// 处理模态框取消按钮点击事件
				// 可以在这个方法中执行你需要的操作
				this.showModal = false; // 关闭模态框
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 遮罩层 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 窗口 */
	.modal-content {
		background-color: white;
		/* padding: 20px; */
		width: 600rpx;
		height: 800rpx;
		border-radius: 8rpx;
		position: relative;
		//modal-content下的第一个view
		view:first-child{
			padding:30rpx;
			font-size:60rpx;
			font-weight:bold;
			font-family:'宋体';
		}
		//modal-content下的第二个view
		view:nth-child(2){
			padding:40rpx;
			font-size:40rpx;
			color:red
		}
	}
	/* 按钮 */
	.modal-buttons {
		width: 100%;
		display: flex;
		bottom: 0;
		position: absolute;
	}
	.modal-buttons button {
		width: 100%;
		border: none;
	}
	.modal-buttons button:first-child {
		background-color: #74bfe7;
		color: #fff;
		border-radius: 0;
	}
	.modal-buttons button:last-child {
		width: 100%;
		border: 2rpx solid #74bfe7;
		border-radius: 0px;
		background-color: #fff;
		color: #74bfe7;
	}
</style>