Vue 2 制作带有移动底线的标签组件 - vue-tabs-with-active-line

Vue 2 制作带有移动底线的标签组件 - vue-tabs-with-active-line
插件名称 vue-tabs-with-active-line
发布时间 2020年7月19日
插件作者 karambafe

安装

通过NPM

npm install vue-tabs-with-active-line --save

用法

导入组件

import Tabs from 'vue-tabs-with-active-line';

定义 props 数据tabscurrentTab用于和方法onClick回调

export default {
  components: {
    Tabs,
  },
  data: () => ({
    tabs: [
      { title: 'Tab 1', value: 'tab1' },
      { title: 'Tab 2', value: 'tab2' },
      { title: 'Tab 3', value: 'tab3', }
    ],
    currentTab: 'tab1',
  }),
  methods: {
    handleClick(newTab) {
      this.currentTab = newTab;
    },
  },
}
</script>

这是根据输入的数据生成的HTML结构:

  <nav class="tabs">
    <button class="tabs__item tabs__item_active"> Tab 1 </button> <!-- active tab -->
    <button class="tabs__item"> Tab 2 </button>
    <button class="tabs__item"> Tab 3 </button>

    <div class="tabs__active-line"></div>
  </nav>

为组件元素添加一些样式:

  • .tabs -组件包装
  • .tabs__item -按钮
  • .tabs__item_active -活动按钮
  • .tabs__active-line -底线

一定要加 position: relative;.tabs

position: absolute;带有类的bottom, left, height, background-color属性.tabs__active-line

Props类型需要描述
tabsArraytrue描述
currentTabStringtrue活动标签值
onClickFunctiontrue单击时返回新的选项卡值
updatedBoolean/String/Arrayfalse自定义更新活动行的道具
wrapperClassStringfalse容器的自定义类
tabClassStringfalse选项卡项目的自定义类
tabActiveClassStringfalse活动标签项目的自定义类别
lineClassStringfalse活动线路的自定义类别