<style scoped>
    .source{
        width: 20%;
        min-width: 200px;
    }
</style>
<script>
    export default {
        data() {
            return {
                value:'选项3',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '绿豆糕'
                }, {
                    value: '选项3',
                    label: '双皮奶'
                }],
                optionsGroup: [
                    {
                        label: '热门城市',
                        options: [{
                            value: 'Shanghai',
                            label: '上海'
                        }, {
                            value: 'Beijing',
                            label: '北京'
                        }]
                    }, {
                        label: '城市名',
                        options: [{
                            value: 'Chengdu',
                            label: '成都'
                        }, {
                            value: 'Shenzhen',
                            label: '深圳'
                        }, {
                            value: 'Guangzhou',
                            label: '广州'
                        }, {
                            value: 'Dalian',
                            label: '大连'
                        }]
                    }],
            }
        }
    }
</script>

## Select 下拉选择框

### 基础用法

:::demo `v-model`的值为当前被选中的`el-option`的 value 属性值
```html
<div>
    <mc-select
        v-model="value">
        <mc-select-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value" />
    </mc-select>
</div>

<script>
    export default {
        data() {
            return {
                value:'选项3',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '绿豆糕'
                }, {
                    value: '选项3',
                    label: '双皮奶'
                }],
            }
        }
    }
</script>
```
:::

### 带标题的下拉选择框

:::demo 为`title`设置标题内容文本
```html
<div>
    <mc-select
            :title="'下拉列表标题'"
            v-model="value">
        <mc-select-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value" />
    </mc-select>
</div>

<script>
    export default {
        data() {
            return {
                value:'选项3',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '绿豆糕'
                }, {
                    value: '选项3',
                    label: '双皮奶'
                }],
            }
        }
    }
</script>
```
:::


### 禁用状态

:::demo 添加`disabled`属性
```html
<div>
    <mc-select
            v-model="value"
            disabled>
        <mc-select-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value" />
    </mc-select>
</div>

<script>
    export default {
        data() {
            return {
                value:'选项3',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '绿豆糕'
                }, {
                    value: '选项3',
                    label: '双皮奶'
                }],
            }
        }
    }
</script>
```
:::


### 分组
:::demo 使用`mc-select-group`组件对备选项进行分组，它的`label`属性为分组名
``` html
<div>
    <mc-select v-model="value">
        <mc-select-group
                v-for="group in optionsGroup"
                :key="group.label"
                :label="group.label" >
            <mc-select-option
                    v-for="item in group.options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.name" />
        </mc-select-group>
    </mc-select>
</div>

<script>
    export default {
        data() {
            return {
                value:'选项3',
                optionsGroup: [
                    {
                    label: '热门城市',
                    options: [{
                        value: 'Shanghai',
                        label: '上海'
                    }, {
                        value: 'Beijing',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options: [{
                        value: 'Chengdu',
                        label: '成都'
                    }, {
                        value: 'Shenzhen',
                        label: '深圳'
                    }, {
                        value: 'Guangzhou',
                        label: '广州'
                    }, {
                        value: 'Dalian',
                        label: '大连'
                    }]
                }],
            }
        }
    }
</script>
```
:::




### select 属性

|参数		|说明		|类型		|可选值		|默认值		|
|-----------|-----------|-----------|-----------|-----------|
|title		|组件标题		|String		| — 		| — 		|
|tips		| — 		|String		| — 		| — 		|
|disabled	|禁用		|Boolean	| — 		| false 		|
|clearable	|是否显示X图标 |Boolean 	| — 		| false 		|
|filterable	|搜索功能 |Boolean 	| — 		| false 		|


### select 事件

|参数		|说明		|回调参数		|
|-----------|-----------|-----------|
|change		|选中值发生变化时触发		|目前的选中值		|
|cleared	|点击"X" 图标		|清除的选中值		|
