点击旋转箭头样式

实现效果:

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;我们就来盘一盘近期全球手游和…

【Ubuntu开发入门之“悟空派wukongpi/香橙派orangepi H3 linux开发②u-boot移植“】

Ubuntu开发入门之"悟空派wukongpi/香橙派orangepi H3 linux开发@u-boot移植" 问题描述解决方法获取u-boot源码编译配置u-boot制作并烧录TF 卡结束语郑重声明:本人原创博文,都是实战,均经过实际项目验证出货的 转载请标明出处:攻城狮2015 Platform: Allwinner H3 OS…

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

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

docker挂载卷和宿主机的文件夹有何区别

挂载卷&#xff08;Mounting Volume&#xff09;在 Docker 中是一种将数据持久化的方法&#xff0c;它允许将一个目录或文件从宿主机挂载到容器内部。挂载卷可以是以下几种类型&#xff1a; 数据卷&#xff08;Data Volume&#xff09;&#xff1a; 数据卷是 Docker 的一个特性…

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文件…

MyBatis 源码分析-- getMapper(获取Mapper)

前言&#xff1a; 前面我们从源码层面梳理了 SqlSessionFactory、SqlSession 的创建过程&#xff0c;本篇我们继续分析一下 Mapper 的的获取过程。 初识 MyBatis 【MyBatis 核心概念】 MyBatis 源码分析–SqlSessionFactory MyBatis 源码分析–获取SqlSession 案例代码&am…

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

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

【已解决】如何为qt表格设置复选框单击事件

本博文源于笔者正在处理的表格复选框的事件&#xff0c;这里遇到的问题是&#xff1a;想要为qt表格中每一行复选框设置单击事件&#xff0c;一开始不知道如何处理&#xff0c;后面研究学习了一下&#xff0c;故记录此博文。 问题原因 想要为qt表格中每一行复选框设置单击事件…

SSRF(2)

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

Java编程小练习题目

题目&#xff1a; 你和相亲对象正在餐厅里约会。键盘录入两个整数&#xff0c;用来分别表示你和对象的衣服的时髦度。&#xff08;手动录入0-10之间的整数&#xff0c;不能录入其他的&#xff09;。如果你的时髦度大于你对象的时髦度&#xff0c;相亲就成功&#xff0c;打印输出…

消息队列-概述-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;系统 具有完整的源代码和数据库&…

N32G031 I2C使用说明

目录 功能说明 使用指导 应用场景 总结 N32G031微控制器的I2C&#xff08;Inter-Integrated Circuit&#xff09;输出功能是一个重要的数字通信接口&#xff0c;用于与其他设备进行数据交换。以下是关于N32G031 I2C输出功能的完整说明和使用指导&#xff1a; 功能说明 接…

CGFloat转NSString保持原有的精度,末尾不添加0

问题阐述&#xff1a; 我们进行CGFloat转NSString可能会遇到一个问题 例如有一个CGFloat的值为2.1&#xff0c;转化成NSString后显示2.1000... 解决办法&#xff1a; 方法一&#xff1a; 如何解决呢&#xff0c;可以使用%g格式符&#xff0c;可以保证传入的不管是2还是2.1…

了解预防中间人攻击

什么是中间人&#xff08;MITM&#xff09;攻击&#xff1f; 中间人&#xff08;MITM&#xff09;攻击是一种网络安全威胁&#xff0c;其中攻击者设法在两个通信实体之间插入自己&#xff0c;从而能够拦截、篡改或转发这两个实体之间的通信。由于攻击者能够同时与双方进行通信…

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

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

第12天:前端集成与交互

第12天&#xff1a;前端集成与交互 目标 将前端框架与Django后端集成&#xff0c;实现前后端分离。 任务概览 选择一个前端框架并创建基础页面。使用AJAX或Fetch API与后端API交互。 详细步骤 1. 选择前端框架 选择一个适合项目的前端框架&#xff0c;如React、Vue.js或…