uni-app: a realização da caixa modal (realização da janela pop-up)

renderizações

o código

Rótulo

<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>

Observação:

@click="mostrarModal = verdadeiro"

O que esse código significa é mostrar a caixa modal definindo showModalo valor de to quando o botão é clicado.true

No exemplo de código acima, usamos a sintaxe de ligação de evento Vue.js @clickpara ouvir o evento click do botão. showModal = trueé a ação executada quando o botão é clicado, showModaldefine o valor de truepara acionar a exibição da caixa modal. Desta forma, quando o usuário clicar no botão, a caixa modal será mostrada.

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>

analisar

Na seção HTML:

• Use  button um elemento como um botão que aciona o modal a ser mostrado.
• Use  v-if diretivas para decidir se deve mostrar o modal.
• Os componentes modais são  view agrupados com elementos e estilizados de acordo.

Na seção JavaScript:

• data A função retorna o estado inicial do componente, que inclui uma variável que controla se a caixa modal deve ser exibida  showModal, bem como o título e o conteúdo da caixa modal.
• handleConfirm Os  handleCancel métodos e são usados ​​respectivamente para manipular os eventos de clique do botão de confirmação e do botão de cancelamento, e as operações necessárias podem ser executadas nesses métodos.
• Neste exemplo, após clicar no botão confirmar ou cancelar,   feche o modal showModal configurando para  .false

Na seção de estilos:

• Use  scoped palavras-chave para definir estilos de componentes.
• .modal A classe estiliza a sobreposição de forma que cubra toda a página e usa layout flexível para centralizar o conteúdo verticalmente.
• .modal-content Classe para definir o estilo da caixa modal, incluindo cor de fundo, largura e altura, etc.
• .modal-buttons class para estilizar o botão, incluindo colocá-lo na parte inferior da caixa modal e usar um layout flexível para esticar o botão em sua largura total
• O primeiro botão usa  #74bfe7 uma cor de fundo e texto branco para confirmar a ação
• O segundo botão usa  #74bfe7 uma borda e uma cor de fundo branca para indicar uma operação de cancelamento.

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>