# 組件`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 |