# 选择器选项

## 使用方法

原版里这是给选择器的 `renderOption` 用的一个小部件，用来自己画选项行。

```ts
import type { SelectorOption } from '@astryx-vue/core/Selector'
```

我们这边 `SelectorOption` 是一个类型，不是组件：它就是 [选择器](/components/selector) `options` 数组里每一行长什么样。`label` 是主文字，`description` 是下面那行小字，正好是原版那个小部件画出来的两行。默认的选项行本来就会画这两行，所以写个普通对象就够了。要画别的东西，用 `option` 插槽，它拿到的还是这个对象。

选项也可以只写一个字符串，这时它既是值也是文字。

## 示例

常见的用法和不同的状态。

### 基础

选项用 SelectorOption 那种写法来渲染，每行主文字下面多一行说明。原版放在 renderOption 里，让自定义选项长得一样。

```vue
<script setup lang="ts">
import { Selector } from '@astryx-vue/core/Selector'
import { ref } from 'vue'

const value = ref<string | null>('editor')

const roles = [
  { value: 'admin', label: 'Admin', description: 'Full access to all resources' },
  { value: 'editor', label: 'Editor', description: 'Can edit and publish content' },
  { value: 'viewer', label: 'Viewer', description: 'Read-only access' },
]
</script>

<template>
  <Selector v-model="value" label="Role" :options="roles" placeholder="Assign a role..." :width="300" />
</template>
```

## 属性

下面是一个 `SelectorOption` 对象上的字段。它们是数据，不是组件属性：放进 [选择器](/components/selector) 的 `options` 数组里，或者在 `option` 插槽里收到。

| 字段 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `value` | `string \| number` | — | 选中这一项时报出去的值。必填，同一个列表里不能重复。 |
| `label` | `string` | — | 这一行的主文字，也是它的无障碍名。必填。 |
| `description` | `string` | — | 主文字下面那行小字。单独占一行，比主文字更小更淡。 |
| `icon` | `string` | — | 主文字前面的图标，写 CSS 图标类名，例如 `i-carbon-user`。 |
| `disabled` | `boolean` | `false` | 选项还留在列表里，但选不了。方向键会跳过它。 |

## 插槽

`Selector` 的 `option` 插槽用来换掉某一行的内容。它收到 `option`（上面那个对象）、`isActive`（指针或键盘当前停在哪一行）和 `isSelected`。