vue3使用qrcode.vue生成二维码（附代码实例）

需求

前端根据后台返回链接生成二维码

复制链接

下载生成的二维码图片

前言

vue2项目中有 qrcode qrcodejs qrcodejs2 等插件可以很好的实现，but vue3 项目中第一次操作 发现这几个插件都不支持 于是找了好久找到支持3的插件 戳我查看qrcode.vue ok 上代码：

安装

yarnaddqrcode.vue

qrcode.vue

<template><qrcode-vue:value="value":size="size"level="H"/></template><script>import{defineComponent,reactive,toRefs}from'vue'importQrcodeVuefrom'qrcode.vue'exportdefaultdefineComponent({props:{value:{type:String,require:true},size:{type:Number,default:100}},components:{QrcodeVue},setup(props){conststate=reactive({value:props.value,size:props.size})return{...toRefs(state),}},})</script>

使用

//main.ts中注册全局组件importQrCodefrom'./components/QrCode.vue'constapp=createApp(App)app.component('qr-code',QrCode)

//组件中使用<qr-code:value="links":size="150"id="canvasDom"></qr-code>

下载链接

下载链接需要将要下载的内容放置到一个input中 可以设置 position: absolute;z-index: -1;脱离文档流并隐藏

constcopyLink=():void=>{state.copyUrl=state.linkssetTimeout(()=>{constcopyDom=document.getElementById('copy-input')asHTMLInputElement;copyDom.select()document.execCommand("Copy");//复制ElMessage({type:'success',message:'复制成功!'})})}

下载qrcode生成的二维码

constdownLoadQRcode=():void=>{constcanvas=document.getElementById('canvasDom')asHTMLCanvasElementconsturl=canvas.toDataURL("image/png")//通过toDataURL返回一个包含图片展示的dataURIconstaDom=document.createElement("a")aDom.download=state.linksName//设置下载的文件名aDom.href=urldocument.body.appendChild(aDom)aDom.click()aDom.remove()}