vue 3学习记录之选项卡 tabs

html/vue

  <!-- 选项卡 -->
      <!-- <div v-bind:class="{ active: isActive }"></div> ; 
        //这里我们使用isActive 这个变量动态判断active是否显示到html -->
      <div class="mytab">
        <div class="tabs">
          <div
            type="button"
            v-for="(tab, index) in tabs"
            :key="index"
            @click="switchTab(index)"
            :class="{ active: currentTab === index }"
          >
            {{ tab.title }}
          </div>
        </div>
        <component :is="currentTabComponent" />
      </div>

js内容

/*采用vue选项式风格*/
import { ref } from 'vue';
import ComponentA from './views/book_1.vue';
import ComponentB from './views/book_2.vue';
import ComponentC from './views/book_3.vue';

let tabs = [
    { title: '史地理论', component: ComponentA },
    { title: '史地志', component: ComponentB },
    { title: '地方志', component: ComponentC },
]
// 当前选中的tab索引
let currentTab = ref(0);
// 根据当前索引获取对应的组件
// 切换Tab函数
function switchTab(tabIndex) {
    currentTab.value = tabIndex;
}
export default {
    data() {
        return {
            tabs,
            currentTab,
        };
    },
    methods: {
        switchTab,
    },
    computed: {
        currentTabComponent: () => { return tabs[currentTab.value].component; }
    }
};

css样式

.tabs{
    display: flex;
    justify-content: center;
    height: 60px;
    margin:auto;
    background-color: rgb(160, 241, 241);
}
.tabs div{
    position: relative;
    text-align: center;
    height: 100%;
    width: 7%;
    color: rgb(80, 93, 107);
    background-color: rgb(160, 241, 241);
    line-height: 350%;

}
.tabs .active {
    background-image: linear-gradient(to right, #a6c1ee, #7bd38e); /* 设置激活的Tab标题颜色 */
  }