::: anchor
:::

::: title 基本介绍
:::

::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。支持关键词查询
:::

::: title 基础使用
:::

::: demo 使用 `lay-select` 标签, 创建下拉选择框

<template>
  <lay-select v-model="value">
    <lay-select-option :value="1" label="学习"></lay-select-option>
    <lay-select-option :value="2" label="编码"></lay-select-option>
    <lay-select-option :value="3" v-if="true">运动</lay-select-option>
  </lay-select>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value = ref(null);
    return {
      value
    }
  }
}
</script>

:::

::: title 进阶使用
:::

::: demo 根据 v-model 的特性, 通过修改值更改 select 的下拉选项。

<template>
  <lay-space>
    <lay-select v-model="value2">
      <lay-select-option :value="1" label="学习"></lay-select-option>
      <lay-select-option :value="2" label="编码"></lay-select-option>
      <lay-select-option :value="3" label="运动"></lay-select-option>
    </lay-select>
    <lay-button @click="change2"> change ：{{value2}}</lay-button>
  </lay-space>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value2 = ref(null);
    var i = 1;
    function change2(){
      value2.value=i++%3+1
    }
    return {
      value2,
      change2
    }
  }
}
</script>

:::


::: title 禁止选择
:::

::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。

<template>
  <lay-space>
    <lay-select v-model="value3" :disabled="true" :allow-clear="true">
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码"></lay-select-option>
    <lay-select-option value="3" label="运动"></lay-select-option>
  </lay-select>
    <lay-select v-model="value4" :disabled="true" :multiple="true" :allow-clear="true">
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码"></lay-select-option>
    <lay-select-option value="3" label="运动"></lay-select-option>
  </lay-select>
  </lay-space>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const value3 = ref('1')
    const value4 = ref(['1'])
    return {
      value3,
      value4
    }
  }
}
</script>

:::

::: title 开启检索
:::

::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。

<template>
  <lay-space>
    <lay-select v-model="value3" :show-search="true" @search="search">
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码"></lay-select-option>
    <lay-select-option value="3" :label="null"></lay-select-option>
  </lay-select>
    <lay-select v-model="value4" :show-search="true" :multiple="true">
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码"></lay-select-option>
    <lay-select-option value="3" :label="null"></lay-select-option>
  </lay-select>
  </lay-space>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const value3 = ref('1')
    const value4 = ref(['1'])

    const search = function() {
      console.log("触发")
    }
    return {
      value3,
      value4,
      search
    }
  }
}
</script>

:::

::: title 传入选项
:::

::: demo 传入 options 数据，如果设置则不需要手动构造 selectOption 节点

<template>
  <lay-select v-model="value5" :items="items5"></lay-select>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value5 = ref('1');
    const items5=ref([
      {label:'选项1', value:1},
      {label:'选项2', value:2},
      {label:'选项3', value:3, disabled:true},
    ])
    return {
      items5,
      value5,
    }
  }
}
</script>
:::


::: title 允许清空
:::

::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。

<template>
  <lay-space>
    <lay-select v-model="value3" :allow-clear="true">
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码"></lay-select-option>
    <lay-select-option value="3" label="运动"></lay-select-option>
  </lay-select>
    <lay-select v-model="value4" :allow-clear="true" :multiple="true">
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码"></lay-select-option>
    <lay-select-option value="3" label="运动"></lay-select-option>
  </lay-select>
  </lay-space>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const value3 = ref('1')
    const value4 = ref(['1'])
    return {
      value3,
      value4
    }
  }
}
</script>

:::

::: title 海量数据 
:::

::: demo
<template>
  <lay-select v-model="selected2" :multiple="true">
    <lay-select-option v-for="index of count2" :value="index" :label="index"></lay-select-option>
  </lay-select>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const count2 = ref(0)
    const selected2 = ref([1])

    setTimeout(() => {
      count2.value = 100;
    }, 2000);

    return {
      count2,
      selected2
    }
  }
}
</script>
:::

::: title 多选使用
:::

::: demo
<template>
  <lay-button @click="mvalue=['1','5','7']">点击切换(当前值:{{mvalue.join()}})</lay-button>
  <br/>
  <br/>
  <lay-select v-model="mvalue" @change="change" multiple>
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码" disabled></lay-select-option>
    <lay-select-option value="3" label="运动"></lay-select-option>
    <lay-select-option value="4" label="唱歌"></lay-select-option>
    <lay-select-option value="5" label="跳舞"></lay-select-option>
    <lay-select-option value="6" label="打篮球"></lay-select-option>
    <lay-select-option value="7" label="rap"></lay-select-option>
  </lay-select>
</template>

<script>
import { ref,watch } from 'vue'

export default {
  setup() {
    const mvalue = ref(['1','2']);
    const change = function(val){
      console.log(val, mvalue.value)
    }
    return {
      mvalue,
      change
    }
  }
}
</script>
:::

::: title Select 属性
:::

::: table

| 属性          |         描述          |             类型          |     可选值      |   默认值 |
| ------------ | --------------------- | ------------------------- | -------------- | -------- |
| v-model      | 选中值                | `string`/`number`/`Array`  |        -       |    -    |
| name         | 原生 name 属性        | `string`                   |        -       |    -    |
| placeholder  | 默认空提示语          | `string`                   |        -       | `请选择` |
| disabled     | 是否禁用              | `boolean`                  | `true` `false` | `false` |
| multiple     | 是否为多选            | `boolean`                  | `true` `false` | `false` |
| size         | 尺寸                  | `string`                  | `lg` `md` `sm` `xs`| `md` |
| searchPlaceholder | 搜索提示          | `string`                  | -- | -- |
| minCollapsedNum        | 多选模式最小折叠数量                  | `number`                  | -- | -- |
| collapseTagsTooltip    | 多选折叠后时候悬浮展示                  | `boolean`                  | -- | -- |
| contentStyle        | 内容自定义样式     | `StyleValue` | -- | -- |
| contentClass        | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |

:::

::: title Select 事件
:::

::: table

| 属性    | 描述       |     接收值      |
| ------ | ---------- | --------------- |
| change | 切换事件    | value           |
| search | 关键词变化事件    | 用户输入的关键词 string           |

:::

::: title Select Option 属性
:::

::: table


::: table

| 属性          |         描述          |             类型          |     可选值      |   默认值 |
| ------------ | --------------------- | ------------------------- | -------------- | -------- |
| label        | 标签值(`必填`)         | `string`                  |        -       |    -    |
| value        | 值                    | `string` / `number`       |        -       |    -    |
| keyword      | 用于匹配关键词的数据，传入文本+拼音可以支持拼音搜索   | `string`        |        -       |    -    |
| disabled     | 是否禁用              | `boolean`                  | `true` `false` | `false` |

:::

::: title Select Option 插槽
:::

::: table

| 属性    |         描述       |     接收值      |
| ------- | ----------------- | --------------- |
| default | 默认(`label`)      |        -       |

:::

::: contributor select
:::

::: previousNext select
:::