ha-tabs
安装
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 |
效果
