vue cool select下載 - vue cool select原始碼下載

vue cool select

其他源碼

v3.5.2

下載

目前版本是3.x ，如果您正在尋找2.x ，您可以在這裡找到它（另請參閱重大更改）。

靈活選擇

演示+文檔

特徵

沒有依賴關係
props (30) 讓您以各種方式自訂元件
插槽 (13) 允許在任何地方更改內容
事件（8）會讓你知道一切
自動完成（您可以使用自訂搜索，也可以停用搜尋輸入）
鍵盤控制（不僅僅是透過箭頭）
行動裝置支援
驗證、錯誤狀態和成功
停用和唯讀
小尺寸和大尺寸（如引導程式中）
設定樣式的能力，您可以從頭開始編寫主題。 2 主題：Bootstrap 4（同等風格）、Material Design
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 " >