Vue - 使用qrcodejs2生成二维码

z_星河

已于 2022-09-14 11:28:36 修改

阅读量1.6k

点赞数 3

文章标签： vue.js 前端 javascript

于 2022-09-13 15:34:53 首次发布

本文链接：https://blog.csdn.net/z_2183441353/article/details/126830030

版权

本文详细介绍了如何使用qrcodejs2库在HTML页面中生成二维码。首先，通过npm安装qrcodejs2库，然后在HTML模板中设置布局，并定义二维码元素。接着，在JavaScript中导入库，调用方法生成二维码，设置其内容、尺寸、颜色等属性。最后展示了点击按钮生成二维码的实现效果。

摘要由CSDN通过智能技术生成

了解：QR码（英语：Quick Response Code；全称为快速响应矩阵图码）是二维码的一种，

QR来自英文Quick Response的缩写，即快速反应，因为发明者希望QR码可以快速解码其内容

一、整体实现流程

按海报样式设计好html元素的页面布局, 包括背景图,文本,以及二维码图片的位置
使用 qrcodejs2库将分享链接合成二维码图片,赋值到html中的二维码元素上

二、实现步骤

1.引入第三方插件

qrcodejs2 (合成二维码)

代码如下：

npm i qrcodejs2 --save               --qrcodejs2 安装

2.开始使用

HTML部分

<template>
  <div class="qrcode">
    <h1>点击生成签到二维码</h1>
    <van-button type="primary" class="line1" @click="makeQrcode">点击生成签到二维码 </van-button>
    <div class="Qrcode" ref="qrcode"></div>
  </div>
</template>

JavaScript部分

import Qrcode from "qrcodejs2"
export default {
    data(){
        return {  }
    },
    methods:{
        makeQrcode(){
            new Qrcode(this.$refs.qrcode,{
                // text 需要转二维码的内容 可以是文本也可以是一个链接 是链接会直接跳走
                text:'http://www.baidu.com',
                width:200,
                height:200,
                colorDark:'#333',//二维码颜色
                colorLight:'#fff',//二维码背景颜色
                correctLevel:Qrcode.CorrectLevel.L//容错率,L/M/H
            })
     }
    },
    mounted(){},
}


<style scoped lang="scss">
.line1 {
  margin: 10px 0;
}
</style>