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

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

相关推荐
wordbaby1 分钟前
TanStack Router 实战: 如何设置基础认证和受保护路由
前端
智算菩萨4 分钟前
Anthropic Claude 4.5:AI分层编排的革命,成本、速度与能力的新平衡
前端·人工智能
程序员Agions5 分钟前
程序员武学修炼手册(三):融会贯通——从写好代码到架构设计
前端·程序员·强化学习
zhouzhouya6 分钟前
我和TRAE的这一年:从"看不懂"到"玩得转"的AI学习进化史
前端·程序员·trae
小则又沐风a10 分钟前
数据结构->链表篇
前端·html
小王和八蛋13 分钟前
前端存储与离线应用实战:Cookie、LocalStorage、PWA 及 Service Worker 核心知识点
前端·javascript
JarvanMo17 分钟前
终极指南:在 Flutter 中通过 sign_in_with_apple 实现 Apple 登录
前端
Learner23 分钟前
Python异常处理
java·前端·python
tao35566726 分钟前
VS Code登录codex,报错(os error 10013)
java·服务器·前端
军军君0129 分钟前
Three.js基础功能学习七:加载器与管理器
开发语言·前端·javascript·学习·3d·threejs·三维