标签拦 TabBar

基本用法

<za-cell title="隐藏 | 展示">
  <za-button slot="description" ghost @click="toggle">隐藏</za-button>
</za-cell>
<za-tab-bar :visible="visible" :defaultActiveKey="1" @change="handleChange">
  <za-tab-bar-item :item-key="1" title="首页">
      <za-icon slot="icon" tag="symbol" type="home" class="icon"></za-icon>
      <za-icon slot="activeIcon" tag="symbol" theme="primary" type="home" class="icon"></za-icon>
  </za-tab-bar-item>
  <za-tab-bar-item :item-key="2" title="保险">
      <za-badge slot="icon" sup shape="circle" text="3" @click="handleClick">
        <za-icon tag="symbol" type="insurance" class="icon"></za-icon>
      </za-badge>
      <za-badge slot="activeIcon" sup shape="circle" text="3" @click="handleClick">
        <za-icon tag="symbol" theme="primary" type="insurance" class="icon"></za-icon>
      </za-badge>
  </za-tab-bar-item>
  <za-tab-bar-item :item-key="3" title="用户">
      <za-icon slot="icon" tag="symbol" type="user" class="icon"></za-icon>
      <za-icon slot="activeIcon" tag="symbol" theme="primary" type="user" class="icon"></za-icon>
  </za-tab-bar-item>
</za-tab-bar>

Vue Script

<script name="vue">
export default {
  data() {
    return {
      activeKey: 1,
      visible: true,
    }
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    },
    handleChange(value) {
      alert(value);
    }
  },
};
</script>

API

TabBar

TabBarItem

TabBar Events