vue select

뷰 선택

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 선택 4.x-베타

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에서 로드하는 방법에 대한 설명서를 확인하세요.

특허

MIT