如何为 Vue.js uiv 库的 Tab 组件设置 类？

Question

我们在项目中使用了 uiv 库。我们有选项卡，我想自定义它们 UI。文档说：

https://uiv.wxsm.space/tabs#tab

我不确定如何使用 Tab 的 API，例如，在某些情况下为不同的标签设置不同的颜色。

我试过这个：

<tab
  v-for="(sectionDescription) in tabbedSectionDescriptions"
  :key="sectionDescription.key"
  :title="sectionDescription.displayName"
  :tab-classes="{ 'paint-tab': true }"
>

<style lang="stylus" scoped>
>>> .nav-tabs
  .paint-tab
    a
      color red
</style>

但是，所有选项卡的标题都涂成红色，这不是我需要的行为。

Answer 1

您必须为某些选项卡定义 return certian class 对象的函数： 在模板中：

:tab-classes="getTabColorClass(sectionDescription)"

在代码中：

methods: {
  getTabColorClass(sectionDescription) {
     switch (sectionDescription.key) {
       'key1': 
          return {
           'paint-tab': true 
          }
       'key2': 
         return {
           'paint-tab2': true 
         }
       default:
         return null
     }
  }
}

风格：

>>> .nav-tabs
  .paint-tab
    a
      color red
  .paint-tab2
    a
      color green