Vue 导入qrcodejs2库生成二维码

Vue 导入qrcodejs2库生成二维码1 下载安装 qrcodejs2 包 npmiqrcodejs 导入 importQRCode qrcodejs2 3 html divclass qrcode id qrcode class 是我的样式可以忽略 但是 id 一定要下 4 使用 以下是我的代码 需求是该页面就会显示二维码 我用的是 s divclass qrcode id qrcode

1.下载安装qrcodejs2包

 npm i qrcodejs2

2.导入

import QRCode from "qrcodejs2";

3.html

 
  
//class是我的样式可以忽略,但是id一定要下

 

4.使用,以下是我的代码,需求是该页面就会显示二维码,我用的是search方法,然后在create中进行回调函数的使用

 methods: { search() { var qrcode = new QRCode("qrcode", { text: 'www.baidu.com', //表示内容,可以是地址或者是文字'55566'或者参数 colorDark : "#000000", //前景色 colorLight : "#ffffff", //背景色 correctLevel : QRCode.CorrectLevel.H //容错级别 } }, created(){ this.$nextTick (function () { this.search(); }) }, mounted() { }, 

没加nexttick之前我的二维码显示不出来,解决方法就是nexttick就可以。

 

同时也可以使用其他的方法:

qrcode.clear(); // 清除代码 qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码

若有什么错误欢迎纠正!

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/211871.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 下午9:23
下一篇 2026年3月18日 下午9:24


相关推荐

  • 纯净版系统怎么安装_纯净版安装版win7

    纯净版系统怎么安装_纯净版安装版win7百度网盘下载:1.链接:https://pan.baidu.com/s/1o-HcKddSG6IAz_0COKhq8Q提取码:hkhr2.扫码下载:

    2022年8月4日
    8
  • 【TCP/IP】IP地址的划分及其分类

    【TCP/IP】IP地址的划分及其分类了解Internet中使用的网络层地址,又称IP地址。每个设备都至少需要一个IP地址,其可以作为我们设备的标识,就跟我们的电话号码一样,知道了电话号码就能找到我们,所以每个IP地址都是唯一的,所以在给每台设备分配IP时,会根据一套编号方案进行。IP作用于OSI参考模型中的网络层,在终端通信中作为唯一标识,便于确定数据的传递目标。IP地址分为:IPv4、IPv6大多数用户熟悉并且流行的IP地址是IPv4,其是用点分四组十进制的表示方法展示的,例如165.195.130.107

    2022年6月14日
    32
  • 如何正确配置vLLM中Qwen的–repeat-penalty参数以避免输出重复?

    如何正确配置vLLM中Qwen的–repeat-penalty参数以避免输出重复?

    2026年3月13日
    2
  • latex怎样绘制表格_LaTeX排版

    latex怎样绘制表格_LaTeX排版latex在线生成表格的网站:http://www.tablesgenerator.com/latex_tables这个网站可以通过三种方式来生成latex表格代码:1、自己设置表格;2、直接导入csv表格;3、直接复制表格内容1、自己设置表格点击File,选择newtables,可以设置需要的行列数2、点击importcsvfile,可以直接导入3、 点击…

    2022年8月11日
    19
  • 【推荐五款ssh连接工具】

    【推荐五款ssh连接工具】五款 ssh 连接工具

    2026年3月20日
    3
  • malloc函数用法

    malloc函数用法1、函数声明void*malloc(intsize);说明:malloc向系统申请分配size字节的内存空间,返回类型为void*类型。2、使用int*p;p=(int*)malloc(sizeof(int));注意:(1)因为malloc返回的是不确定类型的指针,所以返回之前必须经过类型强制转换,否则编译报错,如:“不能将void*赋值给int*变量

    2022年6月10日
    77

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号