Vue下拉选择框（Select）

该组件已发布到npm，使用时直接安装即可：yarn add vue-amazing-selector

// 使用vue-amazing-selector
import Vue from 'vue'
import VueAmazingSelector from 'vue-amazing-selector'
Vue.use(VueAmazingSelector)

可自定义设置以下属性：

• 下拉框字典数据（selectData）
• 下拉初始默认值（defaultValue），在未设置selectedValue（v-model）时生效
• 下拉字典项的文本字段名（name），默认'name'
• 下拉字典项的值字段名（value），默认'value'
• 下拉框默认文字（placeholder），默认请选择
• 是否禁用下拉（disabled），默认false
• 下拉框宽度（width），默认200px
• 下拉框高度（height），默认36px
• 下拉面板最多能展示的下拉项数，超过后滚动显示（num），默认6条

• （v-model）当前选中的下拉值（selectedValue），默认null

效果图如下：

展开图如下：

 

①创建选择器组件VueAmazingSelector.vue：

②在要使用的页面引入：

import VueAmazingSelector from '@/components/VueAmazingSelector'
// import Vue from 'vue'
// import VueAmazingSelector from 'vue-amazing-selector'
// Vue.use(VueAmazingSelector)
components: {
    VueAmazingSelector
}
data () {
    return {
	    selectData: [
        {
          label: '北京市',
          value: 1
        },
        {
          label: '上海市上海市上海市上海市',
          value: 2,
          disabled: true
        },
        {
          label: '郑州市',
          value: 3
        },
        {
          label: '纽约市纽约市纽约市纽约市',
          value: 4
        },
        {
          label: '旧金山',
          value: 5
        },
        {
          label: '悉尼市',
          value: 6
        },
        {
          label: '伦敦市',
          value: 7
        },
        {
          label: '巴黎市',
          value: 8
        }],
        defaultValue: '',
        selectedValue: 1
     }
},
watch: {
    selectedValue (to) {
      console.log('selectedValue:', to)
    }
},
methods: {
    onChange (name, value, index) {
      console.log('item:', name, value, index)
    }
}