vue-amazing-selector

An Amazing Select Component For Vue2

Vue3选择器（Select）

Install & Use

npm install vue-amazing-selector
#or
yarn add vue-amazing-selector

Import and register component

Global

import Vue from 'vue'
import VueAmazingSelector from 'vue-amazing-selector'

Vue.use(VueAmazingSelector)

Local

<template>
  <VueAmazingSelector
    :options="options"
    label="label"
    value="value"
    placeholder="请选择"
    :disabled="false"
    :width="160"
    :height="36"
    :num="6"
    allowClear
    v-model="selectedValue"
    @change="onChange" />
</template>
<script>
import { VueAmazingSelector } from 'vue-amazing-selector'
export default {
  components: {
    VueAmazingSelector
  }
}
</script>

Props

| 属性 | 说明 | 类型 | 默认值 | | :--- | :--- | :--- | :--- | options | 选项数据 | Array | [] label | 选择器字典项的文本字段名 | String | label value | 选择器字典项的值字段名 | String | value placeholder | 选择框默认文字 | String | 请选择 disabled | 是否禁用下拉 | Boolean | false allowClear | 是否支持清除 | Boolean | false width | 选择框宽度 | Number | 200 height | 选择框高度 | Number | 36 num | 下拉面板最多能展示的下拉项数，超过后滚动显示 | Number | 6 selectedValue | （v-model）当前选中的option条目 | Number|String | null

Events

事件名 | 说明 | 返回值 :--- | :--- | :--- change | 选择某项下拉后的回调函数 | value, label, index（value值，label文本值，index索引值）