vue二维码生成插件 - npm安装篇

vue二维码生成插件 - npm安装篇

---

具体使用：

1. 安装：

npm install vue-qr --save

2. 引入和声明

//在需要生成二维码的文件中引入比如qrCode.vue
import VueQr from 'vue-qr';
//声明组件
export default {
  components: {
    VueQr,
  },
}

3. 使用

直接以标签的形式加以配置项使用，如下

<template>
    <div>
        <vue-qr :logo-src="logoSrc"
          :size="191"
          :margin="0"
          :auto-color="true"
          :dot-scale="1"
          :text="appSrc" />
    </div>
</template>
<script>
export default {
    data(){
        return {
            logoSrc:"",
            appSrc:"http://www.baidu.com"
        }
    }
}
</script>

4. 相关属性配置解释

text: //编码的内容，不能为空且必须要有值
size: 尺寸, 长宽一致, 包含外边距
margin:二维码图像的外边距, 默认 20px，一定要设置为零，否则会被莫名奇妙的压缩
colorDark: 实点的颜色
colorLight: 空白区的颜色
bgSrc: 欲嵌入的背景图地址，一般不用，会比较花哨
backgroundDimming:叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc:欲嵌入至二维码中心的 LOGO地址，头像图片
logoScale:用于计算 LOGO大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认0.2f
logoMargin: LOGO标识周围的空白边框, 默认为0
logoCornerRadius:标识及其边框的圆角半径, 默认为0
whiteMargin:若设为true, 背景图外将绘制白色边框
dotScale: (0 < scale < 1.0f)数据区域点缩小比例，让你的数据保持原来尺寸，如果迷得连接特别长，可以用缩放，如果不是特别长，就设置为1，不然生成的二维码密密麻麻,有些商家的二维码密密麻麻，就是连接太长，导致的，加上不缩放。
autoColor:若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark
binarize:若为true, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold: (0 < threshold < 255)二值化处理的阈值
callback: 生成的二维码 Data URI可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的qid (因为二维码生成是异步的,所以加个 id 用于排序)
bindElement:指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE

版权声明：本文为CSDN博主「想成为大神的前端王菜鸟」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wwqqqq123/article/details/90261994

• 原文参考地址：点击查看

---

其他插件 · 文章参考：

1. cnblogs : Vue前端利用qrcode生成二维码
2. cnblogs : VUE 生成二维码(qrcodejs)

---

以上就是关于“ vue二维码生成插件 - npm安装篇 ” 的全部内容。