SortList 排序列表

单一视图标签页，对 el-tabs 进行了二次封装，用于支持展示内容视图相同仅数据类型不同的标签页，例如多种类型数据列表展示。

基本用法

User

Config

Role

Task

first

点击查看代码

<template>
  <s-tab-links v-model="activeTab" :options="tabLinks">
    <div style="padding: 10px;background: #f5f7fa;">{{ activeTab }}</div>
  </s-tab-links>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const activeTab = ref<string>("first");
  const tabLinks = ref<Record<string, any>[]>([
    { label: "User", name: "first" },
    { label: "Config", name: "second" },
    { label: "Role", name: "third" },
    { label: "Task", name: "fourth" }
  ]);
</script>

页签样式

页签类型:

默认卡片带边框卡片

User

Config

Role

Task

first

点击查看代码

<template>
  <s-form labelWidth="80px" showColon>
    <s-form-item label="页签类型">
      <el-radio-group v-model="tabType">
        <el-radio value="">默认</el-radio>
        <el-radio value="card">卡片</el-radio>
        <el-radio value="border-card">带边框卡片</el-radio>
      </el-radio-group>
    </s-form-item>
  </s-form>

  <s-tab-links v-model="activeTab" :type="tabType" :options="tabLinks">
    <div style="padding: 10px;background: #f5f7fa;">{{ activeTab }}</div>
  </s-tab-links>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const tabType = ref<string>("");

  const activeTab = ref<string>("first");
  const tabLinks = ref<Record<string, any>[]>([
    { label: "User", name: "first" },
    { label: "Config", name: "second" },
    { label: "Role", name: "third" },
    { label: "Task", name: "fourth" }
  ]);
</script>

页签位置

页签位置:

上下左右

User

Config

Role

Task

first

点击查看代码

<template>
  <s-form labelWidth="80px" showColon>
    <s-form-item label="页签位置">
      <el-radio-group v-model="tabPosition">
        <el-radio value="top">上</el-radio>
        <el-radio value="bottom">下</el-radio>
        <el-radio value="left">左</el-radio>
        <el-radio value="right">右</el-radio>
      </el-radio-group>
    </s-form-item>
  </s-form>

  <s-tab-links v-model="activeTab" :tabPosition="tabPosition" :options="tabLinks">
    <div style="padding: 10px;background: #f5f7fa;">{{ activeTab }}</div>
  </s-tab-links>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const tabPosition = ref<string>("top");

  const activeTab = ref<string>("first");
  const tabLinks = ref<Record<string, any>[]>([
    { label: "User", name: "first" },
    { label: "Config", name: "second" },
    { label: "Role", name: "third" },
    { label: "Task", name: "fourth" }
  ]);
</script>

Props

Slots

Emits