Tab 选项组

更新时间：2019/03/05 访问次数：1473

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

引入

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

1、默认风格

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

2、浅背景样式

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

3、深色背景样式

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

4、使用slot定制导航item

<template>
  <div>
    <tab v-model="tabIndex" >
      <span slot="tab-nav-item" slot-scope="{ label, index, active, navProps }">
        {{label}}<s v-if="navProps.icon">{{navProps.icon}}</s>
        <s v-if="navProps.num">{{navProps.num}}</s>
        <s v-if="active">A</s>
      </span>
      <tab-item label="年" :nav-props="{icon: 'icon-Y'}">年</tab-item>
      <tab-item label="月" :exists="tabExists1">月</tab-item>
      <tab-item label="周" :nav-props="propsWeek">周</tab-item>
      <tab-item label="日">日</tab-item>
    </tab>
 
    <a @click="propsWeek.num++">周Num++</a>
    <a @click="tabExists1 = !tabExists1">toggle tab</a>    
  </div>
</template>
 
<script>
import Vue from 'vue'
import { Tab, TabItem } from 'genie-ui'
 
export default{
  components: {
    Tab,
    TabItem
  },
  data() {
    return {
      tabIndex: 0,
      tabExists1: true,
      propsWeek: {
        num: 1
      }
    }
  }
}
</script>

FAQ

关于此文档暂时还没有FAQ

有用(0) 我要提问

开放平台

天猫精灵IoT开放平台

Tab 选项组

Tab参数

TabItem参数

Event

Slot

引入

1、默认风格

2、浅背景样式

3、深色背景样式

4、使用slot定制导航item

FAQ