基于Vue的支持数据双向绑定的select组件

今天用Vue做一个小项目时需要用到多个select筛选功能，但是原生的太丑，如果直接写在当前页多个select处理起来又太繁琐，第三方ui又太大，所以就自己写了一个，并上传了GitHub仓库,仓库地址：https://github.com/tuohuang/vue-select

使用方法：

1. 引入组件:

import VueSelect from '../components/VueSelect'

2. 注册组件

export default {
    components: {
        VueSelect
    }
}

3. 使用组件

<template>
    <vue-select
     :options="options"
     name="name"
     value="id"
     placeholder="请选择类型"
     v-model="selected_id"
     @change="handleChange">
    </vue-select>
</template>

options：选择项列表；

name：选择项列表中选择项名称的属性名；

value：选择项列表中选择项的值的属性名；

v-model：对应双向绑定的选中后的值；

@change：选择发生改变后触发事件，回调参数：当前选项。

DEMO:

<template>
    <div>
         <vue-select
        :options="options"
        name="name"
        value="id"
        placeholder="请选择一个水果"
        v-model="selected_id"
        @change="handleChange">
        </vue-select>
    </div>
</template>

<script>
import VueSelect from '../components/VueSelect'
export default {
    name: "Index",
    data() {
        return {
            selected_id: "",
            options: [
                {name: "苹果", id: 1},
                {name: "橘子", id: 2},
                {name: "香蕉", id: 3},
                {name: "西瓜", id: 4},
            ]
        }
    },
    components: {
        VueSelect
    },
    methods: {
        handleChange(e) {
            console.log(e)
        }
    }
}
</script>