# 組件名`cap4-horizontal-list` ---- ### 引入 ```js import Cap4HorizontalList from 'cap4-pc-ui/lib/cap4-horizontal-list'; import 'cap4-pc-ui/lib/cap4-horizontal-list/css/cap4-horizontal-list.css'; ``` ### 基礎用法 <template> <div class="demo-block"> <cap4-horizontal-list :list="list"> <template v-slot="slotProps"> <li style="width:150px; height:80px; line-height:40px;">{{ list[slotProps.index].display }}</li> </template> </cap4-horizontal-list> </div> </template> <script> export default { data() { return { list: [ { value: 1, display: '北京' }, { value: 2, display: '上海' }, { value: 3, display: '廣州' }, { value: 4, display: '北京1' }, { value: 5, display: '上海1' }, { value: 6, display: '廣州1' } ], }; } }; </script> ::: demo ```html <template> <div class="demo-block"> <cap4-horizontal-list :list="list"> <template v-slot="slotProps"> <li style="width:150px; height:80px; line-height:40px;">{{ list[slotProps.index].display }}</li> </template> </cap4-horizontal-list> </div> </template> <script> export default { data() { return { list: [ { value: 1, display: '北京' }, { value: 2, display: '上海' }, { value: 3, display: '廣州' }, { value: 4, display: '北京1' }, { value: 5, display: '上海1' }, { value: 6, display: '廣州1' } ], }; } }; </script> ``` ::: ### Attributes | 參數 | 說明 | 類型 | 可選值 | 默認值 | |---------- |------------------------------------ |---------- |------------- |-------- | |list | 參數 (選填)) | Array | — | — | ### Slot | 參數 | 說明 | 類型 | 可選值 | 默認值 | |---------- |------------------------------------ |---------- |------------- |-------- | |index | 序號 (數組中的第幾項)) | Number | — | — |