安装

通过NPM

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

用法

导入组件

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

定义 props 数据tabs，currentTab用于和方法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