<p align="center"> <a href="https://codecov.io/gh/iliyaZelenko/vue-cool-select" rel="noopener noreferrer" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/1273f64b-8282-49d2-96da-2a1e5be487fa.svg" alt="覆盖率"> </a> <a href="https://www.npmjs.com/package/vue-cool-select" rel="noopener noreferrer" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/0da17907-0286-45b7-9f6a-2dd1fdb732f5.svg" alt="下载量"> </a> <a href="https://www.npmjs.com/package/vue-cool-select" rel="noopener noreferrer" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/5a6558a9-2097-41c5-932b-f42bff7278c7.svg" alt="版本"> </a> <a href="https://www.npmjs.com/package/vue-cool-select" rel="noopener noreferrer" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/ca0aea8f-823b-4f1c-8699-e5a6709ce578.svg" alt="许可证"> </a> <a href="https://circleci.com/gh/iliyaZelenko/vue-cool-select" rel="noopener noreferrer" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/a3d2b3ad-d7e2-4cbb-88f3-72a3447b58ae.svg?style=shield" alt="CircleCI 构建状态"> </a> <a href="https://lgtm.com/projects/g/iliyaZelenko/vue-cool-select/context:javascript" rel="noopener noreferrer" target="_blank"> <img alt="语言评分：JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/iliyaZelenko/vue-cool-select.svg?logo=lgtm&logoWidth=18" /> </a> <a href="https://codebeat.co/projects/github-com-iliyazelenko-vue-cool-select-master" rel="noopener noreferrer" target="_blank"> <img alt="codebeat 徽章" src="https://codebeat.co/badges/a6d9cfc8-529e-48c7-ae04-7d69fe6b1239" /> </a> <a href="https://standardjs.com/" rel="noopener noreferrer" target="_blank"> <img alt="codebeat 徽章" src="https://badgen.net/badge/code%20style/standard/f2a" /> </a> <a href="https://www.npmjs.com/package/vue-cool-select" rel="noopener noreferrer" target="_blank"> <img src="https://img.shields.io/npm/dt/vue-cool-select?color=red&label=total%20downloads" alt="总下载量"> </a> <a href="https://github.com/iliyaZelenko/vue-cool-select/graphs/contributors" rel="noopener noreferrer" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/4846763e-9107-4bc8-b068-90bad52f919a.svg" alt="贡献者"> </a> </p> 当前版本是`3.x`，如果您正在寻找`2.x`版本，可以在[这里](https://github.com/iliyaZelenko/vue-cool-select/blob/master/README_2VERSION.md)找到（另外，请查看[重大变更](https://github.com/iliyaZelenko/vue-cool-select/blob/master/CHANGELOG.md#300-2019-09-18)）。

vue-cool-select&via=IlyaZelenko&hashtags=vue,bootstrap,developers,github,html,js,web,npm,material-design)

演示 + 文档

特性

无依赖
30个属性让您可以以各种方式自定义组件
13个插槽允许在任何地方更改内容
8个事件让您了解一切情况
自动完成（您可以使用自定义搜索，也可以禁用搜索输入）
键盘控制（不仅通过箭头键）
支持移动设备
验证、错误和成功状态
禁用和只读模式
小型和大型尺寸（如bootstrap）
能够设置自己的样式，可以从头开始编写主题。2个主题：Bootstrap 4（相同样式）、Material Design
TypeScript支持
标签导航
SSR（服务器端渲染）
自动确定菜单的合适位置，如果超出视口范围

欢迎提出您的建议，很乐意添加。

安装

yarn add vue-cool-select 或 npm install --save vue-cool-select

快速开始

NPM

导入此插件、CSS（主题）并通过Vue.use添加插件：

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

// 仅当您需要"bootstrap"主题时才粘贴下面这行
import 'vue-cool-select/dist/themes/bootstrap.css'
// 仅当您需要"material-design"主题时才粘贴下面这行
import 'vue-cool-select/dist/themes/material-design.css'
// 您也可以导入自己的主题

Vue.use(CoolSelectPlugin)

在其他组件中使用：

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

export default {
  components: { CoolSelect },
  data () {
    return {
      // 简单的项目示例
      items: ['项目1', '项目2', '项目3'],
      // 这里将是选中的项目
      selected: null
    }
  }
}

添加到<template>中：

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

浏览器（CDN）

在页面中引入vue-cool-select。

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

<link rel="stylesheet" href="https://unpkg.com/vue-cool-select/dist/themes/bootstrap.css">  <link rel="stylesheet" href="https://unpkg.com/vue-cool-select/dist/themes/material-design.css"> ```

如果在页面中检测到Vue，插件会自动安装。

文档和示例在此。