展览详情页 不展示没有内容的tab item

src/views/ExhibitionDetail.vue

@@ -69,20 +69,28 @@
       </p>
     </article>
 
-    <div class="tab-bar">
+    <div
+      class="tab-bar"
+      :style="{
+        pointerEvents: (tabItemNumber <= 1) ? 'none' : ''
+      }"
+    >
       <button
+        v-if="choosenExhibition.link.length"
         :class="{active: curTabIdx === 0}"
         @click="curTabIdx = 0"
       >
         虚拟展厅
       </button>
       <button
+        v-if="choosenExhibition.video.length"
         :class="{active: curTabIdx === 1}"
         @click="curTabIdx = 1"
       >
         展览视频
       </button>
       <button
+        v-if="choosenExhibition.imageNumber"
         :class="{active: curTabIdx === 2}"
         @click="curTabIdx = 2"
       >
@@ -228,6 +236,25 @@ export default {
   components: {
   },
   data() {
+    const dataItem = exhibitionData[this.$route.query.exhibitionType][this.$route.query.exhibitionId]
+
+    const hasLink = dataItem.link.length
+    const hasVideo = dataItem.video.length
+    const hasImage = dataItem.imageNumber
+
+    let initialCurTabIdx = 0
+    if (hasLink) {
+      initialCurTabIdx = 0
+    } else if (hasVideo) {
+      initialCurTabIdx = 1
+    } else if (hasImage) {
+      initialCurTabIdx = 2
+    } else {
+      console.error('场景、视频、图片都没有！')
+    }
+
+    const tabItemNumber = (hasLink ? 1 : 0) + (hasVideo ? 1 : 0) + (hasImage ? 1 : 0)
+
     return {
       exhibitionData,
       showMask: false,
@@ -235,7 +262,8 @@ export default {
       videoSrc: null,
       imageSrc: null,
       linkSrc: null,
-      curTabIdx: 0,
+      curTabIdx: initialCurTabIdx,
+      tabItemNumber,
       canShow: false, // 延迟加载瀑布流组件，才能保证图片被分为两列。这组件真垃圾。
     }
   },