Qrcode

在我的项目中呈现二维码常见的性能，实现计划有很多种，我用的是vue-qr 1.先装置 vue-qr npm install vue-qr --save2.申明以及引入 <script>import VueQr from 'vue-qr'; export default {components: { VueQr, },}</script>就是申明引入一个组件 3.应用 <template> <div> <vue-qr :logo-src="logoSrc" :size="200" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc" /> </div></template><script>export default { data(){ return { logoSrc:"", appSrc:"http://www.baidu.com" } components: { VueQr, }, }}写了个小demohttps://weijunn.github.io/Vue... https://github.com/WeiJunn/Vu... 具体的应用办法能够去官网看 https://www.npmjs.com/package...

var style = document.body.currentStyle || document.defaultView.getComputedStyle(document.body, ""); let fs = style.fontSize.replace("px", ""); let size = fs * 3.12; var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: url, // 须要转换为二维码的内容 width: size, height: size, colorDark: "#000000", colorLight: "#ffffff", });H5端rem自适应 因为qrcode 参数传入默认px 导致不能正确居中显示二维码，解决采纳获取body.fontSize 计算出px值传入qrcode 实现不同屏幕都可居中

1.开发环境 vue+QRCode2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们常常会应用到二维码,在这里我抉择的是QRCode,然而咱们可能会遇到须要一键保留到本地,上面我来分享一下如何实现。4.废话不多说,先上效果图: 当我点击 Save Photo To Share 的时候,咱们就能够把这个二维码保留到本地了(就是下载下来的意思)5.在template中增加如下代码: <p ref="qrCodeUrl" class="QrImg" id="qrCode"><div class="inviteSaveBtn" @click="SaveShare"> <van-button>Save Photo To Share</van-button></div>6.在methods中增加如下代码: //留神:只是局部代码// 保留分享 SaveShare() { console.log("我是保留分享事件"); let myCanvas = document.getElementById('qrCode').getElementsByTagName('canvas'); //创立一个a标签节点 let a = document.createElement("a") //设置a标签的href属性（将canvas变成png图片） a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream') //设置下载文件的名字 a.download = "二维码"; //点击 a.click() },//留神:这个 a.download的值能够通过传参的办法;倡议应用参数的模式7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。