在Vue-cli项目中动态生成二维码

我就是我 2022-05-17 12:51 209阅读 0赞

1、引入qrcode--------npm install qrcode

2、在main.js中引入

import QRCode from 'qrcode'    //定义生成二维码组件

3、在需要使用到生成二维码的组件中引入

import QRCode from 'qrcode'     //引入生成二维码组件

4、在HTML中定义生成的位置，注意添加样式

<template>
      <div id="query">
        <h1>二维码：</h1>
        <canvas id="canvas"></canvas>
      </div>
    
    </template>

#canvas{
        width: 80%!important;
        height: auto!important;
      }

5、在js中定义生成二维码的方法并调用

//动态生成二维码
        useqrcode(){ 
          //生成的二维码内容，可以添加变量
    　　　　this.QueryDetail='http://www.kspxzx.com/#/guard'+"?unique_code="+this.QueryDetail;var canvas = document.getElementById('canvas')
            QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
            if (error) console.error(error)
            console.log('success!');
            })
        }

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220517/680f4b3fb98d45dfb0f2489ea6b6974e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220517/c882f325f86843eaafeb1482c166f173.png

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关生成二维码

相关博客：[统一返回结果][Link 1] 创建SpringBoot项目  <dependency> <gr

傷城~/ 2022年10月20日 13:55/ 0 赞/ 331 阅读

相关 SpringBoot项目中生成二维码

基础环境 SpringBoot、Maven 这里是使用了[Hutool 的二维码生成工具类][Hutool] > 二维码的生成基础，都是zxing包，这是

淩亂°似流年/ 2022年09月05日 04:07/ 0 赞/ 279 阅读

相关生成二维码

一个命名空间 namespace BarCode \{ public static class TwoDimensionCode \{

悠悠/ 2022年08月05日 01:17/ 0 赞/ 364 阅读

相关动态生成带logo的二维码

二维码的生成，需要通过GOOGLE提供的ZXING来完成，而水印图片的合成则通过JDK自带的com.sum.image.code.\包来完成首选，通过http://www.

深碍√TFBOYSˉ_/ 2022年06月10日 11:21/ 0 赞/ 190 阅读

相关使用Zxing生成二维码，以及在生成的二维码中添加logo

最近研究了Zxing的源码，以及它的一些常用的用法，感触也是很深，也提高了不少，网上也找了各种写法，要真正的理解这一整套东西还是要花费些经历的，涉及的知识面还是有一些的，下面

梦里梦外;/ 2022年05月30日 20:20/ 0 赞/ 244 阅读

相关在Vue-cli项目中动态生成二维码

1、引入qrcode--------npm install qrcode 2、在main.js中引入 import QRCode from 'qrcode'

我就是我/ 2022年05月17日 12:51/ 0 赞/ 209 阅读

相关 vue中动态生成二维码

二维码的url是url+动态参数，完美兼容，亲试可用！ [vue项目中动态生成二维码][vue] 有问题关注公众号：wander\_yun。原则：只分享经过实践，测

偏执的太偏执、/ 2022年04月22日 02:08/ 0 赞/ 316 阅读

相关 python-MyQR库生成动态二维码

实验楼 [https://www.shiyanlou.com/][https_www.shiyanlou.com] Python 生成个性二维码首先安装二维码的第三方库

痛定思痛。/ 2022年02月14日 04:23/ 0 赞/ 176 阅读

相关二维码生成

maven依赖  <dependency> <groupId>com.google.zxing</groupId>

悠悠/ 2021年12月10日 15:39/ 0 赞/ 500 阅读

相关 phpqrcode生成动态二维码简单实例

![phpqrcode生成动态二维码简单实例][phpqrcode] 这是一个利用phpqrcode生成动态二维码简单实例，比微信官方提供的接口还要好用。二维码是动态的

素颜马尾好姑娘i/ 2021年09月20日 03:56/ 0 赞/ 441 阅读