uni-app:实现右侧弹窗

效果:

代码:

<template><view class="container"><button @click="showModal = true">点击按钮</button><view class="modal-overlay" v-if="showModal" @click="closeModal"></view><view class="modal-container" :class="{ active: showModal }"><!-- 右侧弹窗的内容 --><view class="modal-content"><!-- 内容区域 --><text>这是右侧弹窗的内容</text></view></view></view>
</template><script>
export default {data() {return {showModal: false, // 控制弹窗显示与隐藏};},methods: {closeModal() {this.showModal = false;},},
};
</script><style>
.container {height: 100vh;display: flex;justify-content: center;align-items: center;
}.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 999;
}.modal-container {position: fixed;top: 0;right: -100%; /* 初始时隐藏弹窗 */width: 300px;height: 100%;background-color: #fff;z-index: 1000;transition: right 0.3s ease;
}.modal-container.active {right: 0; /* 显示弹窗 */
}.modal-content {padding: 20px;
}
</style>

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

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

相关文章

Django学习

1、启动项目 python manage.py runserversettings.py 视图函数&#xff0c;用于接收浏览器请求 Django使用的是MTV,是MVC是升级

通过nginx将https协议反向代理到http协议请求上

通过nginx将https协议反向代理到http协议请求上 1、问题背景2、介绍nginx的反向代理功能及配置https协议3、具体实现3.1 后端服务支持方式3.2 nginx重定向方式 3.3、nginx的反向代理方式4、关于nginx常用模块和指令 1、问题背景 目前一个系统仅支持https协议访问&#xff0c;因…

【Linux安装java环境】超简单,以jdk8为例

文章目录 前言详细步骤总结 前言 一些小伙伴在到手一台虚拟机后&#xff0c;发现需要配置java环境&#xff0c;看了文章后会发现超级简单&#xff0c;以下内容以安装jdk1.8为例。 详细步骤 查看是否存在java环境java -version若弹出找不到java命令&#xff0c;执行下一步。官…

linux并发服务器 —— IO多路复用(八)

半关闭、端口复用 半关闭只能实现数据单方向的传输&#xff1b;当TCP 接中A向 B 发送 FIN 请求关闭&#xff0c;另一端 B 回应ACK 之后 (A 端进入 FIN_WAIT_2 状态)&#xff0c;并没有立即发送 FIN 给 A&#xff0c;A 方处于半连接状态 (半开关)&#xff0c;此时 A 可以接收 B…

Java逻辑控制

目录 一、顺序结构 二、分支结构 1、if语句 &#xff08;1&#xff09; 语法格式1​编辑 &#xff08;2&#xff09;语法格式2​编辑 &#xff08;3&#xff09;语法格式3 2、switch 语句 三、循环结构 1、while循环 2、break 3、continue 4、for 循环 5、do whil…

实训笔记9.1

实训笔记9.1 9.1笔记一、项目开发流程一共分为七个阶段1.1 数据产生阶段1.2 数据采集存储阶段1.3 数据清洗预处理阶段1.4 数据统计分析阶段1.5 数据迁移导出阶段1.6 数据可视化阶段 二、项目的数据产生阶段三、项目的数据采集存储阶段四、项目数据清洗预处理的实现4.1 清洗预处…

MongoDB基础知识点

MongoDB基础知识点 1.MongoDB简介1.1基本信息1.2作用1.3下载 2.MongoDB安装1.Ubuntu22.042.Windows(非msi) 3.MongoDB基本操作1.基本概念2.MongoDB文件增删改查(CURD)1.插入数据2.查询数据3.修改数据4.删除数据5.删除字段 4.MongoDB实战管理系统数据库设计1.设计数据库2.Mongod…

企业架构LNMP学习笔记13

上线商城项目&#xff1a; 1&#xff09;上传项目文件到数据库&#xff1a; 入口文件位置的设计是为了让应用部署更安全&#xff0c;public目录为web可访问目录&#xff0c;其他的文件都可以放到非web访问目录下面。 nginx 默认访问index.html。没有index.html&#xff0c;就会…

宠物电商Chewy第二季度销售额28亿美元,同比增长14.3%

美国宠物电商Chewy公布2023年第二季度财报。报告显示&#xff0c;其Q2季度销售额同比增长14.3%至28亿美元&#xff0c;超出市场预期。 以下为Chewy期内业绩概要&#xff1a; 1.毛利率28.3%&#xff0c;同比增长20个基点 2.净利润有所收窄&#xff0c;同比下降15.2%至1890万美…

【深入解析spring cloud gateway】06 gateway源码简要分析

上一节做了一个很简单的示例&#xff0c;微服务通过注册到eureka上&#xff0c;然后网关通过服务发现访问到对应的微服务。本节将简单地对整个gateway请求转发过程做一个简单的分析。 一、核心流程 主要流程&#xff1a; Gateway Client向 Spring Cloud Gateway 发送请求请求…

客服部门都应该建立一个自有的在线FAQ系统

问答系统是目前应用最广泛的问答系统。这种问答系统的结构框架明了、实现简单、容易理解&#xff0c;非常适合作为问答系统入门学习时的观察对象。所以越来越多的企业需要建立一个自有的在线FAQ系统&#xff0c;这对对于客服部门来说是非常有益的。 企业需要搭建自己FAQ系统的理…

【Linux】Ubuntu20.04版本配置pytorch环境2023.09.05【教程】

【Linux】Ubuntu20.04版本配置pytorch环境2023.09.05【教程】 文章目录 【Linux】Ubuntu20.04版本配置pytorch环境2023.09.05【教程】一、安装Anaconda虚拟环境管理器二、创建虚拟环境并激活三、安装Pytorch四、测试pytorchReference 一、安装Anaconda虚拟环境管理器 首先进入…

LeetCode(力扣)216. 组合总和 IIIPython

LeetCode216. 组合总和 III 题目链接代码 题目链接 https://leetcode.cn/problems/combination-sum-iii/ 代码 class Solution:def combinationSum3(self, k: int, n: int) -> List[List[int]]:result[]self.backtracking(n, k, 0, 1, [], result)return resultdef back…

多个pdf怎么合并在一起?跟着我的步骤一起合并

多个pdf怎么合并在一起&#xff1f;利用PDF文档合并功能可以帮助您更有效地管理文件&#xff0c;将多个相关文件整合成一个文件&#xff0c;避免分散在多个文件中。此外&#xff0c;合并后的文件更便于共享和传输&#xff0c;因为只需共享一个文件而不是多个文件。虽然合并文件…

900. RLE 迭代器

900. RLE 迭代器 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; 900. RLE 迭代器 https://leetcode.cn/problems/rle-iterator/description/ 完成情况&#xff1a; 解题思路&#xff1a; //int next(int n) 以这…

git: ‘lfs‘ is not a git command unclear

首先可以尝试 git lfs install 是否可以&#xff0c;不可以后就看这个连接&#xff1a;https://stackoverflow.com/questions/48734119/git-lfs-is-not-a-git-command-unclear。 我的是ubuntu&#xff0c;所以&#xff1a; git-lfs requires git version 1.8.3.1 or later. Yo…

webpack打包

文章目录 一、什么是webpack二、使用步骤1.创建一个新的文件夹,并将其初始化2.在当前目录下安装webpack以及webpack-cli3.配置webpack自定义命令,使之生效4.运行自定义命令,打包webpack5.打包成功之后会将内容打包到dist文件夹下6.配置webpack1)修改webpack打包入口和出口2)配置…

pip install mysqlclient报错

安装mysqlclient时报错 先查看安装的python版本 python -V 根据版本下载下载对应的 mysqlclient 文件 https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclienthttps://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient 我的是3.7版本的 就下载3.7版本&#xff0c;64位系…

自然语言处理(八):预训练BERT

来自Transformers的双向编码器表示&#xff08;BERT&#xff09; BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是一种预训练的自然语言处理模型&#xff0c;由Google于2018年提出。它是基于Transformer模型架构的深度双向&#xff0…

CSS中如何实现文字跑马灯效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 跑马灯⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋…