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的重…...
3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...
Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下…...
