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 載入的文件..

執照

麻省理工學院