Tab 选项组 - 图1

Tab参数

参数 说明 类型 可选值 默认值
type tab导航的样式 string light & dark ——
navWidth tab导航width number —— ——
navHeight tab导航height number —— ——
activeColor 高亮颜色 string —— ——
activeBgColor 高亮状态下背景色 string —— ——
itemBgColor tab导航item单个背景，default模式下为图上第二个tab效果 string —— ——
navColor tab导航统一颜色，highlight模式下可控制整体theme颜色 string —— ——
navBgColor tab导航背景色 string —— ——
navBorderColor tab导航边框颜色 string —— ——
onNavClick tab选项切换时点击事件，可用于自定义tab切换效果，返回false会阻止 tab切换，可用户实现loading效果 function —— ——

TabItem参数

参数 说明 类型 可选值 默认值
label 展示的title string —— ——
navProps 属性对象，定制导航slot时候会传递到slot-scope中，可在对应到slot中获取使用 object —— ——
exists 和v-if一个效果，控制tab是否渲染，因为整个tab使用slot实现用v-if实现响应效率不好，所以添加exists属性实现类似效果 boolean true false & true

Event

事件名称 说明 回调参数
onTabSpill tabIndex超出tab个数会小于0时会触发 新的value，tabIndex最大值

Slot

slot name 说明
tab-nav-item 可定制tab导航item，使用slot-scope可获取label, index, active, navProps属性，具体用法可参考demo

引入代码

  1. import Vue from 'vue'
  2. import { Tab, TabItem } from 'genie-ui'

默认风格

  1. // html
  2. <tab v-model="tabIndex" style="height: 80px" :nav-list="navList">
  3.     <div slot-scope="{ activeIndex, nav }">activeIndex:{{activeIndex}} {{nav.label}}</div>
  4. </tab>
  6. // js
  7. data() {
  8.   return : {
  9.     navList: [ { label: 'title1' }, { label: 'title2' }, { label: 'title3' }, { label: 'title4' } ]
  10.   }
  11. }

Tab 选项组 - 图2

浅背景样式

  1. <tab v-model="tabIndex" type="light" style="height: 80px">
  2.       <iot-tab-item label="年">年1</iot-tab-item>
  3.       <iot-tab-item label="月">月</iot-tab-item>
  4.       <iot-tab-item label="周">周</iot-tab-item>
  5.       <iot-tab-item label="日">日</iot-tab-item>
  6. </tab>

Tab 选项组 - 图3

深色背景样式

  1. <tab v-model="tabIndex" type="dark" style="height: 80px">
  2.       <iot-tab-item label="年">年2</iot-tab-item>
  3.       <iot-tab-item label="月">月</iot-tab-item>
  4.       <iot-tab-item label="周">周</iot-tab-item>
  5.       <iot-tab-item label="日">日</iot-tab-item>
  6. </tab>

Tab 选项组 - 图4

使用slot定制导航item

  1. <template>
  2.   <div>
  3.     <tab v-model="tabIndex" >
  4.       <span slot="tab-nav-item" slot-scope="{ label, index, active, navProps }">
  5.         {{label}}<s v-if="navProps.icon">{{navProps.icon}}</s>
  6.         <s v-if="navProps.num">{{navProps.num}}</s>
  7.         <s v-if="active">A</s>
  8.       </span>
  9.       <tab-item label="年" :nav-props="{icon: 'icon-Y'}">年</tab-item>
  10.       <tab-item label="月" :exists="tabExists1">月</tab-item>
  11.       <tab-item label="周" :nav-props="propsWeek">周</tab-item>
  12.       <tab-item label="日">日</tab-item>
  13.     </tab>
  15.     <a @click="propsWeek.num++">周Num++</a>
  16.     <a @click="tabExists1 = !tabExists1">toggle tab</a>    
  17.   </div>
  18. </template>
  20. <script>
  21. import Vue from 'vue'
  22. import { Tab, TabItem } from 'genie-ui'
  24. export default{
  25.   components: {
  26.     Tab,
  27.     TabItem
  28.   },
  29.   data() {
  30.     return {
  31.       tabIndex: 0,
  32.       tabExists1: true,
  33.       propsWeek: {
  34.         num: 1
  35.       }
  36.     }
  37.   }
  38. }
  39. </script>

Tab 选项组 - 图5