vue 条形码 二维码生成，复制文字

二维码生成

第一种方法：（qrcodejs2在iphone7 plus上面会黑屏且显示不全）
# 安装
$ npm install qrcodejs2 --save 

#调用
<template>
  <div>
   <el-button @click="getQRCdoe">点击显示</el-button>
   // 用v-show 不然无法显示
   <div v-show="scanStatus" ref="qrCodeUrl" style="width:100px;height:100px" />
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'; // 引入qrcode
export default {
data() {
 return {
 	scanStatus: false
 },
 methods: {
    async getQRCdoe() {
      this.scanStatus = true
      // 这一步是由于第一步后点击显示会生成多个,所以需要清掉
      if (this.$refs.qrCodeUrl) {
        this.$refs.qrCodeUrl.innerHTML = ''
      }
      new QRCode(this.$refs.qrCodeUrl, {
        text: '生成二维码文字',
        width: 200,
       height: 200,
       colorDark: '#000000',
       colorLight: '#ffffff',
       correctLevel: QRCode.CorrectLevel.H
     })
    },
  }
};
</script>

第二种：（这种比第一种更加简单方便）
# 安装
$ npm i  vue-qriously -S

# 引用
//main.js
import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

# 使用
//home.vue
<template>
  <div>
    <qriously :value="qrcode" :size="200" />
  </div>
</template>
<script>
  export default {
    data() {
        return {
            qrcode: 'www.baidu.com'
         }
     }
  }
</script>

条形码生成

# 安装
$ npm install --save @xkeshi/vue-barcode

# 使用
<barcode :value="barcodeNum" :options="barcode_option"></barcode>
<script>
import barcode from "@xkeshi/vue-barcode";
export default{
  components: {
         barcode,
        },
    },
    data(){
	    return{
	      barcodeNum:'123456789'
	      barcode_option: {
	        displayValue: true, //是否默认显示条形码数据
	        background: '#fff', //条形码背景颜色
	        height: '25px',
	        fontSize: '12px',
	        lineColor: '#606266',
	     }
	  }
 }
</script>

参数说明：
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//设置条形码周围的空白边距

复制文字

# 安装
$ npm install --save vue-clipboard2

# main.js
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

# 使用
<template id="t">
  <div class="container">
	  <button type="button" @click="doCopy">Copy!</button>
  </div>
</template>
 <script>
export default {
  methods: {
    doCopy: function () {
	   this.$copyText('复制').then(() => {
	      msgFun('复制成功！', 'success')
	    }).catch(() => {
	       msgFun('复制失败！')
	    })
	 }
  }
};
</script>