# 组件`cap4-select` ---- ### 引入 ```js import Cap4PcUiSelect from 'cap4-pc-ui/lib/cap4-select'; import 'cap4-pc-ui/lib/cap4-select/css/cap4-select.css'; ``` ### 依赖 * 图标依赖于 cap4字体库 ### 基础用法 <template> <div class="demo-block"> <cap4-select v-model="selectValue" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" :list="list" @change="selectChange" ></cap4-select> </div> </template> <script> export default { data() { return { selectValue: '', leftSpan: '选择', leftSpanWidth: 50, list: [ { value: 1, display: '北京' }, { value: 2, display: '上海' }, { value: 3, display: '广州' } ], disable: true, searchable: true }; }, methods: { selectChange(value, item) { console.log('value', value); console.log('item', item); } } }; </script> ::: demo ```html <template> <div class="demo-block"> <cap4-select v-model="selectValue" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" :list="list" @change="selectChange" ></cap4-select> </div> </template> <script> export default { data() { return { selectValue: '', leftSpan: '选择', leftSpanWidth: 50, list: [ { value: 1, display: '北京' }, { value: 2, display: '上海' }, { value: 3, display: '广州' } ] }; }, methods: { selectChange(value, item) { console.log('value', value); console.log('item', item); } } }; </script> ``` ::: ### 禁用状态 <template> <div class="demo-block"> <cap4-select v-model="selectValue" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" :list="list" :disable="disable" @change="selectChange" ></cap4-select> </div> </template> ::: demo ```html <template> <div class="demo-block"> <cap4-select v-model="selectValue" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" :list="list" :disable="disable" @change="selectChange" ></cap4-select> </div> </template> <script> export default { data() { return { selectValue: '', leftSpan: '选择', leftSpanWidth: 50, list: [ { value: 1, display: '北京' }, { value: 2, display: '上海' }, { value: 3, display: '广州' } ], disable: true }; }, methods: { selectChange(value, item) { console.log('value', value); console.log('item', item); } } }; </script> ``` ::: ### 可搜索 <template> <div class="demo-block"> <cap4-select v-model="selectValue" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" :list="list" :searchable="searchable" @change="selectChange" ></cap4-select> </div> </template> ::: demo ```html <template> <div class="demo-block"> <cap4-select v-model="selectValue" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" :list="list" :searchable="searchable" @change="selectChange" ></cap4-select> </div> </template> <script> export default { data() { return { selectValue: '', leftSpan: '选择', leftSpanWidth: 50, list: [ { value: 1, display: '北京' }, { value: 2, display: '上海' }, { value: 3, display: '广州' } ], searchable: true }; }, methods: { selectChange(value, item) { console.log('value', value); console.log('item', item); } } }; </script> ``` ::: ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |------------------------------------ |---------- |------------- |-------- | |value | 值 (必填)) | [String, Number] | — | — | |list | 可选项 (必填)) | Array | — | — | |leftSpan | 左侧文本 (选填)) | String | — | — | |leftSpanWidth | 左侧文本宽度 (选填)) | [String, Number] | — | 100 | |listHeight | 下拉框高度 (选填)) | [String, Number] | — | 200 | |disable | 不可选 (选填)) | Boolean | — | false | |inputWidth | 输入宽度 (选填)) | [String, Number] | — | 200 | |position | 位置 (选填)) | String | — | — | |normalSelect | 浏览器样式 (选填)) | Boolean | — | false | |showBorder | 是否显示边线 (选填)) | Boolean | — | true | |searchable | 是否可搜索 (选填)) | Boolean | — | false | ### Event | 事件名称 | 说明 | 回调参数 | |------------- |----------- |--------- | |change |值改变 | value, item |