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>
相关文章:
uni-app:模态框的实现(弹窗实现)
效果图 代码 标签 <template><view><!-- 按钮用于触发模态框的显示 --><button click"showModal true">显示模态框</button><!-- 模态框组件 --><view class"modal" v-if"showModal"><view cla…...
第九章:stack类
系列文章目录 文章目录 系列文章目录前言stack的介绍stack的使用成员函数使用stack 总结 前言 stack是容器适配器,底层封装了STL容器。 stack的介绍 stack的文档介绍 stack是一种容器适配器,专门用在具有后进先出操作的上下文环境中,其删除…...
FSM:Full Surround Monodepth from Multiple Cameras
参考代码:None 介绍 深度估计任务作为基础环境感知任务,在基础上构建的3D感知才能更加准确,并且泛化能力更强。单目的自监督深度估计已经有MonoDepth、ManyDepth这些经典深度估计模型了,而这篇文章是对多目自监督深度估计进行探…...
idea 安装 插件jrebel 报错LS client not configured.
这个报错找了好久,有博主说版本不对,我脑子没反应过来以为是随便换一个低版本的就行,没想到只能是2022.4.1 这个版本才行 一定要用jrebel 2022.4.1的插件版本!!!!! 插件下载地址&…...
Raki的读paper小记:RWKV: Reinventing RNNs for the Transformer Era
Abstract&Introduction&Related Work 研究任务 基础模型架构已有方法和相关工作 RNN,CNN,Transformer稀疏注意力(Beltagy等人,2020年;Kitaev等人,2020年;Guo等人,2022年&am…...
PaddleOCR #PP-OCR常见异常扫雷
异常一:ModuleNotFoundError: No module named ‘tools.infer’ 实验案例: PaddleOCR #使用PaddleOCR进行光学字符识别(PP-OCR文本检测识别) 参考代码: 图片文本检测实验时,运行代码出现异常:M…...
Qt加载字体文件
本文记录如何使用 Qt 加载外部字体文件,并遍历字体名称和样式名称。 bool LoadFont(const QString& fontPath) {const int fontId QFontDatabase::addApplicationFont(fontPath);if (fontId -1) {return false;}// 遍历字体名和样式名 #if QT_VERSION > QT…...
3ds MAX绘制简单动画
建立一个长方体和茶壶: 在界面右下角点击时间配置: 这是动画制作的必要步骤 选择【自动】,接下来,我们只要在对应的帧改变窗口中图形的位置,就能自动记录该时刻的模样 这就意味着,我们通过电脑记录某几个…...
页面访问控制远程仓库
页面访问权限控制 什么是jwt身份认证 在前后端分离模式的开发中,服务器如何知道来访者的身份呢? 在登录后,服务器会响应给用户一个 令牌 (token)令牌中会包括该用户的id等唯一标识浏览器收到令牌后,自己…...
小程序 user agent stylesheet 覆盖了page下wxss背景色
如下图: login页面的page下的背景色,被:user agent stylesheet覆盖。 分析与解决: 1、user agent stylesheet是浏览器默认样式表,是浏览器默认样式。 2、不同浏览器的默认样式不同个,甚至同种浏览器不同版…...
Vue.js高阶学习和常用知识(二)
目录 1. Vue 实例2. 组件3. 指令4. 计算属性5. 监听器6. 生命周期钩子 Vue.js 是一个流行的 Web 前端框架,它由 Evan You 于 2014 年创建。Vue.js 的设计目标是简单、灵活和易于使用,同时具有高性能和可扩展性。 Vue.js 基于组件化的思想,将页…...
html实现蜂窝菜单
效果图 CSS样式 keyframes _fade-in_mkmxd_1 {0% {filter: blur(20px);opacity: 0}to {filter: none;opacity: 1} } keyframes _drop-in_mkmxd_1 {0% {transform: var(--transform) translateY(-100px) translateZ(400px)}to {transform: var(--transform)} } ._examples_mkmx…...
云原生训练营课程大纲
第一部分:Go 语****言基础 模块一:Go 语言特性 教学目标: 理解 Go 语言基本语法 理解 Go 语言常用数据类型 理解 Go 语言常用小技巧 深入理解 Go 语言的多线程编程 针对的用户痛点: 云原生从业者因为未熟练掌握 Go 语言&#…...
【Ajax】笔记-同源策略
同源策略(Same-Origin Policy),是浏览器的一种安全策略 同源(即url相同):协议、域名、端口号 必须完全相同。(请求是来自同一个服务) 跨域:违背了同源策略,即跨域。 ajax请求是遵循…...
Java使用FFmpeg实现mp4转m3u8
Java使用FFmpeg实现mp4转m3u8 前言FFmpegM3U8 一、需求及思路分析二、安装FFmpeg1.windows下安装FFmpeg2.linux下安装FFmpegUbuntuCentOS 三、代码实现1.引入依赖2.修改配置文件3.工具类4.Controlle调用5.Url转换MultipartFile的工具类 四、播放测试1.html2.nginx配置3.效果展示…...
【JavaEE初阶】Servlet (三)MessageWall
在我们之前博客中写到的留言墙页面,有很严重的问题:(留言墙博客) 如果刷新页面/关闭页面重开,之前输入的消息就不见了.如果一个机器上输入了数据,第二个机器上是看不到的. 针对以上问题,我们的解决思如如下: 让服务器来存储用户提交的数据,由服务器保存. 当有新的浏览器打开页…...
D. Make It Round
在Berlandia发生了通货膨胀,所以商店需要改变商品的价格。 商品n的当前价格已经给出。允许将该商品的价格提高k倍,1≤k≤m,k为整数。输出商品的最圆的可能的新价格。也就是在最后有最大数量的零的那个。 例如,数字481000比数字1…...
Python网站页面开发HTML总结
Python网站页面开发HTML总结 一、HTML基础语法 1.HTML是什么? ●HTML是HyperText Mark-up Language的首字母简写,即超文本标记语言。 ●HTML不是一种编程语言,而是一种标记语言。 ●超文本指的是超链接,标记指的是标签…...
[个人笔记] vCenter设置时区和NTP同步
VMware虚拟化 - 运维篇 第三章 vCenter设置时区和NTP同步 VMware虚拟化 - 运维篇系列文章回顾vCenter设置时区和NTP同步(附加)ESXi设置alias参考链接 系列文章回顾 第一章 vCenter给虚机添加RDM磁盘 第二章 vCenter回收活跃虚拟机的剩余可用空间 vCente…...
(原创)Flutter与Native通信的方式:EventChannel和BasicMessageChannel
前言 上一篇博客主要介绍了MethodChannel的使用方式 Flutter与Native通信的方式:MethodChannel 这篇博客接着讲另外两种通信方式 EventChannel和BasicMessageChannel EventChannel用于从native向flutter发送通知事件,例如flutter通过其监听Android的重…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
