1.0.0 • Published 1 year ago
ball-swiper v1.0.0
简介
ball-swiper。
快速开始
npm i ball-swiper -S快速应用
全局注入
import BallSwiper from 'ball-swiper'
app.use(BallSwiper);局部注入
import { BallSwiper } from 'ball-swiper';
export default {
name: 'App',
components: {
BallSwiper
}
}主参数
| 参数 | 类型 | 必填项 | 默认值 | 参考值 | 说明 |
|---|---|---|---|---|---|
| data | Array | √ | 数据 - 来源。 | ||
| height | String | × | 100% | 高度。 | |
| showNum | Number | × | 7 | 展示数据量，请使用奇数值，偶数值会向上加1变成奇数结果。 | |
| itemBg | String | × | item背景。 | ||
| jtImg | String | × | 左右箭头图片。请传入左侧箭头图片，右侧箭头会自动水平反转使用。 |
方法
| 参数 | 类型 | 解释 |
|---|---|---|
| @itemClick | 点击回调 | (obj) => {}。 |
示例
常规
<BallSwiper
:data="data"
@itemClick="itemClick">
<template #default="scope">
<div class="name">{{ scope.row.name }}</div>
<div class="img">
<img :src="getImageUrl(`images/moduleGuide/${scope.row.url}.png`)">
</div>
</template>
</BallSwiper>