@composy/select-vue

@composy/select-vue

Vue 3 下拉选择器组件，基于 @composy/select-core

安装

pnpm add @composy/select-vue

快速开始

<template>
  <LSelect
    v-model="value"
    :options="options"
    searchable
    allow-clear
    placeholder="请选择"
    @change="onChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { LSelect } from '@composy/select-vue'

const value = ref(null)
const options = [
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
  { value: '3', label: '选项3' },
]

const onChange = val => console.log('选中:', val)
</script>

组件 Props

Events

renderOption 仅支持安全格式标签；脚本类元素和事件、样式及资源加载属性会被移除。renderLabel 的结果按纯文本显示。

SelectOption.key 可为树节点提供稳定路径，SelectGroup.disabled 会继承到组内选项。Core 会复制输入的 options/groups，并对 state 返回防御性快照；远程搜索会取消旧请求、忽略过期响应，并直接展示当前服务端返回的结果。LSelectDropdown 与 LSelectOption 输出 listbox/option 的 ARIA 状态，下拉定位监听优先使用触发器所属 ownerDocument.defaultView。

插件安装

import { createApp } from 'vue'
import { SelectPlugin } from '@composy/select-vue'

createApp(App).use(SelectPlugin, { prefix: 'L' }).mount('#app')

useSelect 组合式函数

<script setup>
import { useSelect } from '@composy/select-vue'

const { state, open, close, setValue, getValue } = useSelect({
  options: [...],
  mode: 'multiple',
})
</script>

依赖

• @composy/select-core — 核心引擎
• vue ^3.5.32 (peerDependency)

构建产物

Builder、ESLint 与 TypeScript 的权威配置位于 .ldesign/；根 tsconfig.json 是兼容入口。Vue Playground 使用 Vite 配置 src/playground/vite.config.ts：

corepack pnpm run build
corepack pnpm run type-check
corepack pnpm run lint:check
corepack pnpm run playground:build

License

MIT