Vue.js uiv 라이브러리의 Tab 구성 요소에 대한 클래스를 설정하는 방법은 무엇입니까? (How to set up classes for Vue.js uiv library's Tab component?)

문제 설명

Vue.js uiv 라이브러리의 Tab 구성 요소에 대한 클래스를 설정하는 방법은 무엇입니까? (How to set up classes for Vue.js uiv library's Tab component?)

우리 프로젝트에서는 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>

그러나 모든 탭의 제목이 빨간색으로 칠해져 있는데, 이는 내가 원하는 동작이 아닙니다.

참조 솔루션

방법 1:

You have to define function that return certian class object for certain tab: in template:

:tab‑classes="getTabColorClass(sectionDescription)"

in code:

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

in style:

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

(by tesicg、Anatoly)

참조 문서

1. How to set up classes for Vue.js uiv library's Tab component? (CC BY‑SA 2.5/3.0/4.0)