深入了解Vue使用vue-qr生成二维码的方法
程序员文章站
2022-03-07 14:13:48
目录npm下载步骤(1)导入(2)vue-qr参数示例总结“二维码”的英文是“qr code”,“qr”是“quick response”的缩写,反映出这种二维码具有“超高速识读”的特点。“quick...
“二维码”的英文是“qr code”,“qr”是“quick response”的缩写,反映出这种二维码具有“超高速识读”的特点。“quick response code”也就是“快速响应码”。
npm下载
npm install vue-qr --save
下载成功:
步骤
(1)导入
import vueqr from 'vue-qr'
(2)vue-qr参数
-
text
二维码,即扫描二维码后跳转的页面 -
size
二维码大小 -
margin
二维码图像的外边距, 默认 20px -
bgsrc
嵌入的背景图地址 -
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>
结果:
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!