点击旋转箭头样式

实现效果:

html界面,主要通过isdown来控制箭头是上还是下

 <el-popoverplacement="bottom"trigger="click":visible-arrow="false"v-model="isdown"popper-class="user-popover"><divslot="reference"class="user-content"><el-imageclass="user-content-icon ":class="[isdown?'down':'expand ']"style="width: 14px; height: 14px;":src="require('@/assets/images/icon-down.png')"/></div><ul class="user-list"><li>退出登录</li></ul></el-popover>
<script>
import { ref } from 'vue'
const isdown=ref(false)return {isdown}</script>

scss

<style scoped lang="scss">
.user {.down {transition: all 0.3s;transform: rotate(180deg);transform-origin: center;}.expand {transition: all 0.3s;transform: translate(0, 2px) rotate(0deg);transform-origin: center;}
}
</style>

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

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

相关文章

热点观察 | 全球社交应用IAP收入持续上升,小游戏、短剧出海赛道火热!

2024年进度条即将过半&#xff0c;回顾上半年&#xff0c;“Sora横空出世”、“短剧出海”、“小游戏爆款不断"给了我们太多惊喜&#xff0c;虽说如今市场竞争激烈、行业日趋饱和&#xff0c;但新技术、新需求也在快速跟上。下面&#xff0c;我们就来盘一盘近期全球手游和…

【数据库】数据库脚本编写规范(Word原件)

编写本文档的目的是保证在开发过程中产出高效、格式统一、易阅读、易维护的SQL代码。 1 编写目的 2 SQL书写规范 3 SQL编写原则 软件全套资料获取进主页或者本文末个人名片直接获取。

Linux常用命令(15)—grepsed命令(有相关截图)

写在前面&#xff1a; 最近在学习Linux命令&#xff0c;记录一下学习Linux常用命令的过程&#xff0c;方便以后复习。仅供参考&#xff0c;若有不当的地方&#xff0c;恳请指正。如果对你有帮助&#xff0c;欢迎点赞&#xff0c;关注&#xff0c;收藏&#xff0c;评论&#xf…

常见调试器介绍

目录 常见调试器 1.1 ST-Link 1.2 DAPLink 1.3 JLink 常见调试器 市面上有很多的调试器&#xff0c;下面是大家比较常见的一些调试器&#xff0c; 比如&#xff1a;ST-Link、DAPLink、JLink、Ulink等 1.1 ST-Link ST-Link是一种用于STM8及STM32系列单片机的调试器和下载…

在线预览多类型文件_全栈

目录 一、下载运行项目 二、项目功能 三、前端项目引用 四、文件预览样式更改 在做项目时经常用到在线预览文件&#xff0c;给大家介绍一个好用的在线预览文件项目。使用技术是后端Java&#xff0c;前端Freemarker模板。 FreeMarker 特别适应与 MVC 模式的 Web 应用&#x…

Python --- 如何修改Jupyter Notebook保存文件的路径?

如何修改Jupyter Notebook在本地保存文件的默认路径&#xff1f; 一直以来都比较喜欢jupter notebook&#xff0c;自从用了以后就爱上了。平时用的时候&#xff0c;因为大多都是临时调用&#xff0c;每次在界面里直接new一个新的file就开干。 曾经也想过我创建的这些python文件…

【arm扩容】新硬盘挂载操作说明

背景&#xff1a; 未经过扩容的arm设备不满足移植大镜像的条件。 需求&#xff1a; 我们要对arm设备扩容&#xff0c;现在要将一个500G的硬盘挂进去。而且要按照老arm设备的挂法&#xff0c;保持相同的目录结构。配置这台机器。 下面老arm设备的硬盘挂载相关信息。 lsblk …

SSRF(2)

Gopher协议的利用 gopher协议是ssrf利用中最强大的协议 gopher协议支持发出GET、POST请求&#xff1a; 可以先截获get请求包和post请求包&#xff0c;再构成符合gopher协议的请求。 默认端口为70,一般需发送到80端口 如果发起post请求&#xff0c;回车换行需要使用%0D%0A&…

消息队列-概述-JMS和AMQP

JMS和AMQP JMS是什么 JMS&#xff08;JAVA Message Service,java 消息服务&#xff09;是 Java 的消息服务&#xff0c;JMS 的客户端之间可以通过 JMS 服务进行异步的消息传输。JMS&#xff08;JAVA Message Service&#xff0c;Java 消息服务&#xff09;API 是一个消息服务…

1950 Springboot汽修技能点评系统idea开发mysql数据库APP应用java编程计算机网页源码maven项目

一、源码特点 springboot 汽修技能点评系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统 具有完整的源代码和数据库&…

提高开关电源效率一般做法

提高开关电源效率一般做法 开关电源的功耗包括由半导体开关、磁性元件和布线等的寄生电阻所产生的固定损耗以及进行开关操作时的开关损耗。对于固定损耗,由于它主要取决于元件自身的特性,因此需要通过元件技术的改进来予以抑制。在磁性元件方面,对于兼顾了集肤效应和…

Google Adsense----Wordpress插入谷歌广告

1.搭建个人博客,绑定谷歌search consol,注册adsense 详细可以参考这个视频b站视频 2.将个人博客网站关联到Adsense 在adsense里新加网站,输入你的博客网址,双击网站 将这段代码复制到header.php的里面 在wordpress仪表盘的外观-主题文件编辑器,找到header.php将代码复制,…

全网最全!25届最近5年上海理工大学自动化考研院校分析

上海理工大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、历年真题PDF 七、初试大纲复试大纲 八、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、考试…

获取时间戳是使用System.currentTimeMillis()还是使用new Date().getTime()(阿里开发规范)?

1.阿里规范 在阿里的Java开发手册中强制要求使用System.currentTimeMillis() 2.为什么(源码详解) new Date().getTime()它实际上也是调用的System.currentTimeMillis()&#xff0c;源码分析。 这个fastTime是它的成员变量&#xff0c;在new Date()的时候就被赋值了。 扩展一…

CentOS 7 安装部署Cassandra4.1.5

一、Cassandra的介绍 Cassandra是一套开源分布式NoSQL数据库系统。它最初由Facebook开发&#xff0c;用于储存收件箱等简单格式数据&#xff0c;集GoogleBigTable的数据模型与Amazon Dynamo的完全分布式的架构于一身Facebook于2008将 Cassandra 开源&#xff0c;此后&#xff0…

算法设计与分析:分治法求最近点对问题

目录 一、实验目的 二、实验内容 三、算法思想 四、实验步骤 1、蛮力法 2、分治法 2.1 先用快速排序SortX(A,1,n)将所有点按x坐标升序排序 2.2 点数n<3时直接计算&#xff0c;时间复杂度为O(1) 2.3 点数n>3时 五、实验结果和分析 一、实验目的 1. 掌握分治法思…

ArkUI部分案例笔记——padding,space

基础的构建 组件分类&#xff1a; 容器组件&#xff1a;像Column&#xff0c;Row这种组件就是容器组件一般就来控制行和列的就是容器组件 基础组件&#xff1a;Text(文本组件)&#xff0c;像这种用来有一定功能的就是基础组件 注意&#xff1a;一个build只能有一个根容器组件…

苹果智能和人工智能最大化

苹果智能和人工智能最大化 除了苹果公司&#xff0c;还没有人真正使用过苹果的智能功能。它要到秋天才会分阶段发布&#xff0c;即使到那时&#xff0c;它也无法在80%或90%的iPhone安装基础上运行&#xff0c;因为它需要只有iPhone 15 Pro才能使用的设备上处理功能。没有什么能…

海南聚广众达电子商务咨询有限公司抖音电商新标杆

在数字经济的浪潮中&#xff0c;抖音电商正成为一股不可忽视的力量。海南聚广众达电子商务咨询有限公司&#xff0c;作为专注于抖音电商服务的领军企业&#xff0c;凭借其专业的团队和创新的思维&#xff0c;不断助力商家在抖音平台上实现商业价值的最大化。 海南聚广众达电子…

Github上传大于100M的文件(ubuntu教程)

安装Git-lfs Git Large File Storage (LFS) 使用 Git 内部的文本指针替换音频样本、视频、数据集和图形等大文件&#xff0c;同时将文件内容存储在 GitHub.com 或 GitHub Enterprise 等远程服务器上。官网下载&#xff1a;https://git-lfs.github.com/ ./install.sh上传 比如…