欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 旅游 > 记录一个简单小需求,大屏组件的收缩与打开,无脑写法

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

2025/3/12 9:28:15 来源:https://blog.csdn.net/THY0827/article/details/145261541  浏览:    关键词:记录一个简单小需求,大屏组件的收缩与打开,无脑写法

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词