useSegmented

快速为你的数据定义分段控制器。

• 更多可配置选项请参考 SegmentedProps

基础用法

<script setup lang="ts">
import { useSegmented } from '@vuecraft/components'

const [Segmented] = useSegmented({
  defaultValue: 'Mon',
  columns: [
    { label: 'Mon', value: 'Mon' },
    { label: 'Tue', value: 'Tue' },
    { label: 'Wed', value: 'Wed' },
    { label: 'Thu', value: 'Thu' },
    { label: 'Fri', value: 'Fri' },
    { label: 'Sat', value: 'Sat' },
    { label: 'Sun', value: 'Sun' },
  ],
})
</script>

<template>
  <div>
    <Segmented />
  </div>
</template>

自定义渲染项内容

<script setup lang="ts">
import { useSegmented } from '@vuecraft/components'
import { h } from 'vue'

const [Segmented] = useSegmented({
  defaultValue: 'Apple',
  columns: [
    {
      label: 'Apple',
      value: 'Apple',
      render: item => h('span', { class: 'custom-content' }, `Custom: ${item.label}`),
    },
    { label: 'Cherry', value: 'Cherry' },
    { label: 'Grape', value: 'Grape' },
  ],
})
</script>

<template>
  <div>
    <Segmented />
  </div>
</template>

自定义默认插槽

<script setup lang="ts">
import { useSegmented } from '@vuecraft/components'

const [Segmented] = useSegmented({
  defaultValue: 'Mon',
  columns: [
    { label: 'Mon', value: 'Mon' },
    { label: 'Tue', value: 'Tue' },
  ],
})
</script>

<template>
  <div>
    <Segmented>
      <template #default="{ item }">
        <span class="custom-slot">{{ item.label }}</span>
      </template>
    </Segmented>
  </div>
</template>

v-model 控制

使用 v-model 控制选中的值。

<script setup lang="ts">
import { useSegmented } from '@vuecraft/components'

const [Segmented, value] = useSegmented({
  defaultValue: 'Mon',
  columns: [
    { label: 'Mon', value: 'Mon' },
    { label: 'Tue', value: 'Tue' },
    { label: 'Wed', value: 'Wed' },
  ],
})

function selectWed() {
  value.value = 'Wed'
}
</script>

<template>
  <div>
    <Segmented v-model="value" />
    <p>Current value: {{ value }}</p>
    <button @click="selectWed">
      Select Wed
    </button>
  </div>
</template>

禁用

<script setup lang="ts">
import { useSegmented } from '@vuecraft/components'

const [Segmented] = useSegmented({
  defaultValue: 'Mon',
  disabled: true,
  columns: [
    { label: 'Mon', value: 'Mon' },
    { label: 'Tue', value: 'Tue' },
  ],
})
</script>

<template>
  <div>
    <Segmented />
  </div>
</template>

块级宽度

<script setup lang="ts">
import { useSegmented } from '@vuecraft/components'

const [Segmented] = useSegmented({
  defaultValue: 'Mon',
  block: true,
  columns: [
    { label: 'Mon', value: 'Mon' },
    { label: 'Tue', value: 'Tue' },
  ],
})
</script>

<template>
  <div>
    <Segmented />
  </div>
</template>

方向

<script setup lang="ts">
import { useSegmented } from '@vuecraft/components'

const [Segmented] = useSegmented({
  defaultValue: 'Mon',
  direction: 'vertical',
  columns: [
    { label: 'Mon', value: 'Mon' },
    { label: 'Tue', value: 'Tue' },
  ],
})
</script>

<template>
  <div>
    <Segmented />
  </div>
</template>

异步数据

<script setup lang="ts">
import { useSegmented } from '@vuecraft/components'

async function fetchSegmented() {
  const res = await fetch('/api/segmented')
  return res.json()
}

function formatData(data: any) {
  return data.map((item: any) => ({
    label: item.label,
    value: item.value,
  }))
}

const [Segmented] = useSegmented({
  columns: [],
  service: fetchSegmented,
  formatData,
})
</script>

<template>
  <div>
    <Segmented />
  </div>
</template>

传递 props 给 ElSegmented

向底层的 ElSegmented 组件传递额外的 props。

<script setup lang="ts">
import { useSegmented } from '@vuecraft/components'

const [Segmented] = useSegmented({
  defaultValue: 'Mon',
  columns: [
    { label: 'Mon', value: 'Mon' },
    { label: 'Tue', value: 'Tue' },
  ],
  size: 'large',
  block: true,
  direction: 'horizontal',
})
</script>

<template>
  <div>
    <Segmented />
  </div>
</template>

类型声明

SegmentedOptions

interface SegmentedOptions<T> extends Partial<SegmentedProps> {
  // Columns of the segmented
  columns?: SegmentedColumn[]
  // Service for fetching async data
  service?: RequestService<T>
  // Service params
  params?: unknown
  // Format segmented data
  formatData?: (data: T) => SegmentedColumn[]
  // Default value of the segmented
  defaultValue?: SegmentedOptionValue
  // Callback when value changes
  onChange?: (val: SegmentedOptionValue) => void
}

SegmentedColumn

interface SegmentedColumn {
  // Value of the option
  value?: SegmentedOptionValue
  // Label of the option
  label?: string
  // Whether the option is disabled
  disabled?: boolean
  // Render function of the option content
  render?: (item: SegmentedColumn) => VNode
}

SegmentedReturnType

type SegmentedReturnType = [
  // Segmented component
  Component,
  // Value ref, can be used to control value externally
  Ref<SegmentedOptionValue | undefined>,
]