u-tabs使用实例

u-tabs是一个基于Vue.js的轻量级组件库，用于创建可切换的面板或选项卡。下面是一个简单的u-tabs使用实例：

<template>
  <div id="tabs">
    <u-tabs v-model="activeTab" @on-change="handleChange">
      <u-tab title="Tab 1">这是第一个面板的内容</u-tab>
      <u-tab title="Tab 2">这是第二个面板的内容</u-tab>
      <u-tab title="Tab 3">这是第三个面板的内容</u-tab>
    </u-tabs>
    <div v-show="activeTab === '0'">内容1</div>
    <div v-show="activeTab === '1'">内容2</div>
    <div v-show="activeTab === '2'">内容3</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '0', // 初始激活的tab编号
    };
  },
  methods: {
    handleChange(tabIndex) {
      console.log(`当前选中的tab索引是 ${tabIndex}`);
    },
  },
};
</script>

在这个例子中，`v-model`绑定了`activeTab`的数据属性，控制哪个tab是激活状态。当`u-tabs`的`@on-change`事件触发时，会调用`handleChange`方法并传递新的tab索引。内容区域通过`v-show`指令根据激活的tab来显示对应的面板。