做网站需准备些什么问题,海淀做网站好的公司,亿网通官网,装修房子图片三室一厅效果图最近在写后台管理系统时#xff0c;遇到一个需求就是要实现二维码的展示下载复制到剪切板。 效果图如下#xff1a;
1.二维码展示下载功能——qrcodejs20.0.2
我是安装的qrcodejs20.0.2#xff0c;指定了具体的版本号#xff0c;也可以安装默认的当前稳定版本#xff0…最近在写后台管理系统时遇到一个需求就是要实现二维码的展示下载复制到剪切板。 效果图如下
1.二维码展示下载功能——qrcodejs20.0.2
我是安装的qrcodejs20.0.2指定了具体的版本号也可以安装默认的当前稳定版本即npm安装时不指定版本号。
1.npm/yarn安装qrcodejs2
npm install qrcodejs2 or yarn add qrcodejs2
2.引入qrcodejs2
由于我只是在单个页面上用到此功能因此只需要当前页面局部引入没有全局注册。
import QRCode from qrcodejs2;2.1html代码
templatea-modaltitle入职登记表:visiblevisible:confirmLoadingconfirmLoadingokhandleOkcancelhandleCancelwidth500pxa-spin :spinningconfirmLoading tip正在处理中请稍后div classqrcode refqrCodeUrl idqrcodeId/div!-- 作为下载二维码使用 --a reflocatorQRCodeDownloadLinkRef styledisplay: none/adiv classbtnClsa-button typeprimary clickhandleDownloadLocatorQRCode下载二维码/a-button/divdiv classbtnClsa-buttonidcopyBtntypeprimary:data-clipboard-textcopyConfigghostclickhandleClipboard复制链接/a-button/div/a-spin/a-modal
/template2.2js代码
import Clipboard from clipboard;
import QRCode from qrcodejs2;
export default{data(){return{visible: false,copyConfig: ,qrcode: null,qrcodeImgUrl: ,}},methods:{//弹窗打开调用的接口showModal(){this.visible true;this.$nextTick((){//创建二维码this.creatQrCode();})},creatQrCode(){let str window.location.hash;let urlArr str.split(/);urlArr.splice(urlArr.length - 1, 1);urlArr.push(RecommenH5);let url window.location.origin / urlArr.join(/);this.copyConfig url;console.log(url);document.getElementById(qrcodeId).innerHTML ; //在调用qrCode前使用js原生方法清空元素内容this.qrcode new QRCode(this.$refs.qrCodeUrl, {text: url, // 需要转换为二维码的内容width: 140,height: 140,colorDark: #000000,colorLight: #ffffff,correctLevel: QRCode.CorrectLevel.H,});let qrcodeCanvas ((this.$refs.qrCodeUrl || {})?.getElementsByTagName?.(canvas) || [])?.[0];this.qrcodeImgUrl qrcodeCanvas?.toDataURL?.(image/png); // 作为下载图片资源},//下载二维码功能handleDownloadLocatorQRCode() {let downloadLink this.$refs.locatorQRCodeDownloadLinkRef;downloadLink.setAttribute(href, this.qrcodeImgUrl);console.log(this.qrcodeImgUrl, this.qrcodeImgUrl);downloadLink.setAttribute(download,二维码_${new Date().getTime()}.png);downloadLink.click();URL.revokeObjectURL(downloadLink.href);},}
}2.复制链接功能——clipboard2.0.8
我是安装的clipboard2.0.8指定了具体的版本号也可以安装默认的当前稳定版本即npm安装时不指定版本号。
1.npm/yarn安装clipboard
npm install clipboard or yarn add clipboard
2.引入clipboard
由于我只是在单个页面上用到此功能因此只需要当前页面局部引入没有全局注册。
import Clipboard from clipboard;2.1html代码
同上; 主要代码就是一个按钮
a-buttonidcopyBtntypeprimary:data-clipboard-textcopyConfigghostclickhandleClipboard复制链接/a-button2.2复制功能
handleClipboard() {let clipboard new Clipboard(#copyBtn);clipboard.on(success, () {this.$message.success(复制成功);clipboard.destroy();});
},完成多多积累多多收获
