### HSwiper
介紹：所謂 `HSwiper`即輪播圖組件，現在大部分網站都會在其頭部利用輪播圖組件，一來可以為網站增添媒體元素，提升用戶體驗，二來也可以提供最新的活動和通知消息。
<table>
<caption>HSwiper 屬性</caption>
<thead>
<th>屬性</th>
<th>說明</th>
<th>類型</th>
<th>默認值</th>
</thead>
<tbody>
<tr>
<td>value</td>
<td>當前輪播圖所在幀數的下標，用 v-model 綁定</td>
<td>Number</td>
<td>-</td>
</tr>
<tr>
<td>items</td>
<td>每一幀用到的數據，包括圖片地址和標題</td>
<td>Array</td>
<td>[]</td>
</tr>
<tr>
<td>interval</td>
<td>播放間隔，以秒為單位</td>
<td>Number</td>
<td>3</td>
</tr>
<tr>
<td>color</td>
<td>當一幀被選中時，對應小圓圈的背景顏色</td>
<td>String</td>
<td>#F46060</td>
</tr>
<tr>
<td>arrow</td>
<td>決定是否有左右選擇箭頭</td>
<td>Boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
<table>
<caption>item 屬性</caption>
<thead>
<th>屬性</th>
<th>說明</th>
<th>類型</th>
<th>默認值</th>
</thead>
<tbody>
<tr>
<td>title</td>
<td>標題</td>
<td>String | Number</td>
<td>-</td>
</tr>
<tr>
<td>src</td>
<td>圖片的鏈接</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
示例代碼：
<template>
<div class="container">
<div class="box">
<HSwiper :items="items" v-model="select1" @onClick="clickHandler"></HSwiper>
</div>
<div class="box">
<HSwiper :items="items" v-model="select2" :arrow="arrow"></HSwiper>
</div>
</div>
</template>
<script>
import { HSwiper } from 'vuecomponent'
export default {
components: {
HSwiper
},
data () {
return {
items: [
{ title: '折得一枝香在手,人間應未有', src: 'https://images.unsplash.com/photo-1500534623283-312aade485b7?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop='},
{ title: '野火燒不盡,春風吹又生', src: 'https://images.unsplash.com/photo-1489619243109-4e0ea59cfe10?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop=' },
{title: '無可奈何花落去,似曾相識燕歸來', src:'https://images.unsplash.com/photo-1487792679672-426a0e091886?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop='}
],
select1: 0,
select2: 0,
arrow: true
}
},
methods: {
clickHandler (index) {
console.log(index)
}
}
}
</script>
<style scoped>
.box {
width: 480px;
height: 240px;
margin-right: 24px;
}
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
</style>
效果示意圖:
