vue手風(fēng)琴組件 無(wú)需下載插件 純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
? ? },
? ? //移出時(shí)
? ? 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 重點(diǎn)來(lái)了
/*手風(fēng)琴樣式*/
.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;
}‘
測(cè)試過(guò)了 直接復(fù)制到頁(yè)面是可以用的? 幫助到大家的話(huà)希望得到個(gè)點(diǎn)贊
祝各位工作順利 ３椤官脓！
