uni-app:模态框的实现(弹窗实现)

效果图

代码

标签

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

注:

@click="showModal = true"

这段代码的意思是在按钮被点击时,通过将 showModal 的值设置为 true 来显示模态框。

在上面的代码示例中,我们使用了 Vue.js 的事件绑定语法 @click 来监听按钮的点击事件。showModal = true 是在按钮点击时执行的操作,它将 showModal 的值设为 true,从而触发显示模态框。这样,当用户点击按钮时,模态框将会显示出来。

样式 

<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下的第一个viewview:first-child{padding:30rpx;font-size:60rpx;font-weight:bold;font-family:'宋体';}//modal-content下的第二个viewview: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>

解析

在 HTML 部分:

  • 使用 button 元素作为触发显示模态框的按钮。
  • 使用 v-if 指令来决定是否显示模态框。
  • 模态框组件使用 view 元素包裹,并设置相应的样式。

在 JavaScript 部分:

  • data 函数返回了组件的初始状态,其中包括一个控制是否显示模态框的变量 showModal,以及模态框的标题和内容。
  • handleConfirm 和 handleCancel 方法分别用于处理确认按钮和取消按钮的点击事件,在这些方法中可以执行需要的操作。
  • 在这个例子中,点击确认或取消按钮后,通过将 showModal 设置为 false 来关闭模态框。

在样式部分:

  • 使用 scoped 关键字将样式限定在组件范围内。
  • .modal 类设置遮罩层的样式,使其覆盖整个页面,并使用 Flex 布局将内容垂直居中。
  • .modal-content 类设置模态框的样式,包括背景颜色、宽度和高度等。
  • .modal-buttons 类设置按钮的样式,包括使其位于模态框底部,并使用 Flex 布局将按钮撑满整个宽度
  • 第一个按钮使用 #74bfe7 背景色和白色文字,表示确认操作
  • 第二个按钮使用 #74bfe7 边框和白色背景色,表示取消操作。

完整代码 

<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下的第一个viewview:first-child{padding:30rpx;font-size:60rpx;font-weight:bold;font-family:'宋体';}//modal-content下的第二个viewview: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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/11543.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索APP开发的新趋势:人工智能和大数据的力量

随着5G技术的不断发展&#xff0c;人工智能和大数据将会更加广泛的应用于我们生活和工作中&#xff0c;作为 APP开发公司&#xff0c;应该及时的对新技术进行研发&#xff0c;进而更好的为用户服务。目前 APP开发已经不是传统的软件开发了&#xff0c;而是向移动互联网转型&…

iPhone 开机停留在苹果logo画面(已解决)

一、问题 如下图&#xff0c;开不了机&#xff1a; 标题 二、根因 存储空间满了。 三、解决方法 方法一 用苹果数据线&#xff08;最好是原装&#xff09;连接Mac电脑&#xff0c;在装有 macOS Catalina 10.15 或更高版本的 Mac 上&#xff0c;打开“访达”。在装有 macOS…

六、代理模式

文章目录 一、代理模式1、代理模式的好处和缺点1.1 代理模式理解加深 一、代理模式 为什么要学习代理模式&#xff1f; 代理模式是Spring AOP 以及 Spring MVC 的底层&#xff01;&#xff01;并且还是 JAVA 的23种设计模式之一&#xff01;&#xff01; 代理模式的分类&#…

opencv-27 阈值处理 cv2.threshold()

怎么理解阈值处理? 阈值处理&#xff08;Thresholding&#xff09;是一种常用的图像处理技术&#xff0c;在机器学习和计算机视觉中经常被用于二值化图像或二分类任务。它基于设定一个阈值来将像素值进行分类&#xff0c;将像素值大于或小于阈值的部分分为两个不同的类别&…

从Web2到Web3:区块链技术的未来前景

随着互联网的发展&#xff0c;Web1.0、Web2.0 和 Web3.0 成为了人们口中津津乐道的话题。那么&#xff0c;这三种网络时代究竟有什么区别呢&#xff1f; Web1.0 是一个只读的时代&#xff0c;那个时候&#xff0c;用户只能浏览网页&#xff0c;无法进行互动和创作。Web2.0 则是…

php-golang-jsonrpc2.0 rpc-codec/jsonrpc2和tivoka/tivoka实践

golang代码&#xff1a; package main import ( "context" "net" "net/rpc" "github.com/powerman/rpc-codec/jsonrpc2" ) type App struct{} type Res struct { Code int json:"code" Msg string json:"msg&quo…

系列二、RocketMQ简介

一、概述 RocketMQ是一款阿里巴巴开源的消息中间件。2016年11月28日&#xff0c;阿里巴巴向Apache软件基金会捐赠RabbitMQ&#xff0c;成为Apache孵化项目。2017年9月25日&#xff0c;Apache宣布RocketMQ孵化成为Apache顶级项目&#xff08;TLP&#xff09;&#xff0c;成为国内…

树莓派微型web服务器——阶段设计报告

文章目录 1. 需求分析1.1 功能需求1.1.1 访问需求1.1.2 自定义域名需求1.1.3 下载公共文件需求1.1.4 用户体验需求 1.2 技术需求1.2.1 操作系统指令1.2.2 技术栈1.2.3 内网穿透 1.3 性能需求1.3.1 处理能力1.3.2 内存1.3.3 存储空间 2. 可行性分析2.1 硬件方面2.2 软件方面 3. …

[Tools: Camera Conventions] NeRF中的相机矩阵估计

参考&#xff1a;NeRF代码解读-相机参数与坐标系变换 - 知乎 在NeRF中&#xff0c;一个重要的步骤是确定射线&#xff08;rays&#xff09;的初始点和方向。根据射线的初始点和方向&#xff0c;和设定射线深度和采样点数量&#xff0c;可以估计该射线成像的像素值。估计得到的…

flutter:animate_do(flutter中的Animate.css)

简介 做过web开发的应该大部分人都知道Animate.css&#xff0c;它为开发者提供了一系列预定义的动画效果&#xff0c;可以通过简单的CSS类来实现各种动画效果。而animate_do 相当于flutter中的Animate.css,它提供了很多定义好的动画效果 基本使用 官方地址 https://pub-web.…

如何启用路由器dhcp?快解析如何内网穿透?

一、什么是DHCP&#xff1f; 动态主机设置协议&#xff08;DHCP&#xff09;是一种使网络管理员能够集中管理和自动分配 IP 网络地址的通信协议。在网络中&#xff0c;每个联网设备都需要分配独有的 IP 地址。并当有新计算机移到网络中的其它位置时&#xff0c;能自动收到新的…

数据结构之常见排序算法

文章目录 1.排序概念2.10种排序比较3.排序算法3.1直接插入排序&#xff08;元素越有序&#xff0c;越高效&#xff09;3.2希尔排序序( 缩小增量排序 )3.3直接选择排序3.5堆排序3.6冒泡排序3.8快速排序 递归实现&#xff08;无序使用最好&#xff09;3.8.1挖坑法 &#xff08;建…

我的第一个后端项目(环境搭建,Springboot项目,运行,接口验证)

一. 安装Java开发工具包&#xff08;JDK&#xff09;&#xff1a; 访问Java Software | OracleOracle官方网站&#xff0c;下载适合你操作系统的最新版本的JDK。安装JDK并设置好JAVA_HOME环境变量。 二. 安装集成开发环境&#xff08;IDE&#xff09;&#xff1a; 推荐使用In…

全方位对比 Postgres 和 MongoDB (2023 版)

本文为「数据库全方位对比系列」第二篇&#xff0c;该系列的首部作品为「全方位对比 Postgres 和 MySQL (2023 版)」 为何对比 Postgres 和 MongoDB 根据 2023 年 Stack Overflow 调研&#xff0c;Postgres 已经成为最受欢迎和渴望的数据库了。 MongoDB 曾连续 4 年 (2017 - …

【高级数据结构】树状数组

目录 树状数组1 &#xff08;单点修改&#xff0c;区间查询&#xff09; 树状数组1 &#xff08;单点修改&#xff0c;区间查询&#xff09; 洛谷&#xff1a;树状数组1https://www.luogu.com.cn/problem/P3374 题目描述 如题&#xff0c;已知一个数列&#xff0c;你需要进行…

MySQL案例——多表查询以及嵌套查询

系列文章目录 MySQL笔记——表的修改查询相关的命令操作 MySQL笔记——MySQL数据库介绍以及在Linux里面安装MySQL数据库&#xff0c;对MySQL数据库的简单操作&#xff0c;MySQL的外接应用程序使用说明 文章目录 系列文章目录 前言 一 创建数据库 1.1 创建一个部门表 1.…

C++网络编程 TCP套接字基础知识,利用TCP套接字实现客户端-服务端通信

1. TCP 套接字编程流程 1.1 概念 流式套接字编程针对TCP协议通信&#xff0c;即是面向对象的通信&#xff0c;分为服务端和客户端两部分。 1.2 服务端编程流程&#xff1a; 1&#xff09;加载套接字库&#xff08;使用函数WSAStartup()&#xff09;&#xff0c;创建套接字&…

【Python机器学习】实验04(2) 机器学习应用实践--手动调参

文章目录 机器学习应用实践1.1 准备数据此处进行的调整为&#xff1a;要所有数据进行拆分 1.2 定义假设函数Sigmoid 函数 1.3 定义代价函数1.4 定义梯度下降算法gradient descent(梯度下降) 此处进行的调整为&#xff1a;采用train_x, train_y进行训练 1.5 绘制决策边界1.6 计算…

Spring AOP 中,切点有多少种定义方式?

在 Spring AOP 中&#xff0c;我们最常用的切点定义方式主要是两种&#xff1a; 使用 execution 进行无侵入拦截。使用注解进行拦截。 这应该是是小伙伴们日常工作中使用最多的两种切点定义方式了。但是除了这两种还有没有其他的呢&#xff1f;今天松哥就来和大家聊一聊这个话…

Linux-Shell

1.什么是Bash shell(壳) Bash Shell是一个命令解释器&#xff0c;它在操作系统的最外层&#xff0c;负责用户程序与内核进行交互操作的一种接口&#xff0c;将用户输入的命令翻译给操作系统&#xff0c;并将处理后的结果输出至屏幕。 通过xshell连接&#xff0c;就是打开了一…