<template>
<div id="accordion">
<div class="accordion">
<div class="or-container">
<div class="box" :class="eleindex ==index?'eleactive':''" v-for="(ele,index) in piclist" :key="index" @mouseenter="enter(index)" @mouseleave="out">
<img :src="ele.img">
<span>{{index}}</span>
</div>
</div>
</div>
</div>
<!--手风琴组件-->
</template>
<script>
export default {
name: "Accordion",
data () {
return {
eleindex: 0,
piclist: [
{text: '播放/录制页面', img: require('../../../assets/images/smart_party_building_pic1.png')},
{text: '播放/录制页面', img: require('../../../assets/images/smart_party_building_pic2.png')},
{text: '播放/录制页面', img: require('../../../assets/images/smart_party_building_pic3.png')},
{text: '播放/录制页面', img: require('../../../assets/images/smart_party_building_pic4.png')},
]
}
},
methods:{
enter (index) {
console.log(index)
this.eleindex = index
// if (this.eleindex === i) {
// this.eleindex = -1
// } else {
// this.eleindex = i
// }
},
out () {
this.imgindex = -1
}
}
};
</script>
<style scoped>
.or-container {
display: flex;
width: 100%;
padding: 4% 2%;
box-sizing: border-box;
height: 19vh;
}
.or-container:before {
background-color: rgba(0,0,0,0.4);
}
.box {
flex: 1;
overflow: hidden;
transition: .5s;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
line-height: 0;
position: relative;
}
.box > img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: .5s;
}
.box > span {
font-size: 2vh;
display: block;
text-align: center;
height: 4vh;
line-height: 2.6;
position: absolute;
bottom: 0;
color: #fff;
}
.eleactive {
flex: 1 1 58%;
}
.eleactive > img {
width: 100%;
height: 100%;
}
</style>
组件化分开写的话
子组件
Accordion.vue
<template>
<div id="accordion">
<div class="accordion">
<div class="or-container">
<div class="box" :class="eleindex ==index?'eleactive':''" v-for="(ele,index) in piclist" :key="index" @mouseenter="enter(index)" @mouseleave="out">
<img :src="ele.img">
<span>{{ele.text}}</span>
</div>
</div>
</div>
</div>
<!--手风琴组件-->
</template>
<script>
export default {
name: "Accordion",
props: {
piclist:{
type:Array,
default(){
return[]
}
}
},
data () {
return {
eleindex: 0,
}
},
methods:{
enter (index) {
console.log(index)
this.eleindex = index
// if (this.eleindex === i) {
// this.eleindex = -1
// } else {
// this.eleindex = i
// }
},
out () {
this.imgindex = -1
}
}
};
</script>
<style scoped>
.or-container {
display: flex;
width: 100%;
padding: 4% 2%;
box-sizing: border-box;
height: 19vh;
}
.or-container:before {
background-color: rgba(0,0,0,0.4);
}
.box {
flex: 1;
overflow: hidden;
transition: .5s;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
line-height: 0;
position: relative;
}
.box > img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: .5s;
}
.box > span {
font-size: 2vh;
display: block;
text-align: center;
height: 4vh;
line-height: 2.6;
position: absolute;
bottom: 0;
color: #fff;
}
.eleactive {
flex: 1 1 58%;
}
.eleactive > img {
width: 100%;
height: 100%;
}
</style>
父组件
home.vue
<template>
<div>
<accordion :piclist="piclist"></accordion>
</div>
</template>
import Accordion from 'components/common/carousel/Accordion.vue';
components: {
Accordion
},
data () {
return {
piclist: [
{text: '数字文旅展厅01', img: require('../../../assets/images/digital_cultural_case_pic1.png')},
{text: '数字文旅展厅02', img: require('../../../assets/images/digital_cultural_case_pic2.png')},
{text: '数字文旅展厅03', img: require('../../../assets/images/digital_cultural_case_pic3.png')},
{text: '数字文旅展厅04', img: require('../../../assets/images/digital_cultural_case_pic4.png')},
]
}
},