简介

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 | √ | | | 数据 - 来源。 ball3D | Boolean | × | true | | 是否3D球面。 height | String | × | 100% | | 高度。 showNum | Number | × | 7 | | 展示数据量，请使用奇数值，偶数值会向上加1变成奇数结果。 span | Number | × | 0 | | 左右空隙，ball3D为false时有效。 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>