分类展开收起

src/views/trainingVideo/List.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted , ref , watch} from 'vue';
+import { 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'
@@ -19,7 +19,9 @@ let currentIndex = ref(1) //列表页
 let keyword = ref('') //搜索词
 let selectValue = ref('New') //select筛选项
 
-
+let classifyWidth = 0 //分类列表宽度
+let tagWidth = 0 //标签列表宽度
+let boxWidth = 0 //列表父级的宽度
 
 let beforeMounted = ref(false)
 
@@ -27,6 +29,21 @@ function getClassifyList(){
     apiClassifyList().then(res=>{
         if(res.code!==200) return 
         classifyList.value = res.data&&res.data.List||[]
+        nextTick(()=>{
+            classifyWidth = document.querySelector(".classify-box .list").scrollWidth
+        })
+    })
+
+}
+
+function getTagList(){
+    apiTagList().then(res=>{
+        if(res.code!==200) return 
+        tagList.value = res.data||[]
+        nextTick(()=>{
+            tagWidth = document.querySelector(".tag-box .list").scrollWidth
+        })
+        
     })
 }
 
@@ -51,12 +68,7 @@ watch(
     }
 )
 
-function getTagList(){
-    apiTagList().then(res=>{
-        if(res.code!==200) return 
-        tagList.value = res.data||[]
-    })
-}
+
 
 function getVideoList(){
     apiVideoList({
@@ -97,7 +109,7 @@ onMounted(()=>{
     getTagList()
     getVideoList()
     beforeMounted.value = true
-
+    boxWidth = document.querySelector(".select").offsetWidth
 })
 
 
@@ -106,22 +118,24 @@ onMounted(()=>{
 <template>
     <div class="video-list-wrap">
         <div class="classify-box select">
-            <span style="align-self:center;">分类:</span>
-            <div class="list">
+            <span style="align-self:center;white-space: nowrap;">分类:</span>
+            <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>
             </div>
+            <div class="expand-btn" v-show="boxWidth<=classifyWidth" @click="isClassifyListExpand = !isClassifyListExpand">{{isClassifyListExpand?'收起':'展开'}}</div>
         </div>
         <div class="tag-box select">
-            <span style="align-self:center;">标签:</span>
-            <div class="list">
+            <span style="align-self:center;white-space: nowrap;">标签:</span>
+            <div class="list" :class="{'expand':isTagListExpand}">
                 <span class="list-item" :class="{'active':choosedTags.length===0}"
                     @click="choosedTags = []">全部</span>
                 <span class="list-item" :class="{'active':choosedTags.findIndex(i=>i.TagId===item.TagId)!==-1}"
                     v-for="item in tagList" :key="item.TagId" @click="changeTags(item)">{{item.TagName}}</span>
             </div>
+            <div class="expand-btn" v-show="boxWidth<=tagWidth" @click="isTagListExpand = !isTagListExpand">{{isTagListExpand?'收起':'展开'}}</div>
         </div>
         <div class="select-box">
             <el-select v-model="selectValue" placeholder="Select" size="large" @change="handleCurrentChange(1)">
@@ -178,15 +192,32 @@ onMounted(()=>{
     .select{
         display: flex;
         margin-bottom:20px;
+        position:relative;
+        .expand-btn{
+            position: absolute;
+            right:-48px;
+            top:0;
+            bottom: 0;
+            padding:8px;
+            background-color: #F2F6FA;
+            }
         .list{
+            flex:1;
             display: flex;
+            flex-wrap: nowrap;
+            overflow-x: hidden;
             margin-left: 15px;
             gap: 10px;
+            /* height:35px; */
+            &.expand{
+                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;