简单通用的vue控件。如下拉选择框、弹出菜单、滑块、分段滑块、穿梭框等。

下拉选择框

简单易用的下拉选择框，除了常规select需求外，集成了可输入、分组、多选、悬停提示、异步加载等需求。

DEMO（案例）

Install（初始化）

通过NPM下载并初始化组件

npm install simple-dropdown-select

Usage（使用）

• 全局注册使用 •

import SimpleDropdownSelect from 'simple-dropdown-select'
import 'simple-dropdown-select/lib/simple-dropdown-select.css'

Vue.component('SimpleDropdownSelect', SimpleDropdownSelect)

在模板中需要组件的地方直接插入

<simple-dropdown-select v-if="hack" v-model="此处为选中值变量（必须有）" :datas="此处为数据源列表（必须有）"></simple-dropdown-select>

• 局部注册使用 •

<template>
    <div>
        <simple-dropdown-select v-if="hack" v-model="此处为选中值变量（必须有）" :datas="此处为数据源列表（必须有）"></simple-dropdown-select>
    </div>
</template>
<script>
import SimpleDropdownSelect from 'simple-dropdown-select'
import 'simple-dropdown-select/lib/simple-dropdown-select.css'
export default {
    components: {
        SimpleDropdownSelect
    }
}
</script>

Props（属性）

• 组件属性绑定 •

 <simple-dropdown-select v-model="xxx" :datas="xxx" :valKey="xxx" :nameKey="xxx" :defaultText="xxx" :placeholder="xxx" :showTitle="xxx" :groupBy="xxx" :multiMode="xxx" :multiNameMode="xxx" :filterMode="xxx" :openFlexible="xxx" :beforeClick="xxx" :afterClick="xxx"></simple-dropdown-select>

以下表格中罗列了组件所有可选属性，组合使用来满足不同需求。

属性		类型	默认值	描述
v-model		any（必选）	undefined	该属性关联到组件选中值。若给该变量一个初始值，即可给组件设置一个默认选中项。
		any[]（必选）	undefined	该属性关联到组件选中值。多选模式下，操作组件时返回的是一个数组类型。
datas		any[] | undefined（必选）	undefined	该属性可传入一个数组，作为组件的数据源。
		function	自定义	该属性可传入一个回调函数实现异步加载。如“(fn: Function) => { setTimeout(() => {let list = [1,2]; fn(list);}, 1000) }”。
valKey		string	undefined	可选，指定数据源中的某个属性作为需要的返回值。
nameKey		string	undefined	可选，指定数据源中的某个属性作为显示在组件中的内容。
defaultText		string	undefined	可选，未有选中项时显示的默认文本。
placeholder		string	undefined	可选，未有选中项或默认文本时，显示的提示文本。
showTitle		"all" | "ellipsis"	undefined	可选，是否显示悬停提示。默认不显示，可选择始终显示或截断显示。
groupBy		string	undefined	可选，指定数据源中的某个属性作为需要的返回值。
multiMode		boolean	false	可选，是否开启多选模式。
multiNameMode		"count" | "string"	"count"	可选，多选模式下生效，设置多选模式下的显示文本形式。
filterMode		boolean	false	可选，是否开启输入框模式。
openFlexible		boolean	false	可选，输入框模式且单选模式且valKey&nameKey特定组合下生效。是否在过滤后的列表中添加输入值作为选项。
beforeClick		function	undefined	可选，该回调函数在下拉选项click前触发，当前下拉选项作为参数传入。
afterClick		function	undefined	可选，该回调函数在下拉选项click后触发，当前下拉选项作为参数传入。

License（授权许可）

MIT