Vue.js 开发中如何禁用网站内无内容的 tab 选项卡

核心处理逻辑 #

• 渲染Tab列表前先对每个Tab对应的内容做非空校验：
  • 内容为数组：判断内容数组.length === 0
  • 内容为字符串/富文本：判断内容.trim() === ''
  • 内容为异步接口返回数据：需等待接口返回后再做校验，避免初始空值导致误判
• 校验不通过（无内容）的Tab项添加disabled标识，渲染时绑定对应禁用样式和交互拦截逻辑
• 若使用Element UI、Ant Design等第三方封装的Tab组件，直接将校验得到的布尔值绑定到组件自带的disabled属性即可，无需额外处理样式和交互

原生JS实现示例 #

const tabItems = document.querySelectorAll('.tab-item')
const tabContents = document.querySelectorAll('.tab-content')

tabItems.forEach((tab, index) => {
  const currentContent = tabContents[index]
  // 判断当前Tab对应内容是否为空
  if (currentContent.innerHTML.trim() === '') {
    tab.classList.add('disabled')
    // 拦截点击事件
    tab.onclick = (e) => e.stopPropagation()
  }
})

配套禁用样式：

.tab-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

Vue3实现示例 #

<template>
  <div class="tab-wrap">
    <div 
      v-for="(tab, index) in tabList" 
      :key="index"
      class="tab-item"
      :class="{ disabled: !tab.content.trim() }"
      @click="tab.content.trim() && switchTab(index)"
    >
      {{ tab.title }}
    </div>
  </div>
</template>

<script setup>
const tabList = [
  { title: 'Tab1', content: '这是Tab1的正文内容' },
  { title: 'Tab2', content: '' } // 无内容，会被自动禁用
]

const switchTab = (index) => {
  // Tab切换的业务逻辑
}
</script>

React实现示例 #

import { useState } from 'react'

const TabComponent = () => {
  const [tabList] = useState([
    { title: 'Tab1', content: '这是Tab1的正文内容' },
    { title: 'Tab2', content: '' }
  ])
  const [activeIndex, setActiveIndex] = useState(0)

  const handleSwitchTab = (index) => {
    // 仅允许切换到有内容的Tab
    if (tabList[index].content.trim()) {
      setActiveIndex(index)
    }
  }

  return (
    <div className="tab-wrap">
      {tabList.map((tab, index) => (
        <div
          key={index}
          className={`tab-item ${!tab.content.trim() ? 'disabled' : ''} ${index === activeIndex ? 'active' : ''}`}
          onClick={() => handleSwitchTab(index)}
        >
          {tab.title}
        </div>
      ))}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Anirudh Vashisht