Segmented 分段控制器

基础用法

MonTueWedThuFriSatSun

<script setup lang="ts">
import { TkSegmented } from "vitepress-theme-teek";
import { ref } from "vue";

const selected = ref("Mon");

const options = [
  { value: "Mon", label: "Mon" },
  { value: "Tue", label: "Tue" },
  { value: "Wed", label: "Wed" },
  { value: "Thu", label: "Thu" },
  { value: "Fri", label: "Fri" },
  { value: "Sat", label: "Sat" },
  { value: "Sun", label: "Sun" },
];
</script>

<template>
  <TkSegmented v-model="selected" :options />
</template>

隐藏源代码

图标使用

<script setup lang="ts">
import { TkSegmented } from "vitepress-theme-teek";
import { ref } from "vue";

const selected = ref("ep:cpu");

const options = [
  { value: "ep:coordinate", icon: "ep:coordinate" },
  { value: "ep:copy", icon: "ep:copy-document" },
  { value: "ep:cpu", icon: "ep:cpu" },
  { value: "ep:credit-card", icon: "ep:credit-card" },
  { value: "ep:crop", icon: "ep:crop" },
  { value: "ep:d-arrow-left", icon: "ep:d-arrow-left" },
  { value: "ep:d-arrow-right", icon: "ep:d-arrow-right" },
];
</script>

<template>
  <TkSegmented v-model="selected" :options />
</template>

隐藏源代码

API

配置项

名称	说明	类型	默认值
v-model	选中项绑定值	string / number / object / boolean	—
options	选项的数据	SegmentedOption[]	[]
disabled	是否禁用	boolean	false

SegmentedOption 配置项

名称	说明	类型	默认值
value	选择的值	string / Object / Comment / IconifyIcon	—
label	展示名称	string	—
icon	展示图标，和 label 二选一	string	—
title	鼠标悬停的 Tip	string	—
name	input 标签的 name	string	—