34 lines
962 B
Vue
34 lines
962 B
Vue
<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>
|