Vue3+ts 封装一个 tab标签页组件

前言：

在写项目的时候，用到了element-plus，在这个项目中需要使用tabs组件，但是使用element-plus 的tab组件来满足项目中的tab样式，有的时候会有点麻烦，且自己也想动手试试封装一个tab组件，于是，开干！！

最终效果图：

这里面的选中下横线用的是绝对定位

 

 .indicator {

    position: absolute;

    bottom: 0;

    height: 2px;

    background-color: @themeColor;

    transition: transform 0.3s ease;

  }

其中还需要去计算他的宽度 width 和 移动量 transform 

/**
 *这里通过computed 来计算 
 * index ：标记选中的是第几个

 * tabs ：获取所有 tab的信息

 * translateX：横向移动的数据

 * width：单个tab的款宽度---注意：如果需要在选中tab的后面加一个标识,比如：“当前”，则  * width和translate 计算有误，后面会出兼容版本
 */

const indicatorStyle = computed(() => {

  const panelParent = myTabsRef.value

  if (panelParent) {

    let index: number

    if (dps.isIndex) {

      index = Number(dps.active)

    } else {

      index = dps.data.findIndex((r: any) => r[getDefaultProps.value.id] === dps.active)

    }

    const tabs = panelParent.querySelectorAll('.myTab__header_item')

    let translateX = 0, width = 0

    // 移动指示器到选中的标签

    if (tabs.length && index !== -1) {

      const selectedTab = tabs[index]

      const selectedTabRect = selectedTab.getBoundingClientRect()

      width = selectedTabRect.width

      const tabsHeaderRect = selectedTab.parentNode.getBoundingClientRect()

      translateX = selectedTabRect.left - tabsHeaderRect.left

    }

    return {

      transform: `translateX(${translateX}px)`,

      width: `${width}px`

    }

  }

  return {}

})

具体代码：

 

以上就是完整代码了

单个tab的款宽度-需注意：如果需要在选中tab的后面加一个标识,比如：“当前”，则   width和translate 计算有误，后面会出兼容版本

后续会出兼容版本，尽情期待