vue select

vue-选择

您希望 HTML <select>元素能够完成的所有操作，都被包装到一个轻量级、零依赖、可扩展的 Vue 组件中。

Vue Select 是一个功能丰富的选择/下拉/提前输入组件。它提供了一个适合大多数可过滤选择下拉列表用例的默认模板。该组件被设计得尽可能轻量，同时保持可访问性、开发人员体验和定制的高标准。

• 标记
• 过滤/搜索
• Vuex 支持
• AJAX 支持
• SSR支持
• 无障碍
• ~20kb 总计 / ~5kb CSS / ~15kb JS
• 选择单个/多个选项
• 可使用槽和 SCSS 变量进行自定义
• 零依赖

文档

完整的文档和示例可在 https://vue-select.org 上找到。

• API文档
• Vue 2 CodePen 模板
• Vue 3 CodePen 模板

赞助商？

维护这个项目需要付出很大的努力。如果它节省了您的开发时间，请考虑通过 GitHub 赞助商来赞助该项目！

非常感谢使 Vue Select 成为可能的赞助商和贡献者！

开始使用

Vue 3 / Vue Select 4.x-beta

Vue 3 支持位于beta通道： vue-select@beta ，并将在v4发布时成为新的默认支持。有关更多详细信息，请参阅#1579！

安装：

yarn add vue-select@beta

# or use npm

npm install vue-select@beta

然后，导入并注册组件：

# main . ts or main . js

import { createApp } from "vue" ;
import App from "./App.vue" ;

import { VueSelect } from "vue-select" ;

createApp ( App )
    . component ( "v-select" , VueSelect )
    . mount ( "#app" ) ;

该组件本身不包含任何 CSS。您需要将其单独包含在 Component.vue 中：

 < style >
@import " vue-select/dist/vue-select.css " ;
</ style >

Vue 2 / Vue 选择 3.x

安装：

yarn add vue-select

# or use npm

npm install vue-select

然后，导入并注册组件：

 import Vue from "vue" ;
import vSelect from "vue-select" ;

Vue . component ( "v-select" , vSelect ) ;

该组件本身不包含任何 CSS。您需要单独包含它：

 import "vue-select/dist/vue-select.css" ;

您还可以直接在浏览器中包含 vue-select。查看从 CDN 加载的文档..

执照

麻省理工学院