轮播是vant组件，需要先装van依赖包
npm i vant -S //详情查看官方文档
npm install --save html2canvas //安装html2canvas依赖 官方文档
<!-- 二维码分享 -->
<template>
<div class="code_layout">
<div id="html2canvasid" class="code" v-if="show == 1">
<div class="swiper_">
<img class="bjimg" :src="bjshow" alt="" />
<div class="van-swipe-item_">
<div class="code_img" >
<!-- 二维码 -->
<img src="@/assets/logo.png" alt="" />
<div class="code_txt">邀请码：123456</div>
</div>
</div>
</div>
</div>
<div class="code" v-if="show == 0">
<div class="swiper_">
<van-swipe class="my-swipe" autoplay="false" indicator-color="red" ref="swiper" @change="onChange">
<van-swipe-item v-for="item in bjimg" :key="item.id">
<img :src="item.img" alt="" />
<div class="van-swipe-item_">
<div class="code_img">
<!-- 二维码 -->
<img src="@/assets/logo.png" alt="" />
<div class="code_txt">邀请码：123456</div>
</div>
</div>
</van-swipe-item>
</van-swipe>
</div>
<div class="arrow">
<van-icon name="arrow-left" @click="changeSwipe('up')" />
<van-icon name="arrow" @click="changeSwipe('down')"/>
</div>
</div>
<div class="code_btn">
<div class="code_btn_1" @click="copyUrl">复制链接</div>
<div class="code_btn_2" @click="download">点击图片保存</div>
</div>
</div>
</template>
<script>
import html2canvas from 'html2canvas';
import { Toast } from 'vant';
export default {
data() {
return {
copydata:"默认复制文本", //分享链接
two_code_url:"", //二维码
toDataURL:'', //截图
bjimg:[ //背景图
{
id:1,
img: require('@/assets/1.jpg'),
},
{
id:2,
img: require('@/assets/2.jpg')
},
],
show:0, //截图与视图显示切换
bjshow:"", //需要截图的背景图片
swid:0, //轮播切换触发，0为第一张
}
},
created(){
},
methods:{
//复制
copyUrl(){
let input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("id","xw-copy-test");
input.setAttribute("value",this.copydata);
input.style.width = "10px";
input.style.height = "0px";
input.style.position = "fixed";
input.style.display = "block";
input.style.border = "none";
input.style.top = "0px";
input.style.zIndex = "-10";
document.body.appendChild(input);
let Url = document.getElementById("xw-copy-test");
Url.select();
document.execCommand("Copy");
document.activeElement.blur();
Toast("复制成功");
},
//保存图片
download(){
this.show =1
this.bjshow = this.bjimg[this.swid].img
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0.5, // 持续展示 toast
});
setTimeout(()=> {
html2canvas(document.querySelector("#html2canvasid"),{
backgroundColor: null,
useCORS:true,
allowTaint:false,
logging:false,
taintTest: false,
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
this.downImg=dataURL;
this.toDataURL = dataURL
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
Toast("长按二维码保存");
setTimeout(() => {
this.show =0
}, 500);
return;
} else {
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0.5, // 持续展示 toast
});
setTimeout(()=>{
var a = document.createElement('a')
a.download = 'xw-img'
// 设置图片地址
a.href = this.toDataURL;
a.click();
// document.getElementById("img").click()
},500)
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0.5, // 持续展示 toast
});
setTimeout(() => {
this.show =0
}, 500);
}
});
},500)
},
onChange(index) {
window.scrollTo(0, 0);
this.swid = index
},
changeSwipe(type) {
if(type == 'up') {
this.swid -= 1;
} else if (type == 'down') {
this.swid += 1;
}
this.$refs.swiper.swipeTo(this.swid);
},
},
components:{
}
};
</script>
<style scoped>
.code_layout{
width: 100vw;
height: 100vh;
}
.swiper_{
width: 100%;
height: 100%;
}
.van-swipe{
width: 100%;
height: 100%;
}
.my-swipe .van-swipe-item {
color: #fff;
width: 100%;
height: 100%;
text-align: center;
background-color: #39a9ed;
}
.van-swipe-item img{
width: 100%;
height: 100%;
overflow: hidden;
}
.code{
width: 100%;
height: 100vh;
background-size:100% 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.van-swipe-item_{
width: 375px;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
margin-top: 150px;
}
.code_img{
width: 200px;
height: 200px;
display: block;
text-align: center;
}
.code_img img{
margin: 0 auto;
width: 106px;
height: 106px;
}
.code_txt{
font-size:15px;
color: #fff;
text-align: center;
}
.bjimg{
width: 100%;
height: 100%;
}
.arrow{
width: 100%;
position: fixed;
display: flex;
justify-content: space-between;
}
.arrow .van-icon{
color: #fff;
}
.code_btn{
width: 100%;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-size:15px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(255,255,255,1);
background: #fff;
position: fixed;
bottom: 0;
}
.code_btn_1{
width:139px;
height:42px;
/* background:linear-gradient(94deg,rgba(252,38,89,1),rgba(255,202,215,1)); */
background:rgba(252,38,89,1);
border-radius:21px 0px 0px 21px;
line-height: 42px;
text-align: center;
}
.code_btn_2{
width:139px;
height:42px;
/* background:linear-gradient(-84deg,rgba(255,177,66,1),rgba(255,201,126,1)); */
background: rgba(255,201,126,1);
border-radius:0px 21px 21px 0px;
line-height: 42px;
text-align: center;
}
::v-deep .van-swipe__indicators{
top: 600px
}
::v-deep .van-swipe__indicator{
width: 10px;
height: 10px;
background-color:rgba(255,177,66,1)
}
</style>
