hookehuyr

fix 所有产品左侧3层手风琴,第二层可以跳转到类别

<template>
<div class="accordion-item">
<div v-if="hasChildren" class="accordion-header" @click="toggle" :style="item.style">
{{ item.category_name }}
<i v-if="!isOpen" class="el-icon-arrow-right"></i><i v-else class="el-icon-arrow-down"></i>
<div v-if="hasChildren" class="accordion-header" @click="toggle(item)" :style="item.style">
<span :class="[item.list ? 'category-name' : '']">{{ item.category_name }}</span>
<span @click.stop="toggle()">
<i v-if="!isOpen" class="el-icon-arrow-right"></i><i v-else class="el-icon-arrow-down"></i>
</span>
</div>
<div v-else class="list-item" @click="goToDetail(item)">
{{ item.category_name }}
......@@ -36,9 +38,20 @@ export default {
}
},
methods: {
toggle() {
if (this.hasChildren) {
this.isOpen = !this.isOpen;
toggle(v) {
console.warn(v);
if (v?.list) {
this.$router.push({
path: '/product/index',
query: {
id: v.id,
timestamp: Date.now()
}
});
} else {
if (this.hasChildren) {
this.isOpen = !this.isOpen;
}
}
},
goToDetail (v) { // 跳转产品详情
......@@ -46,6 +59,7 @@ export default {
path: '/product/detail',
query: {
id: v.id,
timestamp: Date.now()
}
});
}
......@@ -76,6 +90,12 @@ export default {
-webkit-transition: border-bottom-color .3s;
transition: border-bottom-color .3s;
outline: 0;
.category-name {
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
}
.list-item {
font-size: 0.85rem;
......