使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框 与 Carousel 走马灯组件实现

使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框 与 Carousel 走马灯组件实现

前言：最近在对公司网页进行改版的时候遇到一个问题，需要在PC端实现一个功能，生成三张推广海报和用户邀请链接的二维码，由于有三张推广海报的背景图可供用户选择下载，于是我想到一个实现的方法：点击 “一键生成推广海报” 按钮，弹出一个模态框，里面是一个由三张背景图组成的轮播图，当用户点击"确定"按钮之后，将当前轮播的背景图作为推广海报下载到本地。

1.使用 iview Modal 对话框

<!-- 生成推广海报的按钮 -->
<div class="bill-btn">
   <Button class="bill" style="height:40px" @click="modal1=true;">一键生成推广海报</Button>
</div>```

<!-- 推广海报的模态框 -->
 <Modal
   v-model="modal1"
   width="330"
   @on-ok="ok"
   @on-cancel="cancel"
   :closable="false"
    >
                            
 </Modal>

2.在对话框中添加 iview Carousel 走马灯

注意：
1.要给carousel加一个v-if指令，值与控制Modal的booean值绑定，这样carousel就会延迟初始化，不然 carousel 里面的图片会不显示

<!-- 生成推广海报的按钮 -->
<div class="bill-btn">
   <Button class="bill" style="height:40px" @click="modal1=true;">一键生成推广海报</Button>
</div>

<Modal
   v-model="modal1"
   width="330"
   @on-ok="ok"
   @on-cancel="cancel"
   :closable="false"
   >
    	<Carousel v-model="value1" v-if="modal1" :dots="setting.dots"
        	<CarouselItem>
                <div>
                  <img src="../../assets/img/Poster1.png" width="100%" height="100%" alt=""> 
                </div>
              </CarouselItem>
              <CarouselItem>  
                <div>
                  <img src="../../assets/img/Poster2.png" width="100%" height="100%" alt="">
                </div>
              </CarouselItem>
              <CarouselItem>
                <div>
                  <img src="../../assets/img/Poster3.png" width="100%" height="100%" alt="">
                </div>
              </CarouselItem>
              
       	</Carousel>
 </Modal>

3.生成二维码

生成二维码的代码是看了另一位大佬的文章，感谢大佬
以下是原文链接https://blog.youkuaiyun.com/zuorishu/article/details/83866234

1.npm安装：npm install qrcanvas

2.并在当前页面引入：import { qrcanvas } from ‘qrcanvas’;

<div class="container">
	<div class="box" ref="box">
    	<div id="qrcode"></div>
    </div>
</div>

3.以下是js部分

qrcode() {
     
    let qrcode = new QRCode("qrcode", {
   
    	
    	// 这一行代码是先清空再生成,防止多次点击多次生成
    	document.getElementById("qrcode").innerHTML = "";

        width: 40, // 设置宽度
        height: 40, // 设置高度
        text: this.inviteLink, // 用户的邀请链接
      });
    },
    setQRCode() {
   
      this.$nextTick(function() {
   
        this.qrcode();
      });
    },

4.将二维码与背景图片组合

注意：
1.class名称不同是为了调整不同背景图中二维码的位置
2.id名称不同是为了同时在三张背景图中生成二维码，如果id相同，那么三张背景图中只会在第一张中生成二维码

以下是html部分：

<Carousel v-model="value1" v-if="modal1" :dots="setting.dots"
        	<CarouselItem>
                <div>
                  <img src="../../assets/img/Poster1.png" width="100%" height="100%" alt=""> 
                  <div class="qrCode1" id="qrcodeFirst" ref="qrcode"></div>
                </div>
              </CarouselItem>
              <CarouselItem>  
                <div>
                  <img src="../../assets/img/Poster2.png" width="100%" height="100%" alt="">
                  <div class="qrCode2" id="qrcodeSecond" ref="qrcode"></div>
                </div>
              </CarouselItem>
              <CarouselItem>
                <div>
                  <img src="../../assets/img/Poster3.png" width="100%" height="100%" alt="">
                  <div class="qrCode3" id="qrcodeThird" ref="qrcode"></div>
                </div>
              </CarouselItem>
              
       	</Carousel>

以下是修改后的Js代码部分