vue下 ，vant+二维码+条形码实现+复制处理

条形码和二维码实现示例图

提示：点击tab可以重新渲染条形码和二维码示例图
例如：

---

1、前端dom代码

 <van-tabs
	  class="paddingLR10"
	     :title-active-color="$store.state.skin.main"
	     title-inactive-color="#060606"
	     color="transparent"
	     @click="onClick"
	 >
	     <van-tab
	         v-for="(item, index) in info.mergeInfo"
	         :key="index"
	         :title="'NO.'+(index+1)"
	         :name="item"
	     ></van-tab>
	 </van-tabs>
	 <div class="usercode border1 bor-grey3 wrap flex_center paddingB10">
	     <div v-show="selectTab.coupon" class="width100_ align_center">
	         <svg id="barcode" />    //条形码的dom代码
	     </div>
	     <div v-show="selectTab.link" id="qrcode" ref="qrcode"></div> //二维码的dom代码
	 </div>

2、tab切换的点击事件

 onClick(item) { 
            this.selectTab = item; 
            this.$nextTick(() => {
                if (item.productType == 6 || item.productType == 8)
                    this.qrcode(item.link);
                if (item.productType == 7 || item.productType == 8)
                    this.barcode(item.coupon);
            })
        },

vue 生成条形码

1、npm下载：

npm install jsbarcode --save 

2、再你需要使用的页面mounted中调用使用的方法

 mounted() {
        this.$nextTick(() => {
             this.barcode('shuju');
        })
    }, 

 barcode(coupon) {
    var JsBarcode = require("jsbarcode")
    JsBarcode("#barcode", coupon, {
	  format: "CODE39",//选择要使用的条形码类型
	  width:3,//设置条之间的宽度
	  height:100,//高度
	  displayValue:true,//是否在条形码下方显示文字
	  text:"456",//覆盖显示的文本
	  fontOptions:"bold italic",//使文字加粗体或变斜体
	  font:"fantasy",//设置文本的字体
	  textAlign:"left",//设置文本的水平对齐方式
	  textPosition:"top",//设置文本的垂直位置
	  textMargin:5,//设置条形码和文本之间的间距
	  fontSize:15,//设置文本的大小
	  background:"#eee",//设置条形码的背景
	  lineColor:"#2196f3",//设置条和文本的颜色。
	  margin:15//设置条形码周围的空白边距
	}); 
 },

vue 生成二维码

1、npm下载安装qrcodejs2：

npm install qrcodejs2 --save

2、再你需要使用的页面mounted中调用使用的方法

 mounted() {
        this.$nextTick(() => {
             this.qrcode('5454546');
        })
    }, 

qrcode(link) {
      this.$refs.qrcode.innerHTML = ''
       new QRCode("qrcode", {
           width: 136, // 设置宽度，单位像素
           height: 136, // 设置高度，单位像素
           text: link // 设置二维码内容或跳转地址
       })
   },

复制数据

1、npm下载安装qrcodejs2：

npm install clipboard --save

2、再你需要使用的页面局部引入

import Clipboard from 'clipboard';

3、前端dom写一个点击标签 ， class必须是copy

<van-button
    :color="$store.state.skin.main"
    size="mini"
    class="copy"
    @click="changeCopy(info.orderNo)"
>复制</van-button>

4、点击后的调用事件

changeCopy(key) {
    let clipboard = new Clipboard('.copy', {
         text: trigger => { return key; }
     });
     this.clipboard = clipboard;//保存当前的实例对象
     clipboard.on('success', (e) => {
         this.$toast('复制成功');
     });
     clipboard.on('error', (e) => {
         this.$toast('该浏览器不支持复制');
         e.clearSelection();
     })
 },