u

code/g3soft-libs/docs/examples/segmented/custom-label.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// #label 插槽：完全自定义每项内容，作用域参数为 { option, index, checked }
+import { ref } from 'vue'
+import { G3Segmented } from '@g3soft/ui'
+
+const value = ref(1)
+
+const options = [
+  { value: 1, label: '待办', count: 8 },
+  { value: 2, label: '进行中', count: 3 },
+  { value: 3, label: '已完成', count: 12 },
+]
+</script>
+
+<template>
+  <G3Segmented v-model="value" :options="options">
+    <template #label="{ option, checked }">
+      <span style="display: inline-flex; align-items: center; gap: 6px">
+        {{ (option as { label: string }).label }}
+        <span
+          :style="{
+            padding: '0 6px',
+            borderRadius: '8px',
+            fontSize: '12px',
+            background: checked ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.06)',
+          }"
+        >
+          {{ (option as { count: number }).count }}
+        </span>
+      </span>
+    </template>
+  </G3Segmented>
+</template>