feat(tabs): 支持tab-position属性 (#830)

Author: newer2333

packages/devui-vue/devui/tabs/__tests__/tabs.spec.tsx

@@ -15,6 +15,10 @@ const dotTabsNavPills = dotTabsNs.e('nav--pills');
 const dotTabsNavOptions = dotTabsNs.e('nav--options');
 const dotTabsNavWrapped = dotTabsNs.e('nav--wrapped');
 const dotTabsNavSlider = dotTabsNs.e('nav--slider');
+const dotTabsNavTop = dotTabsNs.e('nav--top');
+const dotTabsNavRight = dotTabsNs.e('nav--right');
+const dotTabsNavBottom = dotTabsNs.e('nav--bottom');
+const dotTabsNavLeft = dotTabsNs.e('nav--left');
 
 describe('Tabs', () => {
  let wrapper: VueWrapper<ComponentPublicInstance>;
@@ -236,4 +240,49 @@ describe('Tabs', () => {
  await nextTick();
  expect(wrapper.find('#tab1').text()).toBe('abc');
  });
+
+ it('tab-position worked', async () => {
+ wrapper = mount({
+ setup() {
+ const id = ref('tab1');
+
+ return () => {
+ return (
+ <Tabs v-model={id.value}>
+ <Tab id="tab1" title="Tab1">
+ Tab1 Content
+ </Tab>
+ <Tab id="tab2" title="Tab2">
+ Tab2 Content
+ </Tab>
+ <Tab id="tab3" title="Tab3">
+ Tab3 Content
+ </Tab>
+ </Tabs>
+ );
+ };
+ },
+ });
+
+ await nextTick();
+ expect(wrapper.find(dotTabsNavTop).exists()).toBe(true);
+
+ wrapper.setProps({
+ tabPosition: 'right',
+ });
+ await nextTick();
+ expect(wrapper.find(dotTabsNavRight).exists()).toBe(true);
+
+ wrapper.setProps({
+ tabPosition: 'bottom',
+ });
+ await nextTick();
+ expect(wrapper.find(dotTabsNavBottom).exists()).toBe(true);
+
+ wrapper.setProps({
+ tabPosition: 'left',
+ });
+ await nextTick();
+ expect(wrapper.find(dotTabsNavLeft).exists()).toBe(true);
+ });
 });

packages/devui-vue/devui/tabs/src/components/tab-nav/composables/use-tab-nav-function.ts

@@ -15,7 +15,12 @@ export function useTabNavFunction(
  setTimeout(() => {
  const tabEle = tabsEle.value.querySelector('#' + props.modelValue + '.active');
  if (tabEle) {
- data.offsetLeft = tabEle.getBoundingClientRect().left - tabsEle.value.getBoundingClientRect().left;
+ if (['top', 'bottom'].includes(props.tabPosition)) {
+ data.offsetLeft = tabEle.getBoundingClientRect().left - tabsEle.value.getBoundingClientRect().left;
+ } else {
+ data.offsetTop = tabEle.getBoundingClientRect().top - tabsEle.value.getBoundingClientRect().top;
+ data.offsetHeight = tabEle.getBoundingClientRect().height;
+ }
  data.offsetWidth = tabEle.getBoundingClientRect().width;
  }
  });
@@ -49,7 +54,12 @@ export function useTabNavFunction(
  if (tab && !tab.disabled) {
  tabs.state.active = item.id;
  if (props.type === 'slider' && tabEl && tabsEle) {
- data.offsetLeft = tabEl.getBoundingClientRect().left - tabsEle.value.nativeElement.getBoundingClientRect().left;
+ if (['left', 'right'].includes(props.tabPosition)) {
+ data.offsetLeft = tabEl.getBoundingClientRect().left - tabsEle.value.nativeElement.getBoundingClientRect().left;
+ } else {
+ data.offsetTop = tabEl.getBoundingClientRect().top - tabsEle.value.nativeElement.getBoundingClientRect().top;
+ data.offsetHeight = tabEl.getBoundingClientRect().height;
+ }
  data.offsetWidth = tabEl.getBoundingClientRect().width;
  }
  ctx.emit('active-tab-change', tab.id);

packages/devui-vue/devui/tabs/src/components/tab-nav/composables/use-tab-nav-render.ts

@@ -1,18 +1,21 @@
 import { computed, StyleValue, toRefs } from 'vue';
 import { TabsProps } from '../../../tabs-types';
-import { UseTabNavRender } from '../tab-nav-types';
+import { OffSetData, UseTabNavRender } from '../tab-nav-types';
 import { useNamespace } from '../../../../../shared/hooks/use-namespace';
 
 const ns = useNamespace('tabs');
 
-export function useTabNavRender(props: TabsProps): UseTabNavRender {
- const { cssClass, vertical, customWidth } = toRefs(props);
+export function useTabNavRender(props: TabsProps, data: OffSetData): UseTabNavRender {
+ const { cssClass, tabPosition, customWidth } = toRefs(props);
 
  const ulClasses = computed(() => ({
  [ns.e('nav')]: true,
  [ns.em('nav', props.type)]: true,
  [cssClass.value]: Boolean(cssClass.value),
- [ns.e('stacked')]: vertical.value,
+ [ns.em('nav', 'top')]: tabPosition.value === 'top',
+ [ns.em('nav', 'right')]: tabPosition.value === 'right',
+ [ns.em('nav', 'bottom')]: tabPosition.value === 'bottom',
+ [ns.em('nav', 'left')]: tabPosition.value === 'left',
  }));
 
  const aClasses = computed(() => ({
@@ -23,5 +26,20 @@ export function useTabNavRender(props: TabsProps): UseTabNavRender {
  width: props.customWidth ? props.customWidth : '',
  };
 
- return { ulClasses, aClasses, customStyle };
+ const sliderAnimationStyle = computed(() => {
+ if (['top', 'bottom'].includes(props.tabPosition)) {
+ return {
+ left: data.offsetLeft + 'px',
+ width: data.offsetWidth + 'px',
+ };
+ } else {
+ return {
+ top: data.offsetTop + 'px',
+ height: data.offsetHeight + 'px',
+ width: data.offsetWidth + 'px',
+ };
+ }
+ });
+
+ return { ulClasses, aClasses, customStyle, sliderAnimationStyle };
 }

packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav-types.ts

@@ -4,11 +4,14 @@ export interface UseTabNavRender {
  ulClasses: ComputedRef<Record<string, boolean>>;
  aClasses: ComputedRef<Record<string, boolean>>;
  customStyle: StyleValue;
+ sliderAnimationStyle: ComputedRef<Record<string, string | undefined>>;
 }
 
 export interface OffSetData {
  offsetLeft: number;
  offsetWidth: number;
+ offsetTop: number;
+ offsetHeight: number;
  id: null;
 }