1、安装swiper

npm install swiper vue-awesome-swiper --save

2、在vue页面引入swiper

import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.min.css';
let activeIndex = 0; //定义swiper当前索引值

3、在data里面配置swiper的数据

data() {return {swiperOptions: {pagination: {el: '.swiper-pagination'},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'},autoplay:false,on: {slideChangeTransitionEnd: function(){activeIndex = this.activeIndex;//切换结束时，获取当前index素银，赋值给activeIndex}}},}}

4、html页面的代码

<div class="code"><swiper :options="swiperOptions" ref="mySwiper"><swiper-slide v-for="(item,index) in imageUrlList" :key="index"><div class="imgBox"><canvas :id="'canvas' + index" class="myCanvas" width="320" height="466"></canvas></div></swiper-slide><div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div></swiper>
</div>
<div  class="footer" ><el-button type="primary" @click="unloadPic">下 载</el-button><el-button @click="codeVisible=false">关 闭</el-button>
</div>

5、js代码

//下载推广码unloadPic(){let curCanvas = document.getElementById('canvas' + activeIndex);let a = document.createElement('a');a.href = curCanvas.toDataURL('image/png');a.download = new Date().getTime();a.click();},//画推广码initCanvas(qrcodeUrl) {//这里必须要使用$nextTick()才能获取到canvasthis.$nextTick(() => {let myCanvas = document.querySelectorAll('.myCanvas');let ctx = [];Array.from(myCanvas).map((item, index) => { ctx[index] = item.getContext('2d');ctx[index].fillStyle = '#fff';ctx[index].fillRect(0, 0, item.width, item.height);let avatarUrl = {};avatarUrl = new Image();avatarUrl.setAttribute('crossOrigin', 'anonymous');avatarUrl.src = this.avatarUrl + '?tamp='+(new Date()).valueOf();avatarUrl.onload = () =>{  //将图片剪切为原型画出来ctx[index].save();ctx[index].beginPath();ctx[index].arc(41, 433, 25, 0, Math.PI * 2, false);ctx[index].clip();ctx[index].drawImage(avatarUrl, 16, 408, 50, 50);};let img = [];img[index] = new Image(); //创建img对象img[index].setAttribute('crossOrigin', 'anonymous');img[index].src = this.imageUrlList[index] + '?tamp='+(new Date()).valueOf();img[index].onload = () => {  //必须要图片加载完成才能实现ctx[index].restore();ctx[index].drawImage(img[index], 0, 0, 319, 400);};ctx[index].fillStyle = '#000';ctx[index].font = '16px PingFangSC-Regular,PingFang SC';ctx[index].fillText(this.nickName,80,440);});});},