前言

背景：最近在参与一个企业门户网站项目，有一个需求是做一个图片手风琴，图片和文字都从后端获取，其中鼠标hover之后标题向上移动。
主页请求数据后，统一加载组件，我只需要把这个手风琴封装好即可。

一、初版

效果如图，鼠标放上后触发hover的块长度变大，标题以及隐藏在底下的文字向上滑动（animation实现），其余的块缩小宽度，还给了一个灰度的滤镜。

问题
-和大家普遍的图片手风琴没什么太大差异，但可以注意到最右侧似乎一直在动，原因是整个手风琴的宽度大于三个图片的宽度。可以看到右侧有一段留白
解决方法
-将CSS中的数值修改即可。

//图像hover之前的总宽度
@width:1080px;
//单个图像hover之后的宽度
@imageH:680px;
//单个图像hover之前的宽度
@imagebefore:330px;

利用less变量（Variables）和运算（Operations），动态计算一下使得:总宽度应>=（3hover前宽度）和（2hover后未选中+hover选中的宽度）这两个的最小值，这样使得整个手风琴的宽度稳定了下来

二、封装中遇到的问题

1.props

vue的封装不用太多说，我们沟通的是引用组件后传入一个数组（没必要分别传图片、标题和描述），每个数组元素包含图片、标题和描述，分别渲染到每个手风琴块即可
vue官方文档给的props是这样的

// 带有默认值的对象或数组
propE: {type: Array,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: ‘hello’ }}
}

最后没取到return的数组（可能是因为我的数组是对象数组？），也没有任何报错，也可能和ES6有关。
最后改成

// 带有默认值的对象或数组
propE: {type: Array,// 对象或数组默认值必须从一个工厂函数获取default: () => {}
}

就解决了，很神奇

2.传入的图片数量的不定的

忽然想到，需求里面写的是手风琴不多于10个图片（也就是最多9个），而我的less里面写死了一共有的图片个数，是不是有办法能读到传入数组的长度呢，再计算每个状态的宽度即可

问题转化成：CSS中使用JS变量

html

<div class="accordian" :style="{'--width':width}">

  data () {return {// 整个手风琴的宽度width: '1080px',// 手风琴格子个数itemNum: this.imgList.length...省略}}

CSS

.accordian{width: var(--width);...省略}

最后将单个宽度按个数划分，hover之后宽度变动选择按百分比变大变小即可

Vue简易图片手风琴组件，包含宽度适应（JS操作CSS实现）相关推荐

使用JS操作CSS实现JS改变背景图片
使用JS操作CSS实现JS改变背景图片在写一个后台管理系统的界面时候,想要实现每次刷新界面或者访问界面时候会重新加载一张图片并且每次都不一样,于是乎就去想了个方法去实现它,最终方案是通过js来改变d ...
html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
十二、Vue项目 - 详情页动态路由、banner布局和公用图片画廊组件拆分
我是一个小菜鸡啊小菜鸡,但是小菜鸡要继续学新东西啊,新的一周加油吧!!! 文章目录配置动态路由 banner.vue 公用图片画廊组件拆分 src下新建common文件夹 banner.vue中使用 ...
vue修改代码同步页面_vue实现两个组件之间数据共享和修改操作
我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值. 以我目前的一个项目的开发为例,如下图页面: 在父组件中,我引入了 ...
vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
vue图片裁剪组件_Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
VUE图片裁剪组件,基于VueCropper
VUE图片裁剪组件,基于VueCropper 搬砖的同志麻烦点个赞支持下效果图第一步安装vue-cropper插件 npm install vue-cropper 第二步创建组件,把下面的代码复制 ...
用Vue实现一个掘金沸点图片展示组件
动机最近的后台项目里需要添加新鲜事功能,简而言之就是一个带图片的评论回复系统,看了好几个类似的系统后,还是决定仿照掘金沸点的设计,简洁而且优雅,整个模块界面基本和沸点一样,只是少了一些功能(链接和话 ...
vue 图片剪辑_用vue制作的图片剪辑组件
vue 图片剪辑形状 (vueShapeImg) Picture clipping component made with vue. 用vue制作的图片剪辑组件. View demo 查看演示 Do ...
七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分
2020/11/04. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...

Vue简易图片手风琴组件，包含宽度适应（JS操作CSS实现）

文章目录

前言

一、初版

二、封装中遇到的问题

1.props

2.传入的图片数量的不定的

Vue简易图片手风琴组件，包含宽度适应（JS操作CSS实现）相关推荐

最新文章

热门文章