# CommonSelect 下拉框


### 基础用法

:::demo

```vue
<template>
  <div class="__common-layer-bread">
    <common-select :options="options" :propsMap="propsMap" v-model="selectValue"></common-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectValue = ref('');

const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])

const propsMap = ref({
  label:'name',
  value:'id'
})

</script>


```

:::

### 配置参数

| 参数                | 说明              | 类型             | 是否必须 |
| :------------------ | :-------------- | :--------------- | :------- |
|options| 下拉框选项列表 |Array[]|true|
|propsMap| 下拉框选项映射，通过对label和value的映射，满足各种数组字段使用需求，避免每次处理数组字段 |Object[]|
|---label| 显示文本 |string|
|---value| 选中后获取的结果 |Array[] String|

#### 3. 原始参数支持: 
支持以v-bind 的形式传入对象，实现原始el-select所有属性，方法等的支持，如下例所示：

:::demo
```vue

<template>
  <div class="__common-layer-bread">
    <common-select 
      v-bind="selectAttrabute" 
      :options="options" 
      :propsMap="propsMap" 
      v-model="selectValue"
      @change="changeEvent"
      ></common-select>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const selectValue = ref('');

const selectAttrabute = ref({
  disabled: true,
  multiple: true,
  disabled: false,
  'collapse-tags-tooltip': true,
  effect:'light'
})
const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])


const propsMap = ref({
  label:'name',
  value:'id'
})

// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}

</script>

```

:::