# 組件名`cap4-search` ---- ### 引入 ```js import Cap4Search from 'cap4-pc-ui/lib/cap4-search'; import 'cap4-pc-ui/lib/cap4-search/css/cap4-search.css'; ``` ### 基礎用法 <template> <div class="demo-block"> <cap4-search :float="float" @search="search"></cap4-search> </div> </template> <script> export default { data() { return { float: 'none', showSelect: true, width: 300, list: [ { value: 1, display: '北京' }, { value: 2, display: '上海' }, { value: 3, display: '廣州' } ], }; }, methods: { search(value) { console.log('value', value); } } }; </script> ::: demo ```html <template> <div class="demo-block"> <cap4-search :float="float" @search="search"></cap4-search> </div> </template> <script> export default { data() { return { float: 'none', }; }, methods: { search(value) { console.log('value', value); } } }; </script> ``` ::: ### 帶下拉 <template> <div class="demo-block"> <cap4-search :float="float" @search="search" :showSelect="showSelect" :list="list" :width="width"></cap4-search> </div> </template> ::: demo ```html <template> <div class="demo-block"> <cap4-search :float="float" @search="search" :showSelect="showSelect" :list="list" :width="width"></cap4-search> </div> </template> <script> export default { data() { return { float: 'none', showSelect: true, width: 300, list: [ { value: 1, display: '北京' }, { value: 2, display: '上海' }, { value: 3, display: '廣州' } ], }; }, methods: { search(value) { console.log('value', value); } } }; </script> ``` ::: ### Attributes | 參數 | 說明 | 類型 | 可選值 | 默認值 | |---------- |------------------------------------ |---------- |------------- |-------- | |value | 參數 (選填)) | String | — | — | |width | 參數 (選填)) | [String, Number] | — | 200 | |height | 參數 (選填)) | [String, Number] | — | 30 | |fontSize | 參數 (選填)) | [String, Number] | — | 14 | |noBorder | 參數 (選填)) | Boolean | — | false | |showSelect | 參數 (選填)) | Boolean | — | false | |list | 參數 (選填)) | Array | — | — | |placeholder | 參數 (選填)) | String | — | $i18n('cap.common.lbsMapUi.searchPlace') | |float | 參數 (選填)) | String | — | 'right' | ### Event | 事件名稱 | 說明 | 回調參數 | |------------- |----------- |--------- | |search |成功回調| str/obj |