canvas-slider-vue v1.0.2

使用说明

• 本插件是基于canvas和面向对象封装的轮播图

• 具体使用方法

  1. 安装依赖 npm i canvas-slider-vue
  2. 页面创建一个显示轮播图元素， 必须设置宽度，高度可不设置，如果高度设置会以设置的高度为准，如果没有设置高度，会以图片比例设置高度

  3. 引入slider.js, 然后进行初始化。完整代码如下

             <template>
                 <div class="slider" ref="mySlider">
                 </div>
             </template>
     
             <script>
                 import Slider from 'canvas-slider-vue';
                 export default {
                 mounted() {
                     new Slider(this.$refs.mySlider, {
                         isAutoPlay: false, // 是否自动轮播 
                         imgList: [require('@/assets/img/a.jpg'), require('@/assets/img/b.jpg'),require('@/assets/img/c.jpg'),require('@/assets/img/d.jpg')], // 图片列表
                         dotColor: "red", // 点的颜色
                         dotWidth: 20, // 点的宽度
                         dotGap: 15, // 点与点之间的间距
                         dotLineWidth: 2, // 点的外层边框宽度
                         dotLineColor: "red", // 点边框的颜色
                         arrowLineWidth: 6, // 箭头的粗细
                         arrowWidth: 40, // 箭头的宽度
                         arrowHeight: 60, // 箭头的高度
                         arrowLineColor: "#fff", // 箭头的颜色
                         arrowGap: 10, // 箭头距离页面两侧的间距
                         arrowPadding: 10, // 箭头内部的间距
                         arrowBgColor: "rgba(0,0,0,0.5)", // 箭头的外层元素背景色
                         })
                     }
                 }
             </script>
     
             <style scoped>
                 .slider {
                     width: 800px;
                 }
             </style>