XTabs 选项卡

示例

基础用法

选项面板一

选项面板二

选项面板三

选项面板一

选项面板二

选项面板三

选项面板一

选项面板二

选项面板三

<template>
  <div class="page">
    <XTabs
      :items="items"
      v-model="currentValue"
      border
      @action-click="onClick"
      @action-command="onCommand"></XTabs>

    <XTabs
      :items="items"
      v-model="currentValue"
      align="right"
      @action-click="onClick"
      @action-command="onCommand"></XTabs>

    <XTabs
      :items="items"
      type="card"
      closable
      stretch
      v-model="currentValue"
      @action-click="onClick"
      @actionCommand="onCommand"></XTabs>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { XTabs, type TabsItem } from '@vtj/ui';
  import { Setting, DeleteFilled } from '@vtj/icons';

  const currentValue = ref(1);

  const items: TabsItem[] = [
    {
      label: '选项面板一',
      name: 1,
      lazy: true,
      data: [1]
    },
    {
      label: '选项面板二',
      name: 2,
      lazy: true,
      data: [2]
    },
    {
      label: '选项面板三',
      name: 3,
      lazy: true,
      data: [3],
      actions: [
        {
          name: 'add',
          icon: Setting
        },
        {
          name: 'remove',
          icon: DeleteFilled
        }
      ]
    }
  ];

  const onClick = (e: any) => {
    console.log('click-icon', e);
  };

  const onCommand = (e: any) => {
    console.log('click-command', e);
  };
</script>

<style scoped>
  .page {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
</style>

插槽用法

选项面板一

选项面板二

选项面板三

<template>
  <div class="page">
    <XTabs :items="items" v-model="currentValue">
      <template #default="{ name }">
        <MyComp :name="name"></MyComp>
        <!-- <div>{{ Date.now() }} {{ console.log('tab', name) }}</div> -->
      </template>
    </XTabs>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineComponent, h } from 'vue';
  import { XTabs, type TabsItem } from '@vtj/ui';
  import { Setting, DeleteFilled } from '@vtj/icons';

  const currentValue = ref(1);

  const MyComp = defineComponent({
    props: {
      name: [String, Number, Array]
    },
    render() {
      console.log('render', this.name);
      return h('div', 'hello:' + this.name);
    },
    mounted() {
      console.log('mounted');
    },
    updated() {
      console.log('updated');
    }
  });

  const items: TabsItem[] = [
    {
      label: '选项面板一',
      name: 1,
      lazy: true,
      data: [1]
    },
    {
      label: '选项面板二',
      name: 2,
      lazy: true,
      data: [2]
    },
    {
      label: '选项面板三',
      name: 3,
      lazy: true,
      data: [3],
      actions: [
        {
          name: 'add',
          icon: Setting
        },
        {
          name: 'remove',
          icon: DeleteFilled
        }
      ]
    }
  ];
</script>

<style scoped>
  .page {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
</style>

API

属性

属性名	说明	类型	默认值
items	选项	array	[]
border	显示下划线	boolean	false
fit	自适应宽高	boolean	-
align	对齐方式	string< left | center | right >	left
modelValue	当前激活项	number	1
type	选项卡类型	string <card | border-card>	-
closable	展示删除的图标	boolean	false
addable	展示添加的图标	boolean	false
editable	展示编辑的图标	boolean	false
tabPosition	选项卡位置	string	top
stretch	伸展	boolean	false
beforeLeave

事件

名称	说明	类型
actionClick	点击图标时触发	-
actionCommand	点击每一项时触发	-

插槽

名称	说明	类型
default	-	-