安装

通过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

Props	类型	需要	描述
tabs	Array	true	描述
currentTab	String	true	活动标签值
onClick	Function	true	单击时返回新的选项卡值
updated	Boolean/String/Array	false	自定义更新活动行的道具
wrapperClass	String	false	容器的自定义类
tabClass	String	false	选项卡项目的自定义类
tabActiveClass	String	false	活动标签项目的自定义类别
lineClass	String	false	活动线路的自定义类别

---

官网：https://github.com/karambafe/vue-tabs-with-active-line

演示：https://www.vue365.cn/code_demo.php?id=1421

GitHub下载：https://github.com/karambafe/vue-tabs-with-active-line/archive/master.zip