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