标签页 Tabs

基本

<za-tabs v-model="activeName" @change="handleClick">
  <za-tab-panel label="用户管理" name="first">
    <div class="content">用户管理</div>
  </za-tab-panel>
  <za-tab-panel label="配置管理" name="second">
    <div class="content">配置管理</div>
  </za-tab-panel>
  <za-tab-panel label="角色管理" name="third">
    <div class="content">角色管理</div>
  </za-tab-panel>
</za-tabs>

可滑动

<za-tabs v-model="activeNameSwipe" @change="handleClick" slideable>
  <za-tab-panel label="选项卡1" name="first">
    <div class="content">试试左滑</div>
  </za-tab-panel>
  <za-tab-panel label="选项卡2" name="second">
    <div class="content">试试左右滑</div>
  </za-tab-panel>
  <za-tab-panel label="选项卡3" name="third">
    <div class="content">试试右滑</div>
  </za-tab-panel>
</za-tabs>

指定默认选项

<za-tabs v-model="activeName8" @change="handleClick">
  <za-tab-panel label="用户管理" name="first">
    <div class="content">用户管理</div>
  </za-tab-panel>
  <za-tab-panel label="配置管理" name="second">
    <div class="content">配置管理</div>
  </za-tab-panel>
  <za-tab-panel label="角色管理" name="third">
    <div class="content">角色管理</div>
  </za-tab-panel>
</za-tabs>

指定线条宽度

<za-tabs v-model="activeName9" @change="handleClick" :lineWidth="60">
  <za-tab-panel label="用户管理" name="first">
    <div class="content">用户管理</div>
  </za-tab-panel>
  <za-tab-panel label="配置管理" name="second">
    <div class="content">配置管理</div>
  </za-tab-panel>
  <za-tab-panel label="角色管理" name="third">
    <div class="content">角色管理</div>
  </za-tab-panel>
</za-tabs>

禁用指定选项

<za-tabs v-model="activeName0" @change="handleClick">
  <za-tab-panel label="用户管理" name="first">
    <div class="content">用户管理</div>
  </za-tab-panel>
  <za-tab-panel label="配置管理" name="second" disabled>
    <div class="content">配置管理</div>
  </za-tab-panel>
  <za-tab-panel label="角色管理" name="third">
    <div class="content">角色管理</div>
  </za-tab-panel>
</za-tabs>

Vue Script

<script name="vue">
export default {
  data() {
    return {
      activeName: 'first',
      activeName2: 'first',
      activeName3: 'first',
      activeName4: 'first',
      activeName5: 'first',
      activeName6: 'first',
      activeName7: 'first',
      activeName8: 'second',
      activeName9: 'first',
      activeName0: 'first',
      activeNameSwipe: 'first',
    }
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleClick2(tab, event){
      this.activeName7 = this.activeName6;
    }
  },
};
</script>

API

Tabs Attributes

Tabs Event

Tab Panel Attributes