增加了一级分类悬浮时,显示二级分类

src/views/trainingVideo/List.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, onMounted , ref , watch} from 'vue';
+import { computed, nextTick, onMounted , ref , watch} from 'vue';
 import { useRoute , useRouter} from "vue-router";
 import {apiClassifyList,apiTagList,apiVideoList} from '@/api/trainingVideoApi';
 import { Search } from '@element-plus/icons-vue'
@@ -9,6 +9,7 @@ const router = useRouter()
 
 let classifyList = ref([]) //分类列表
 let choosedClassify = ref({ClassifyId:0}) //所选分类
+let choosedSubClassify = ref({ClassifyId:0}) //所选二级分类
 let isClassifyListExpand = ref(false) //分类列表是否展开
 let tagList = ref([]) //标签列表
 let choosedTags = ref([]) //所选标签
@@ -47,8 +48,14 @@ function getTagList(){
     })
 }
 
-function changeClassify(classify){
-    choosedClassify.value = classify
+function changeClassify(classify,type){
+    if(type==='sub'){
+        choosedSubClassify.value = classify
+        choosedClassify.value = classifyList.value.find(i=>i.ClassifyId===classify.ParentId)
+    }else{
+        choosedClassify.value = classify
+        choosedSubClassify.value = {ClassifyId:0}
+    }
     handleCurrentChange(1)
 }
 
@@ -68,6 +75,10 @@ watch(
     }
 )
 
+let currentClassifyId = computed(()=>{
+    return choosedSubClassify.value.ClassifyId||choosedClassify.value.ClassifyId
+})
+
 
 
 function getVideoList(){
@@ -77,7 +88,7 @@ function getVideoList(){
         keyword:keyword.value,
         is_new:selectValue.value==='New',
         is_hot:selectValue.value==='Hot',
-        classify_id:choosedClassify.value.ClassifyId||0,
+        classify_id:currentClassifyId.value,
         tag_ids:choosedTags.value.map(i=>i.TagId).join(',')
     }).then(res=>{
         if(res.code!==200) return
@@ -122,8 +133,20 @@ onMounted(()=>{
             <div class="list" :class="{'expand':isClassifyListExpand}">
                 <span class="list-item" :class="{'active':choosedClassify.ClassifyId===0}"
                     @click="changeClassify({ClassifyId:0})">全部</span>
-                <span class="list-item" :class="{'active':choosedClassify.ClassifyId===item.ClassifyId}"
-                    v-for="item in classifyList" :key="item.ClassifyId" @click="changeClassify(item)">{{item.ClassifyName}}</span>
+                <el-popover v-for="item in classifyList" :key="item.ClassifyId" :width="220">
+                    <div class="sub-list" v-if="item.Children.length">
+                        <span class="list-item" :class="{'active':choosedSubClassify.ClassifyId===subItem.ClassifyId}"
+                            v-for="subItem in item.Children" :key="subItem.ClassifyId"
+                            @click="changeClassify(subItem,'sub')">
+                            {{subItem.ClassifyName}}</span>
+                    </div>
+                    <template #reference>
+                        <span class="list-item" :class="{'active':choosedClassify.ClassifyId===item.ClassifyId}"
+                            @click="changeClassify(item)">{{item.ClassifyName}}
+                        </span>
+                    </template>
+                </el-popover>
+                
             </div>
             <div class="expand-btn" v-show="boxWidth<=classifyWidth" @click="isClassifyListExpand = !isClassifyListExpand">{{isClassifyListExpand?'收起':'展开'}}</div>
         </div>
@@ -142,6 +165,12 @@ onMounted(()=>{
                 <el-option label="最新" value="New"/>
                 <el-option label="最热" value="Hot"/>
             </el-select>
+            <span class="path" style="margin-left: 20px;">
+                <span>{{choosedClassify.ClassifyName||''}}
+                    <span v-if="choosedSubClassify.ClassifyId">/</span>
+                    {{choosedSubClassify.ClassifyName||''}}
+                </span>
+            </span>
         </div>
         <div class="list-box">
             <div class="list-item" v-for="item in videoList" :key="item.VideoId" @click="gotoVideoDetail(item)">
@@ -275,4 +304,23 @@ onMounted(()=>{
         padding:12px;
     }
 }
+.el-popper{
+    .sub-list{
+        padding: 5px;
+        display: flex;
+        flex-wrap: wrap;
+        .list-item{
+            box-sizing: border-box;
+            padding: 8px;
+            background-color: #fff;
+            border-radius: 4px;
+            white-space: nowrap;
+            cursor: pointer;
+            &.active,&:hover{
+                color:#fff;
+                background-color:#0052D9;
+            }
+        }
+    }
+}
 </style>