ha-tabs

说明

该插件内部使用了较多的jsx语法，亦可作为jsx语法的学习使用

安装

npm install ha-tabs

使用

import HaTabs from 'ha-tabs';
import 'ha-tabs/lib/ha-tabs.css';

Vue.use(HaTabs);
.....
<template>
  <div id="app">
   <ha-tabs v-model="activeItem">
      <ha-tabs-head>
        <ha-tabs-item :name="1">1</ha-tabs-item>
        <ha-tabs-item :name="2">2</ha-tabs-item>
        <ha-tabs-item :name="3">3</ha-tabs-item>
        <ha-tabs-item :name="4">4</ha-tabs-item>
        <ha-tabs-item :name="5">5</ha-tabs-item>
      </ha-tabs-head>
      <ha-tabs-body>
        <ha-tabs-pane :name="1">ha 1</ha-tabs-pane>
        <ha-tabs-pane :name="2">ha 2</ha-tabs-pane>
        <ha-tabs-pane :name="3">ha 3</ha-tabs-pane>
        <ha-tabs-pane :name="4">ha 4</ha-tabs-pane>
        <ha-tabs-pane :name="5">ha 5</ha-tabs-pane>
      </ha-tabs-body>
    </ha-tabs>
  </div>
</template>

ha-tabs props

参数	说明	类型
value/v-model	绑定值，选中选项卡的 name	string

ha-tabs events

事件名称	说明	回调参数
tab-click	点击tabs	被选中的标签 tab 实例

ha-tabs-item props

参数	说明	类型
name	与选项卡绑定值 value 对应的标识符，表示选项卡别名	string

效果