记录一个简单小需求,大屏组件的收缩与打开,无脑写法

1.在左侧子组件的父组件里面加图片盒子(这位置还要根据实际子盒子的数量,位置,包含关系等自己去斟酌哈)

<img src='../../../../assets/icon/close.png' class='img-close' v-show='isShow' @click='handleClose'>

<img src='../../../../assets/icon/open.png' class='img-open' v-show='!isShow' @click='hoverHandle'>

2.data定义

isShow: false

3.两个方法

hoverHandle(){

this.isShow = true

},

handleClose(){

this.isShow = false

},

4.写上style(这里面宽高定位上下左右什么的,自己根据实际情况调整)

.img-close {

width:20px;

height: 100px;

/* transform: rotate(180deg); */

transform-origin: center; /* 确保图片从中心旋转 */

margin-top: 450px;

position: fixed;

left: 19.5%;

}

.img-open {

width:20px;

height: 100px;

/* transform: rotate(180deg); */

transform-origin: center; /* 确保图片从中心旋转 */

margin-top: 450px;

position: fixed;

left: 0px;

}

5.最后让你的组件用上v-show

相关推荐
@PHARAOH3 小时前
WHAT - GitLens supercharged 插件
前端
TT模板4 小时前
苹果cms整合西瓜播放器XGplayer插件支持跳过片头尾
前端·html5
Wect4 小时前
React 性能优化精讲
前端·react.js·性能优化
追风筝的人er5 小时前
SpringBoot+Vue3 企业考勤如何处理法定假期?节假日方案、调休补班与工作日判断链路拆解
前端·vue.js·后端
无敌的黑星星5 小时前
Java8 CompletableFuture 实战指南
linux·前端·python
雁鸣零落5 小时前
如何在 Chrome 中查看其他浏览器的书签?书签空间订阅与侧边栏只读切换指南
前端·chrome·edge浏览器
hpoenixf6 小时前
一天上线 + 零返工:我如何给复杂前端需求建立“安全感”
前端
广州华水科技7 小时前
单北斗GNSS变形监测系统在水利工程安全保障中的应用与优势分析
前端
yqcoder7 小时前
CSS 外边距重叠(Margin Collapsing):现象、原理与完美解决方案
前端·css
山楂树の8 小时前
图像标注大坑:img图片 + Canvas 叠加标注,同步放大后标注位置偏移、对不齐?详解修复方案及亚像素处理原理
前端·css·学习·canva可画