solar-vue

# tab

import { Tab, TabItem } from 'solar-vue'
Vue.component(Tab.name, Tab)
Vue.component(TabItem.name, TabItem)
/*
or
Vue.use(Icon)
*/

源代码

<template>
  <div>
    <div class="demo-title">基本用法</div>
    <div class="demo-container">
      <sv-tab v-model="value1">
        <sv-tab-item v-for="(mess, index) in list1" :key="index">{{
          mess
        }}</sv-tab-item>
      </sv-tab>
    </div>
    <div class="demo-title">自定义颜色</div>
    <div class="demo-container">
      <sv-tab v-model="value2" activeColor="#ff976a">
        <sv-tab-item v-for="(mess, index) in list1" :key="index">{{
          mess
        }}</sv-tab-item>
      </sv-tab>
    </div>
    <div class="demo-title">禁用部分菜单</div>
    <div class="demo-container">
      <sv-tab v-model="value3">
        <sv-tab-item>首页</sv-tab-item>
        <sv-tab-item>消息</sv-tab-item>
        <sv-tab-item disabled>其它</sv-tab-item>
        <sv-tab-item>空间</sv-tab-item>
      </sv-tab>
    </div>
    <div class="demo-title">自定义底部导航</div>
    <div class="demo-container">
      <sv-tab
        v-model="value4"
        :customBarWidth="customBarWidth"
        barActiveColor="rgb(114, 50, 221)"
      >
        <sv-tab-item v-for="(mess, index) in list1" :key="index">{{
          mess
        }}</sv-tab-item>
      </sv-tab>
    </div>
    <div class="demo-title">动态添加tab</div>
    <div class="demo-container">
      <div class="demo-btn-container">
        <sv-button
          type="info"
          icon="add"
          size="mini"
          @click.native="operation('add')"
          >add</sv-button
        >
        <sv-button type="info" icon="add" size="mini" @click.native="go"
          >go 1</sv-button
        >
        <sv-button
          type="danger"
          icon="fail"
          size="mini"
          @click.native="operation('delete')"
          >delete</sv-button
        >
      </div>
      <sv-tab v-model="value5">
        <sv-tab-item v-for="(mess, index) in list2" :key="index">{{
          mess
        }}</sv-tab-item>
      </sv-tab>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
const route = {
  tags: '基础组件',
  label: 'tab',
  path: 'tab'
}
export default {
  ...route,
  data() {
    return {
      value1: 0,
      list1: ['首页', '消息', '空间', '其它', '设置'],
      value2: 1,
      value3: 0,
      value4: 0,
      value5: 0,
      list2: ['首页', '消息', '空间', '其它']
    }
  },
  created() {
    this.commitRoute(route)
  },
  methods: {
    customBarWidth(index) {
      if (!index) index = 0.5
      return index * 20 + 'px'
    },
    operation(type) {
      if (type === 'delete') {
        if (this.list2.length > 3) {
          this.list2.pop()
        }
        return
      }
      this.list2.push('设置')
    },
    go() {
      this.value5 = 1
    },
    ...mapMutations({
      commitRoute: 'changeRoute'
    })
  }
}
</script>

Attributes

参数 说明 类型 可选值 默认值
value v-model绑定 number -- 0
lineWidth 边框高度 number -- 3
activeColor 默认字体选中颜色 string -- true
barActiveColor 边框颜色 string -- false
defaultColor item字体颜色 string -- --
disabledColor 禁用时字体颜色 string -- true
animate 切换过程是否带有动画 Blooean -- true
customBarWidth 自定义边框 function/string -- --
scrollThreshold 超过此数量可滚动 number -- 4
barPosition 边框位置 string top bottom

Event

事件名称 说明 回调参数
on-index-change value 值改变触发 newVal,oldval

TabItem Attributes

参数 说明 类型 可选值 默认值
disabled 是否禁用此选项 boolean -- false
selected 是否选中此选项 boolean -- false

TabItem Event

事件名称 说明 回调参数
on-before-index-change value 值改变前触发 currentIndex
on-item-click value 值改变触发 currentIndex

← notify →