脚本宝典收集整理的这篇文章主要介绍了深入了解Vue使用vue-qr生成二维码的方法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
“二维码”的英文是“QR Code”,“QR”是“Quick Response”的缩写,反映出这种二维码具有“超高速识读”的特点。“Quick Response Code”也就是“快速响应码”。
npm install vue-qr --save
下载成功:
import VueQr From 'vue-qr'
text
二维码,即扫描二维码后跳转的页面size
二维码大小margin
二维码图像的外边距, 默认 20pxbgSrc
嵌入的背景图地址LOGoSrc
嵌入至二维码中心的 LOGO 地址logoScale
中间图的尺寸dotScale
二维码的点的大小colorDark
实点的颜色(注意:和colorLight一起设置才有效)colorLight
空白的颜色(注意:和colorDark一起设置才有效)autoColor
若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true<template> <div> <vue-qr :text="imgUrl" :size="250" :logoSrc="logo" :logoScale="0.2"> </vue-qr> </div> </template> <script> import VueQr from 'vue-qr' export default { name:'', components:{ VueQr, }, data() { return { imgUrl: 'https://baidu.COM', logo: require('@/assets/tea_128.png'), } }, methods:{ }, } </script>
结果:
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
@H_601_126@ 您可能感兴趣的文章:以上是脚本宝典为你收集整理的深入了解Vue使用vue-qr生成二维码的方法全部内容,希望文章能够帮你解决深入了解Vue使用vue-qr生成二维码的方法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。