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的重…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
