vue cool select 다운로드 - vue cool select 소스 코드 다운로드

vue cool select

기타 소스코드

v3.5.2

다운로드

현재 버전은 3.x 입니다. 2.x 찾고 있다면 여기에서 찾을 수 있습니다(또한 주요 변경 사항 참조).

유연한 선택

데모 + 문서

특징

종속성 없음
props(30)를 사용하면 다양한 방법으로 구성 요소를 사용자 정의할 수 있습니다.
슬롯(13)을 통해 어디에서나 콘텐츠를 변경할 수 있습니다.
이벤트 (8)는 모든 것에 대해 알려줄 것입니다
자동 완성(사용자 정의 검색을 사용할 수 있으며 검색 입력을 비활성화할 수도 있습니다)
키보드 컨트롤(화살표 뿐만 아니라)
모바일 장치에서 지원
유효성 검사, 오류 상태 및 성공
비활성화 및 읽기 전용
작은 크기와 큰 크기(부트스트랩에서와 같이)
스타일을 설정하는 기능을 사용하면 처음부터 테마를 작성할 수 있습니다. 2가지 테마: 부트스트랩 4(동일 스타일), 머티리얼 디자인
타입스크립트 지원
탭 탐색
SSR(서버 측 렌더링)
메뉴가 뷰포트를 벗어나면 메뉴의 적절한 위치를 자동으로 결정합니다.

귀하의 제안을 작성해 주세요. 추가하게 되어 기쁘게 생각합니다.

설치

yarn add vue-cool-select 또는 npm install --save vue-cool-select

시작하기

NPM

이 플러그인, CSS(테마)를 가져오고 Vue.use 를 통해 플러그인을 추가하세요.

 import { CoolSelectPlugin } from 'vue-cool-select'

// paste the line below only if you need "bootstrap" theme
import 'vue-cool-select/dist/themes/bootstrap.css'
// paste the line below only if you need "material-design" theme
import 'vue-cool-select/dist/themes/material-design.css'
// you can also import your theme

Vue . use ( CoolSelectPlugin )

다른 구성요소 내부에서 사용:

 import { CoolSelect } from 'vue-cool-select'

export default {
  components : { CoolSelect } ,
  data ( ) {
    return {
      // simple example of items
      items : [ 'Item 1' , 'Item 2' , 'Item 3' ] ,
      // there will be a selected item
      selected : null
    }
  }
}

<template> 에 추가:

< cool-select
  v-model = " selected "
  : items = " items "
/>

브라우저(CDN)

페이지에 vue-cool-select를 포함합니다.

 < script src =" https://unpkg.com/vue-cool-select " > </ script >

<!-- paste the line below only if you need "bootstrap" theme -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-cool-select/dist/themes/bootstrap.css " >
<!-- paste the line below only if you need "material-design" theme -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-cool-select/dist/themes/material-design.css " >