feat:热门文档tag一行不展示[展开]按钮处理

jydocs-pc/src/views/Home.vue

@@ -20,7 +20,7 @@
                   {{item.value}}
                 </div>
               </div>
-              <div class="word-model-more" @click="launchActive = !launchActive" v-if="wordModel.length > 12">
+              <div class="word-model-more" @click="launchActive = !launchActive" v-if="canFold">
                 <span>{{ launchActive ? '收起' : '展开'}}</span>
                 <i :class="`el-icon-arrow-${launchActive ? 'up' : 'down'}`"></i>
               </div>
@@ -173,7 +173,8 @@ export default {
       jyPcDocRecommend: [], // 文库推荐广告位
       jyPcDocMember: [], // 文库会员广告位
       docsWordList: [],
-      launchActive: false
+      launchActive: false,
+      canFold: false
     }
   },
   created () {
@@ -208,6 +209,22 @@ export default {
     }
   },
   methods: {
+    // 热门文档的tag是否有多行
+    checkIsOneRow () {
+      const container = document.querySelector('.word-model-content')
+      if (!container) return
+      const items = container.querySelectorAll('.word-model-list')
+      // 获取所有子元素的top值,如果所有子元素的top值相同,则说明只有一行
+      const firstItemTop = items[0].offsetTop
+      let isOneRow = true
+      for (let i = 1; i < items.length; i++) {
+        if (items[i].offsetTop !== firstItemTop) {
+          isOneRow = false
+          break
+        }
+      }
+      this.canFold = !isOneRow
+    },
     handleError (img) {
       img.target.src = require('../assets/images/error.png')
     },
@@ -312,6 +329,9 @@ export default {
         const res = data.data
         if (res && res.error_code === 0) {
           this.wordModel = res.data.map((item, index) => ({ value: item, active: index === 0 ? true : false }))
+          this.$nextTick(() => {
+            this.checkIsOneRow()
+          })
           const localList = this.getLocalData(this.wordModel[0].value)
           if (localList && localList.length) {
             this.wordFileList = localList.map((v) => formatData(v))