#  选择器
---
<font color=#666>当选项过多时,使用下拉菜单展示并选择内容。</font>

### 基础用法

<div class="demo-block">
  <y-select :width="200" v-model="select">
    <y-option v-for="(x,y) in fruit" :key="y" :value="x.value">
    {{x.label}}
    </y-option>
  </y-select>
</div>
<script>
  export default{
    data () {
      return{
        select: "4",
        fruit: [
          { label: "苹果", value: 0 },
          { label: "橘子", value: 1 },
          { label: "香蕉", value: 2 },
          { label: "栗子", value: 3 },
          { label: "葡萄", value: 4 }
        ],
        searchSelect: "3",
        area: [
          { label: "曼哈顿", value: 0 },
          { label: "曼曼大", value: 1 },
          { label: "曼大大", value: 2 },
          { label: "欧曼", value: 3 },
          { label: "江曼", value: 4 }
        ],
        tagSelect: "",
        tagList: [{label: 'A',
              names: [
                {id: 1, name: '佛山转运中心'},
                {id: 2, name: '福安公司'},
                {id: 3, name: '安康分公司'},
                {id: 4, name: '安庆接驳点'},
                {id: 5, name: '安顺接驳点'}]
              },
              {label: 'B',
              names: [
                {id: 21, name: '巴彦淖尔'},
                {id: 22, name: '博雅班毕业班'},
                {id: 23, name: '博雅班毕业班'},
                {id: 24, name: '博雅班毕业班'},
                {id: 25, name: '博雅班毕业班'},
                {id: 26, name: '博雅班毕业班'},
                {id: 27, name: '蚌埠转运中心'},
                {id: 28, name: '蚌埠转运中心'},
                {id: 29, name: '蚌埠转运中心'},
                {id: 30, name: '蚌埠转运中心'}]
              },
              {label: 'C',
              names: [
                {id: 31, name: '巴彦淖尔'},
                {id: 32, name: '博雅班毕业班'},
                {id: 33, name: '博雅班毕业班'},
                {id: 34, name: '博雅班毕业班'},
                {id: 35, name: '博雅班毕业班'},
                {id: 36, name: '博雅班毕业班'},
                {id: 37, name: '蚌埠转运中心'},
                {id: 38, name: '蚌埠转运中心'},
                {id: 39, name: '蚌埠转运中心'},
                {id: 40, name: '蚌埠转运中心'}]
              },
              {label: 'D',
              names: [
                {id: 41, name: '巴彦淖尔'},
                {id: 43, name: '博雅班毕业班'},
                {id: 42, name: '博雅班毕业班'},
                {id: 44, name: '博雅班毕业班'},
                {id: 45, name: '博雅班毕业班'},
                {id: 46, name: '博雅班毕业班'},
                {id: 47, name: '蚌埠转运中心'},
                {id: 48, name: '蚌埠转运中心'},
                {id: 49, name: '蚌埠转运中心'}]
              },
              {label: 'E',
              names: [
                {id: 51, name: '巴彦淖尔'},
                {id: 52, name: '博雅班毕业班'},
                {id: 53, name: '博雅班毕业班'},
                {id: 54, name: '博雅班毕业班'},
                {id: 55, name: '博雅班毕业班'},
                {id: 56, name: '博雅班毕业班'},
                {id: 57, name: '蚌埠转运中心'},
                {id: 58, name: '蚌埠转运中心'},
                {id: 59, name: '蚌埠转运中心'},
                {id: 60, name: '蚌埠转运中心'}]
              },
              {label: 'F',
              names: [
                {id: 61, name: '巴彦淖尔'},
                {id: 62, name: '博雅班毕业班'},
                {id: 63, name: '博雅班毕业班'},
                {id: 64, name: '博雅班毕业班'},
                {id: 65, name: '博雅班毕业班'},
                {id: 66, name: '博雅班毕业班'},
                {id: 67, name: '蚌埠转运中心'},
                {id: 68, name: '蚌埠转运中心'},
                {id: 69, name: '蚌埠转运中心'},
                {id: 70, name: '蚌埠转运中心'}]
              }]
      }
    },
    methods: {
      // 假装是个远程搜索
      remoteMethod (val) {
        if (val === '大') {
          this.area.splice(0, 1)
        }
      },
      // 假装是个远程搜索
      remoteMethod2 (val, callback) {
        callback ? callback(this.tagList): null
      }
    }
  }
</script>

::: demo

``` html
<template>
  <y-select :width="200" v-model="select">
    <y-option v-for="(x,y) in fruit" :key="y" :value="x.value">
    {{x.label}}
    </y-option>
  </y-select>
</template>

<script>
  export default{
    data(){
      return{
        select: "",
        fruit: [
          { label: "苹果", value: 0 },
          { label: "橘子", value: 1 },
          { label: "香蕉", value: 2 },
          { label: "栗子", value: 3 },
          { label: "葡萄", value: 4 }
        ],
      }
    }
  }
</script>
```
:::



### 带搜索

<div class="demo-block">
  <y-select filterable :width="200" :remote-method="remoteMethod" v-model="searchSelect" nodata="没有找到对应的品牌">
    <y-option v-for="(x,y) in area" :key="y" :value="x.value">
    {{x.label}}
    </y-option>
  </y-select>
</div>

::: demo

```html
<template>
  <y-select filterable :width="200" v-model="searchSelect" nodata="没有找到对应的品牌">
    <y-option v-for="(x,y) in area" :key="y" :value="x.value">
    {{x.label}}
    </y-option>
  </y-select>
</template>
<script>
  export default{
    data(){
      return{
        searchSelect: "",
        area: [
          { label: "曼哈顿", value: 0 },
          { label: "曼曼大", value: 1 },
          { label: "曼大大", value: 2 },
          { label: "欧曼", value: 3 },
          { label: "江曼", value: 4 }
        ]
      }
    }
  }
</script>
```
:::


### 标签选择器
<div class="demo-block">
  <y-select :width="200" :wordselector="true" :remote-method="remoteMethod2" v-model="tagSelect"></y-select>
</div>

::: demo

```html
<template>
  <y-select :width="200" :wordselector="true" :remote-method="remoteMethod2" v-model="tagSelect"></y-select>
</template>
<script>
  export default{
    data(){
      return{
        tagSelect: ""
      }
    },
    methods: {
      // 假装是个远程搜索
      remoteMethod (val) {
        if (val === '大') {
          this.area.splice(0, 1)
        }
      },
      // 假装是个远程搜索
      remoteMethod2 (val, callback) {
        callback ? callback(this.tagList): null
      }
    }
  }
</script>
```
:::


### y-select 属性
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| value|指定选中项目的 value 值，可以使用 v-model 双向绑定数据|Boolean|true/false|false|
| width  | 组件宽度 | String,Number  |  -- |  --  |
| placeholder  | 选择框默认文字 | String  |  -- |  --  |
| disabled  | 是否禁用 | boolean   |    true/false    | false   |
| change  | 当value改变时触发，返回true，false | Function  |  -- |  --  |
| remote-method | 远程搜索方法(标签搜索必写),入参是搜索的值和回调函数  | Function  | -- |  --  |
| nodata  | 无数据的提示 | String |  -- |  --  |

### y-option 属性
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
|value|选项值，默认根据此属性值进行筛选，必填|String,Number|--|--|
| label  | 选项显示的内容 | String,Number  |  -- |  --  |
| disabled  | 是否禁用 | boolean   |    true/false    | false   |