当前版本是`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>

```

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

文档和示例在此。

待办事项

多选功能
100%测试覆盖率

我很乐意添加或改进功能，你可以告诉我你想看到的内容。如果你给个星星，我也会有更多动力继续工作，谢谢！:smile: