<template>
  <l-button style="margin-bottom:20px" name="切换tab选中" @click="toggleGap" />
  <l-tabs
    data-theme="light"
    v-model="activeName"
    :tabs="tabs"
    :gap="0"
    @tab-click="handleClick"
  ></l-tabs>
  <!-- vue2中使用 :modelValue.sync -->
  <l-tabs
    data-theme="dark"
    :modelValue.sync="activeName"
    :tabs="tabs"
    :gap="20"
    :clickable="false"
    @tab-click="handleClick"
  ></l-tabs>

    <l-tabs
    data-theme="dark"
    :modelValue.sync="activeName"
    :tabs="tabs"
    :gap="20"
    wrap
  ></l-tabs>
</template>
<script>
export default {
  data() {
    return {
      gap: 0,
      activeName: "",
      tabs: [
        {
          label: "nestjs",
          params: {
            key1: "val1",
          },
        },
        {
          label: 0,
          subTit: 0,
          params: {
            key2: "val2",
          },
        },
        {
          label: "nestjs3",
          subTit: "nestjs",
          img: "https://www.nestjs.com.cn/img/logo.png",
          params: {
            key1: "val1",
            key2: "val2",
          },
        },
      ],
    };
  },
  methods: {
    handleClick(tab) {
      console.log(tab);
    },
    toggleGap() {
      this.activeName = "nestjs3";
    },
  },
};
</script>
<style>
.l-detail-box {
  margin-bottom: 20px;
}
</style>