【VUE】vue+vue-qr实现生成二维码，并下载二维码，以及

整理之前用的一些插件

生成二维码的插件有蛮多，例如：qrcode、vue-qriously、vue-qr等，
不过我采用的vue-qr，因为除了可以生成二维码，还可以在二维码中间加logo

<template>
  <div class="vue-qr">
        <vue-qr :logoSrc="config.logo"
                  :text="config.value"
                  :size="52"
                  :margin="0"
                  ref="Qrcode"
                  class="vue-qr-img"></vue-qr>
       <el-button type="primary"
                  class="tag-copy"
                  :data-clipboard-text="config.value"
                  @click="copyShareLink">复制二维码</el-button>
       <a :href="exportLink" @click="downloadImg" :download="downloadFilename">下载二维码</a>
  </div>
</template>
<script>

import VueQr from 'vue-qr' //生成二维码
import Clipboard from 'clipboard';//复制
export default {
 components: {
   VueQr
 },
 data() {
   return {
     config: {  //二维码参数
        value: 'https://element.eleme.cn/#/zh-CN/component/layout',//显示的值、跳转的地址
        logo: require('../../assets/img/logo.jpg'),//中间logo的地址
      },
      exportLink: '',
      downloadFilename: ''
    }
  },
  methods:{
    // 复制链接
    async copyShareLink() {
      let clipboard = new Clipboard('.tag-copy')
      await clipboard.on('success', e => {
        showNotification('success', '链接复制成功,请到微信打开！')
        clipboard.destroy() // 释放内存
      })
      clipboard.on('error', e => { 
        showNotification('warning', '该浏览器不支持自动复制！')   // 不支持复制  
        clipboard.destroy()  // 释放内存  
      })
    },

    // 下载二维码图片
    downloadImg () {
      let Qrcode = this.$refs.Qrcode
      this.exportLink = Qrcode.$el.currentSrc
      this.downloadFilename = '二维码'
    }
  }
}
</script>

除此之外还可以设置背景图等等，详细的请看vue-qr