xsd-swiper v1.1.6

1. 组件介绍

1. xsd-swiper 是一个基于 swiper 的 轮播图组件
2. xsd-swiper 封装了 swiper 复杂的配置，只保留简单常用的接口，使用起来非常方便。
3. 欢迎你的使用，如果对 xsd-swiper 有任何的意见和建议，请发送至 962454954@qq.com ,我们将进行快速迭代。

2. 组件使用

2.1 安装

1. npm i xsd-swiper

2.2 引入

1. 全局引入

   import Vue from 'vue'
   import xsdSwiper from 'xsd-swiper'
   Vue.use(xsdSwiper)

2. 全局按需引入

   import {
       xsdSwiper
   } from 'xsd-swiper'
   Vue.component('xsd-swiper', xsdSwiper)

3. 组件内引入

   import {
       xsdSwiper
   } from 'xsd-swiper'
   export default {
       components: {
           xsdSwiper
       }
   }

2.3 使用

2.3.1 组件的属性

1. imgList

   1. imgList 是一个存储图片路径的数组
   2. 如果是本地图片路径，需要先 require, 这种情况可以看使用实例
   3. 网络路径直接填地址即可。

2. width

   1. 用来设置轮播图的宽度，需要带单位
   2. 如果不设置，则默认为 父组件的宽度

3. height

   1. 用来设置轮播图的高度，需要带单位
   2. 高度往往可以不用设置，可以根据图片的纵横比自动设置

4. button

   1. 如果置为 true ，则会显示左右两个箭头，用来切换轮播图
   2. 如果置为 false， 则不会显示箭头 （默认）

5. dot

   1. 如果置为 true ，则会显示分页器
   2. 如果置为 false ，则不会显示分页器 (默认)

6. autoplay

   1. 如果置为 false， 则不会自动播放
   2. 如果置为 true， 则会自动播放（默认）
   3. 如果置为 数字， 则会自动播放，时间间隔为 设定的数字，单位为 毫秒

7. canClick

   1. 如果置为 false，则图片不可以点击放大（默认）
   2. 如果置为 true，则图片可以点击放大

2.3.2 使用示例

<template>
  <div id="app">
    <xsd-swiper width="300px" :imgList="imgs" :button="true" :dot="true" :autoplay="2000"></xsd-swiper>
  </div>
</template>

<script>
import { xsdSwiper } from "xsd-swiper"

export default {
  name: 'App',
  components: {
    xsdSwiper
  },
  data() {
    return {
      imgs: [
        require('./components/jg.png'),
        require('./components/ld.png'),
        require('./components/qs.png'),
      ],
    }
  },
}
</script>

3. 样式类

1. 分页器高亮时样式

   .swiper-pagination-bullet-active {
       background-color: red; // 设置高亮时的颜色
   }

2. 分页器默认样式

   .swiper-pagination-bullet {
       width: 8px;
       height: 8px;
       display: inline-block;
       border-radius: 100%;
       background: #000;  // 默认为黑色
       opacity: 0.2;  // 默认透明度 为 0.2
   }

3. 箭头样式

   .xsd-pre,
   .xsd-next {
       position: absolute;
       top: 50%;
       top: 50%;
       width: 15px;
       height: 15px;
       border: 2px solid #fff;
       border-right: none;
       border-bottom: none;
       z-index: 10;
       outline: none;
   }

   .xsd-pre {
       left: 20px;
       transform: translateY(-50%) rotate(-45deg);
   }

   .xsd-next {
       right: 20px;
       transform: translateY(-50%) rotate(135deg);
   }

4. 图片样式

   .img-wrap {
       border-radius: 8px;
       overflow: hidden;
   }

   img {
       width: 100%;
       height: 100%;
       vertical-align: middle;
       object-fit: cover;
       border-radius: 8px;
       overflow: hidden;
   }