vue 手风琴组件_vue 手风琴组件

1.创建组件

SqueezeBox.vue

• {{item.name}}{{item.show}}

  • {{a.name}}

    • {{b.name}}

export default {

data () {

return {

//

}

},

props: {

headerData: {

type: Array,

required: true

}

},

methods: {

changeli(ind, item) {

// 先循环数据中的show将其全部置为false,此时模板里的v-if判断生效关闭全部二级菜单,并移除样式

this.headerData.forEach(i => {

// 判断如果数据中的headerData[i]的show属性不等于当前数据的show属性那么headerData[i]等于false

if (i.show !== this.headerData[ind].show) {

i.show = false;

};

});

// 取反(true或false)

item.show = !item.show;

console.log(item.name);

},

changeItem(ind, item,arr) {

// 先循环数据中的show将其全部置为false,此时模板里的v-if判断生效关闭全部二级菜单,并移除样式

arr.forEach(i => {

// 判断如果数据中的headerData[i]的show属性不等于当前数据的show属性那么headerData[i]等于false

if (i.showItem !== arr[ind].showItem) {

i.showItem = false;

};

});

// 取反(true或false)

item.showItem = !item.showItem;

console.log(item.name);

},

doThisItem(index){

alert(index);

}

}

}

.header {

width: 100%;

background-color: #ff5722;

color: #ffffff;

>ul {

width: 100%;

>li {

width: 100%;

border: 1px solid #ffffff;

cursor: pointer; // float: left;

color: 20px;

text-align: center;

line-height: 60px;

&:hover {

background-color: #ff9800;

}

>ul {

width: 100%;

background: red;

li{

&:hover{

background: #c31111;

}

}

}

}

.active {

background-color: #ff9800;

.activeItem{

background-color: green;

}

}

}

}

2.页面调用

import SqueezeBox from '../../components/SqueezeBox.vue'

export default {

name: 'AudioBook',

components: {

SqueezeBox

},

data(){

return {

headerData: [{

name: '导航1',

list: [{name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}],

show: false

}, {

name: '导航2',

list: [{name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}],

show: false

}, {

name: '导航3',

list: [{name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}],

show: false

}, {

name: '导航4',

list: [{name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}],

show: false

}, {

name: '导航5',

list: [{name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}, {name: '子集',list: [{name:'张三',age:'20'}],showItem:false}],

show: false

}]

}

}

}

.content{

position: absolute;

top: 40px;

left: 0px;

right: 0px;

bottom: 53px;

overflow: scroll;

}

/*隐藏 滚动条*/

::-webkit-scrollbar{

display:none;

}

3.效果图