vue实现二维码生成（vue + vue-qr）

1.安装依赖包

https://www.npmjs.com/package/vue-qr

npm install vue-qr --save

2.使用vue-qr生成二维码

// 二维码组件
import VueQr from 'vue-qr'

完整代码

<template>
  <div class="hello">
    <h1> 二维码</h1>
    <vue-qr ref="Qrcode" 
            :text="dataObj.text" 
            :logoSrc="dataObj.logo" 
            :callback="test" qid="testQrId"></vue-qr>
            
  </div>
</template>

<script>
// 二维码组件
import VueQr from 'vue-qr'

export default {
  name: 'HelloWorld',
  components: { VueQr },
  data () {
    return {
      dataObj: {
        text: 'https://blog.csdn.net/weixin_43760328/rss/list',
        logo: require('../assets/logo.png')
      }
    }
  },
  methods: {
    test(dataUrl, id) {
        console.log(dataUrl)
        console.log(id)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

结果：

3.实现下载二维码图片

代码：

<template>
  <div class="hello">
    <h1> 二维码</h1>
    <vue-qr ref="Qrcode" 
            :text="dataObj.text" 
            :logoSrc="dataObj.logo" 
            :callback="test" qid="testQrId"></vue-qr>
    <a :href="exportLink" 
       @click="downloadImg" 
       :download="downloadFilename">下载二维码</a>
  </div>
</template>

<script>
// 二维码组件
import VueQr from 'vue-qr'

export default {
  name: 'HelloWorld',
  components: { VueQr },
  data () {
    return {
      dataObj: {
        text: 'https://blog.csdn.net/weixin_43760328/rss/list',
        logo: require('../assets/logo.png')
      },
      exportLink: '',
      downloadFilename: ''
    }
  },
  methods: {
    test(dataUrl, id) {
        console.log(dataUrl)
        console.log(id)
    },
    // 下载二维码图片
    downloadImg () {
      let Qrcode = this.$refs.Qrcode
      this.exportLink = Qrcode.$el.currentSrc
      this.downloadFilename = '二维码'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

结果：

3.实现复制二维码链接

http://www.clipboardjs.cn/

• 安装依赖

npm install clipboard --save

代码：

<template>
  <div class="hello">
    <h1> 二维码</h1>
    <vue-qr ref="Qrcode" 
            :text="dataObj.text" 
            :logoSrc="dataObj.logo" 
            :callback="test" qid="testQrId"></vue-qr>
    <button 
      class="tag-copy"
      :data-clipboard-text="dataObj.text"
      @click="copyShareLink">复制二维码</button>
    <a 
      :href="exportLink" 
      @click="downloadImg" 
      :download="downloadFilename">下载二维码</a>
  </div>
</template>

<script>
// 二维码组件
import VueQr from 'vue-qr'
// 复制粘贴组件
import Clipboard from 'clipboard'

export default {
  name: 'HelloWorld',
  components: { VueQr },
  data () {
    return {
      dataObj: {
        text: 'https://blog.csdn.net/weixin_43760328/rss/list',
        logo: require('../assets/logo.png')
      },
      exportLink: '',
      downloadFilename: ''
    }
  },
  methods: {
    test(dataUrl, id) {
        console.log(dataUrl)
        console.log(id)
    },
    // 复制链接
    async copyShareLink() {
      let clipboard = new Clipboard('.tag-copy')
      await clipboard.on('success', e => {
        alert('链接复制成功，请到微信打开！')
        clipboard.destroy() // 释放内存
      })
      clipboard.on('error', e => { 
        alert('该浏览器不支持自动复制！')  // 不支持复制  
        clipboard.destroy()  // 释放内存  
      })
    },
    // 下载二维码图片
    downloadImg () {
      let Qrcode = this.$refs.Qrcode
      this.exportLink = Qrcode.$el.currentSrc
      this.downloadFilename = '二维码'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

结果：