修改样式

src/views/natural-resources/components/my-collect/index.module.less

@@ -147,4 +147,10 @@
 .isHidden {
   overflow: hidden;
   transition: 1s all ease-in;
+}
+
+.hideButton {
+  visibility: hidden;
+  height: 0 !important;
+  line-height: 0 !important;
 }

src/views/natural-resources/components/my-collect/search-group-resources.tsx

@@ -26,9 +26,9 @@ export default defineComponent({
     const collapseWrapRef = ref();
     const divDomList = ref([] as any);
     const orginHeight = ref(0);
-    const hiddenHeight = ref(0);
     const line = ref(0);
     const isCollapse = ref(false);
+    const loadingCollapse = ref(false); // 是否加载完成
     const musicCateRef = (el: any) => {
       if (el?.selfElRef) {
         divDomList.value.push(el.selfElRef.parentNode);
@@ -39,29 +39,35 @@ export default defineComponent({
       getLive();
     };
     const getLive = () => {
-      divDomList.value = [...new Set(divDomList.value)];
-      let offsetLeft = -1;
-      divDomList.value.forEach((item: any, index: number) => {
-        if (index === 0) {
-          line.value = 1;
-          offsetLeft = item.offsetLeft;
-        } else if (item.offsetLeft === offsetLeft && index != 0) {
-          // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
-          line.value++;
-        }
-        if (!isCollapse.value) {
-          if (line.value > 1) {
-            //从第3行开始 隐藏标签
-            item.style.display = 'none';
-            // 显示展开按钮  class名chu是在前面动态添加的
+      try {
+        divDomList.value = [...new Set(divDomList.value)];
+        let offsetLeft = -1;
+        divDomList.value.forEach((item: any, index: number) => {
+          if (index === 0) {
+            line.value = 1;
+            offsetLeft = item.offsetLeft;
+          } else if (item.offsetLeft === offsetLeft && index != 0) {
+            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
+            line.value++;
+          }
+          if (!isCollapse.value) {
+            if (line.value > 1) {
+              //从第3行开始 隐藏标签
+              item.style.display = 'none';
+              // 显示展开按钮  class名chu是在前面动态添加的
+            } else {
+              item.style.display = 'block';
+            }
           } else {
             item.style.display = 'block';
           }
-        } else {
-          item.style.display = 'block';
-        }
-      });
+        });
+        loadingCollapse.value = true;
+      } catch {
+        //
+      }
     };
+
     onMounted(async () => {
       resourceList.value = [
         {
@@ -76,11 +82,14 @@ export default defineComponent({
       // 获取声部列表
       await catchStore.getSubjects();
 
-      // // 这里开始
-      // orginHeight.value = collapseWrapRef.value.offsetHeight;
-      // hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
-      // // 默认隐藏
-      // getLive();
+      // 这里开始
+      // musicCateRef
+      if (forms.type === 'MUSIC') {
+        orginHeight.value = collapseWrapRef.value.offsetHeight;
+        // hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
+        // 默认隐藏
+        getLive();
+      }
     });
     return () => (
       <div class={styles.searchGroup}>
@@ -99,12 +108,13 @@ export default defineComponent({
 
                   nextTick(() => {
                     if (forms.type === 'MUSIC') {
-                      // 这里开始
                       orginHeight.value = collapseWrapRef.value.offsetHeight;
-                      hiddenHeight.value =
-                        collapseWrapRef.value.offsetHeight / line.value;
+                      // hiddenHeight.value =
+                      //   collapseWrapRef.value.offsetHeight / line.value || 0;
                       // 默认隐藏
                       getLive();
+                    } else {
+                      divDomList.value = [];
                     }
                   });
                 }}>
@@ -120,12 +130,14 @@ export default defineComponent({
                 <div
                   class={[
                     styles.collapseWrap,
+                    loadingCollapse.value ? '' : styles.hideButton,
                     isCollapse.value ? '' : styles.isHidden
                   ]}
                   ref={collapseWrapRef}>
                   <NSpace class={[styles.spaceSection]}>
                     {catchStore.getAllMusicCategories.map((music: any) => (
                       <NButton
+                        data-id={music.id}
                         ref={musicCateRef}
                         secondary={forms.bookVersionId === music.id}
                         quaternary={forms.bookVersionId !== music.id}

src/views/natural-resources/components/share-resources/index.module.less

@@ -154,4 +154,10 @@
 .isHidden {
   overflow: hidden;
   transition: 1s all ease-in;
+}
+
+.hideButton {
+  visibility: hidden;
+  height: 0 !important;
+  line-height: 0 !important;
 }

src/views/natural-resources/components/share-resources/search-group-resources.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import { NButton, NForm, NFormItem, NImage, NSpace } from 'naive-ui';
 import iconAdd from '../../images/icon-add.png';
@@ -20,24 +20,16 @@ export default defineComponent({
     });
 
     const onSearch = () => {
-      console.log('onSearch')
-      divDomList.value = []
-      setCollapse(true)
       emit('search', forms);
     };
-    const init = () => {
-      setCollapse(false)
-    }
     const collapseWrapRef = ref();
     const divDomList = ref([] as any);
     const orginHeight = ref(0);
-    const hiddenHeight = ref(0);
     const line = ref(0);
     const isCollapse = ref(false);
+    const loadingCollapse = ref(false); // 是否加载完成
     const musicCateRef = (el: any) => {
-      console.log('musicCateRef', musicCateRef)
-      // console.log(el?.selfElRef, 'el.selfElRef')
-      if (el?.selfElRef?.parentNode) {
+      if (el?.selfElRef) {
         divDomList.value.push(el.selfElRef.parentNode);
       }
     };
@@ -46,45 +38,47 @@ export default defineComponent({
       getLive();
     };
     const getLive = () => {
-      console.log(divDomList.value.length)
-      divDomList.value = [...new Set(divDomList.value)];
-      let offsetLeft = -1;
-      console.log(divDomList.value, '  divDomList.value')
-      divDomList.value.forEach((item: any, index: number) => {
-        if (index === 0) {
-          line.value = 1;
-          offsetLeft = item.offsetLeft;
-        } else if (item.offsetLeft === offsetLeft && index != 0) {
-          // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
-          line.value++;
-        }
-        if (!isCollapse.value) {
-          if (line.value > 1) {
-            //从第2行开始 隐藏标签
-            item.style.display = 'none';
-            // 显示展开按钮  class名chu是在前面动态添加的
+      try {
+        divDomList.value = [...new Set(divDomList.value)];
+        let offsetLeft = -1;
+        divDomList.value.forEach((item: any, index: number) => {
+          if (index === 0) {
+            line.value = 1;
+            offsetLeft = item.offsetLeft;
+          } else if (item.offsetLeft === offsetLeft && index != 0) {
+            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
+            line.value++;
+          }
+          if (!isCollapse.value) {
+            if (line.value > 1) {
+              //从第3行开始 隐藏标签
+              item.style.display = 'none';
+              // 显示展开按钮  class名chu是在前面动态添加的
+            } else {
+              item.style.display = 'block';
+            }
           } else {
             item.style.display = 'block';
           }
-        } else {
-          item.style.display = 'block';
-        }
-      });
+        });
+        loadingCollapse.value = true;
+      } catch {
+        //
+      }
     };
     onMounted(async () => {
-      console.log('加载')
+      console.log('加载');
       // 获取教材分类列表
       await catchStore.getMusicSheetCategory();
       // 获取声部列表
       await catchStore.getSubjects();
 
-
-      orginHeight.value = collapseWrapRef.value.offsetHeight;
-      hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
-      // 默认隐藏
-      setCollapse(false)
-      // 这里开始
-
+      if (forms.type === 'MUSIC') {
+        orginHeight.value = collapseWrapRef.value.offsetHeight;
+        // hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
+        // 默认隐藏
+        getLive();
+      }
     });
     return () => (
       <div class={styles.searchGroup}>
@@ -100,6 +94,18 @@ export default defineComponent({
                 onClick={() => {
                   forms.type = item.value;
                   onSearch();
+
+                  nextTick(() => {
+                    if (forms.type === 'MUSIC') {
+                      orginHeight.value = collapseWrapRef.value.offsetHeight;
+                      // hiddenHeight.value =
+                      //   collapseWrapRef.value.offsetHeight / line.value || 0;
+                      // 默认隐藏
+                      getLive();
+                    } else {
+                      divDomList.value = [];
+                    }
+                  });
                 }}>
                 {item.label}
               </NButton>
@@ -123,6 +129,7 @@ export default defineComponent({
                 <div
                   class={[
                     styles.collapseWrap,
+                    loadingCollapse.value ? '' : styles.hideButton,
                     isCollapse.value ? '' : styles.isHidden
                   ]}
                   ref={collapseWrapRef}>

src/views/prepare-lessons/model/select-music/index.module.less

@@ -136,6 +136,7 @@
 
 .spaceSection {
   width: 69%;
+  gap: 8px 12px !important;
 
   &>div {
     line-height: var(--n-blank-height);

src/views/prepare-lessons/model/select-resources/select-item/resource-search-group/index.tsx

@@ -59,6 +59,7 @@ export default defineComponent({
         divDomList.value = [...new Set(divDomList.value)];
         let offsetLeft = -1;
         divDomList.value.forEach((item: any, index: number) => {
+          console.log(item, 'item');
           if (index === 0) {
             line.value = 1;
             offsetLeft = item.offsetLeft;
@@ -135,6 +136,8 @@ export default defineComponent({
                           collapseWrapRef.value.offsetHeight / line.value;
                         // 默认隐藏
                         getLive();
+                      } else {
+                        divDomList.value = [];
                       }
                     });
                   } catch {