使用vue自制二维码

之前收藏了一篇制作二维码的文章，今天得空自己实现下。实现步骤如下：

一、在已有的vue环境下安装vue-qr：

        npm install vue-qr --save

        命令执行结束时可以看见版本号表示安装成功。

二、在新建的vue文件中导入并使用VueQr组件

引入该组件并进行注册

   三、在template中使用该组件

配置完属性后页面刷新就可以了

四、组件中的属性说明

        logo-src：嵌入二维码中心的logo地址，一般可设置为图片（例如加微信好友的二维码中间logo是自己的微信头像）；

        size：二维码大小。尺寸，长宽一致，包含外边距；

        margin：二维码的外边距，默认是20px；

        colorDark：二维码的实点颜色；

        colorLight: 空白区的颜色；

        auto-color：如果为true，二维码背景图的主要颜色将作为实点颜色，即colorDark；

        dot-scale:(0 < scale < 1.0f) 数据区域点缩小比例。让数据保持原来尺寸，如果连接长，可以用缩放，如果不长，就设置为1，以防生成的二维码密密麻麻还不缩放；

        text：二维码扫码后出现的内容。如果是文字则直接显示，如果是链接则跳转至该链接页面；

        logoMargin：logo-src周围的空白边框, 默认为0；

        whiteMargin: 如果为 true, 背景图外将绘制白色边框；

        logoScale: 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin)，默认 0.2f；

       logoCornerRadius: 标识及其边框的圆角半径, 默认为0；

       binarize: 如果为 true, 图像将被二值化处理, 未指定阈值则使用默认值；

       binarizeThreshold:(0 < threshold < 255) 二值化处理的阈值；

       callback: 生成的二维码data url 可以在回调中取得,第一个参数为二维码 data url, 第二个参数为 props 传过来的id(因为二维码生成是异步的,所以加个 id 用于排序)；

       bindElement: 指定是否需要自动将生成的二维码绑定到HTML上, 默认是true。

---

小伙伴们有空也可以自己试试呀>_<