今天用 vue 做一个小项目时需要用到多个 select 筛选功能, 但是原生的太丑, 如果直接写在当前页多个 select 处理起来又太繁琐, 第三方 ui 又太大, 所以就自己写了一个, 并上传了 GitHub 仓库, 仓库地址: https://github.com/tuohuang/vue-select
使用方法:
引入组件:
import VueSelect from '../components/VueSelect'
注册组件
- export default {
- components: {
- VueSelect
- }
- }
使用组件
- <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>
来源: http://www.jianshu.com/p/01468bf89602