vue手风琴组件 无需下载插件 纯css
效果
代码
<div class="or-container">
<div class="box" :class="eleindex == i ? 'eleactive' : ''" v-for="(item,i) in accordionList" :key="i"
@mouseenter="enter(i)" @mouseleave="out(i)">
<img :src="item.url">
<div class="open">
<img :src="item.open_url">
</div>
</div>
</div>
script
methods: {
// 划入
enter: function (i) {
this.eleindex = i
},
//移出时
out: function (i) {
this.eleindex = 9
}
},
data
eleindex: 9,
accordionList: [
{
url: '/images/aes/l1.png',
open_url: '/images/aes/l1_1_1.png'
},
{
url: '/images/aes/l2.png',
open_url: '/images/aes/l2_1_1.png'
},
{
url: '/images/aes/l3.png',
open_url: '/images/aes/l3_1_1.png'
},
{
url: '/images/aes/l4.png',
open_url: '/images/aes/l4_1_1.png'
},
{
url: '/images/aes/l5.png',
open_url: '/images/aes/l5_1_1.png'
}
]
style 重点来了
/*手风琴样式*/
.or-container {
display: flex;
width: 100%;
box-sizing: border-box;
height: 512px;
@media (max-width:480px) {
display: none;
}
}
.or-container:before {
background-color: rgba(0, 0, 0, 0.4);
}
.box {
flex: 1;
overflow: hidden;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
line-height: 0;
transition: .5s;
}
.box>img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: .5s;
}
.box>span {
font-size: 3.8vh;
display: block;
text-align: center;
height: 10vh;
line-height: 2.6;
}
.box .open {
display: none;
}
.eleactive {
flex: 1 1 100%;
position: relative;
}
.eleactive .open {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.open img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}‘
测试过了 直接复制到页面是可以用的 帮助到大家的话希望得到个点赞
祝各位工作顺利 ！！
