feat(components): [tabs] 新增一些属性

Ce1ling · Oct 4, 2023 · 942090e · 942090e
1 parent 5615b76
commit 942090e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/packages/components/Tabs/TabHeader.vue b/packages/components/Tabs/TabHeader.vue
@@ -63,8 +63,8 @@ const getNavbarOffset = computed(() => {
 })
 
 const getBarStyles = computed(() => ({
-  width: `${getNavbarWidth.value}px`,
-  maxWidth: `${getNavbarWidth.value}px`,
+  width: tabsProps.barWidth ?? `${getNavbarWidth.value}px`,
+  maxWidth: tabsProps.barWidth ?? `${getNavbarWidth.value}px`,
   height: getNavbarHeight.value,
   backgroundColor: tabsProps.activeBgColor,
   transform: `translateX(${getNavbarOffset.value}px)`,
@@ -159,17 +159,20 @@ const handleNavbar = (el: TabsHeaderRefEl) => {
 
 const hRenderTabHeader = (type: string, vNode: VNode, idx: number) => {
   const isActive = tabsProps.modelValue === vNode.props?.name
+  const style: { [k: string]: string } = {}
+
+  if (isActive && tabsProps.activeColor) {
+    style['--vi-tabs-active-color'] = tabsProps.activeColor
+  } else if (isActive && !tabsProps.showBar) {
+    style['--vi-tabs-active-color'] = 'var(--vi-color-primary)'
+  }
 
   return h(
     type,
     {
       ...vNode.props,
-      class: [
-        'vi-tabs__header-item',
-        {
-          'is-active': isActive,
-        },
-      ],
+      style,
+      class: ['vi-tabs__header-item', { 'is-active': isActive }],
       ref: tabsHeaderNodes[idx].ref,
       onClick: (e: MouseEvent) => {
         const { name } = vNode.props ?? {}
@@ -216,7 +219,7 @@ onBeforeUnmount(() => unobserve(tabsHeader.value!))
     v-bind="$attrs"
     ref="tabsHeader"
   >
-    <div class="vi-tabs__bar" :style="getBarStyles" />
+    <div v-if="tabsProps.showBar" class="vi-tabs__bar" :style="getBarStyles" />
     <RenderTabHeader />
   </div>
 </template>

diff --git a/packages/components/Tabs/Tabs.vue b/packages/components/Tabs/Tabs.vue
@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<TabsProps>(), {
   headerPadding: '6px',
   barHeight: '2px',
   center: false,
+  showBar: true,
 })
 const emit = defineEmits<TabsEmits>()
 const slots = useSlots()

diff --git a/packages/components/Tabs/tabs.ts b/packages/components/Tabs/tabs.ts
@@ -13,6 +13,9 @@ export interface TabsProps {
   barHeight?: string
   center?: boolean
   barHalf?: boolean
+  barWidth?: string
+  showBar?: boolean
+  activeColor?: string
 }
 
 export interface TabsEmits {