如果按照文档步骤有问题,或者看不懂,那就看demo的代码吧!!!因为文档我瞎写的
npm install sea-carousel --save
// main.js
import SeaCarousel from "sea-carousel"
import "sea-carousel/lib/sea-carousel.css"
Vue.use(SeaCarousel)
<sea-carousel column="3" spacing="15" arrow="always">
/*** 自定义左右翻页箭头,否则为默认,很丑的哦 ***/
<span slot="left"><i class="el-icon-arrow-left"></i></span>
<span slot="right"><i class="el-icon-arrow-right"></i></span>
/*** 要展示的内容需要用SeaCarouselItem组件包裹 ***/
<sea-carousel-item v-for="(item, index) in dataList" :key="index">
// 要展示的内容
</sea-carousel-item>
</sea-carousel>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
column | 列数 | Number | -- | 2 |
spacing | 列间距 | Number | -- | 16 |
arrow | 箭头显示方式 | String | always/hover | hover |
方法名 | 说明 | 参数 |
---|---|---|
resize | 容器宽度改变时调用 | -- |
turnPage | 翻页 | -1-上一页,1-下一页 |
name | 说明 |
---|---|
default | 只能是SeaCarouselItem |
left | 上一页 |
right | 下一页 |
name | 说明 |
---|---|
default | 要展示的内容 |