Vue3 vue-qr（二维码生成、下载 ）

1.下载

npm install vue-qr --save
或
yarn add vue-qr --save
或
pnpm add vue-qr --save

2.引入

//html
<vue-qr :callback="qrBack" :text="qrText" :size="200" :logoSrc="logoSrc"></vue-qr>
//点击下载图片
<button @click="downQr">下载生成的二维码图片</button>
//js
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

3.实现方法

//下载二维码图片
const downQr = () => {
  let name  = new Date().getTime();
  let a = document.createElement("a");
  a.style.display = "none";
  a.download = name;
  a.href = qrData.value;
  document.body.appendChild(a);
  a.click();
}
//二维码图片的编码数据
const qrData = ref("");
//qr的回调，每次变动后把二维码的数据保存下来，供下载用
const qrBack = (dataUrl,id) => {
  qrData.value = dataUrl;
}

4.npm 地址

www.npmjs.com/package/vue…

5.实现效果