vue cool selectダウンロード - vue cool selectソースコードのダウンロード

vue cool select

その他のソースコード

v3.5.2

ダウンロード

現在のバージョンは3.xです。 2.xをお探しの場合は、ここで見つけることができます (重大な変更も参照)。

柔軟な選択

デモ + ドキュメント

特徴

依存関係はありません
props (30) を使用すると、さまざまな方法でコンポーネントをカスタマイズできます
スロット (13) により、どこでもコンテンツを変更できます
events (8) はすべてのことを知らせます
オートコンプリート (カスタム検索を使用でき、検索入力を無効にすることもできます)
キーボードコントロール (矢印によるものだけでなく)
モバイルデバイスでのサポート
検証、エラーと成功の状態
無効かつ読み取り専用
小さいサイズと大きいサイズ (ブートストラップなど)
スタイルを設定できるため、テーマを最初から作成できます。 2 つのテーマ: Bootstrap 4 (等しいスタイル)、マテリアルデザイン
TypeScript のサポート
タブナビゲーション
SSR (サーバーサイドレンダリング)
メニューがビューポートを越える場合、メニューの適切な位置を自動的に決定します

ご提案を書き込んでください。追加していただければ幸いです。

インストール

yarn add vue-cool-selectまたはnpm install --save vue-cool-select

始めましょう

故宮

このプラグイン、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 " >