js如何生成二维码_jquery 生成二维码无法识别

js如何生成二维码_jquery 生成二维码无法识别前言最近根据自己的需求寻找到了一款简单易用的生成二维码插件,特此分享一、使用步骤1.下载插件npmiqrcodejs2或yarnaddqrcodejs2二、vue中使用1.vue2<template><div><divref=”qrcodeDom”></div><button@click=”show”>展示二维码</button><bu.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

前言

最近根据自己的需求寻找到了一款简单易用的生成二维码插件,特此分享

一、使用步骤

1.下载插件

npm i qrcodejs2

或

yarn add qrcodejs2

二、vue 中使用

1. vue 2 

<template>
  <div>
    <div ref="qrcodeDom"></div>
    <button @click="show">展示二维码</button>
    <button @click="clear">清除二维码</button>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  methods: {
    // 生成二维码
    MakeQrcode() {
      new QRCode(this.$refs.qrcodeDom, {
        text: "https://www.npmjs.com/package/qrcodejs2", // 扫码后页面地址
        width: 128, // 二维码宽度
        height: 128, // 二维码高度
        colorDark: "#000000", // 二维码颜色
        colorLight: "#ffffff", // 背景颜色
        correctLevel: QRCode.CorrectLevel.H, // 校正水准
      });
    },
    // 清除二维码
    clear() {
      this.$refs.qrcodeDom.innerHTML = "";
    },
    // 展示二维码
    show() {
      this.$nextTick(() => {
        this.MakeQrcode();
      });
    },
  },
};
</script>

2. vue3

<template>
  <div>
    <div ref="qrcodeDom"></div>
    <button @click="MakeQrcode">生成二维码</button>
    <button @click="clearQrcode">清除二维码</button>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";
import QRCode from "qrcodejs2";
// 二维码盒子节点
const qrcodeDom = ref();
// 生成二维码
const MakeQrcode = () => {
  nextTick(() => {
    new QRCode(qrcodeDom.value, {
      text: "https://www.npmjs.com/package/qrcodejs2", // 扫码后页面地址
      width: 128, // 二维码宽度
      height: 128, // 二维码高度
      colorDark: "#000000", // 二维码颜色
      colorLight: "#ffffff", // 背景颜色
      correctLevel: QRCode.CorrectLevel.H, // 校正水准
    });
  });
};
// 清除二维码
const clearQrcode = () => {
  qrcodeDom.value.innerHTML = "";
};
</script>

三、React 中使用

import React, { useRef } from 'react'
import QRCode from 'qrcodejs2'

const App = () => {
    // 二维码盒子节点
    const qrcodeDom = useRef(null)
    // 生成二维码
    const makeQrcode = () => {
        new QRCode(qrcodeDom.current, {
            text: "https://www.npmjs.com/package/qrcodejs2", // 扫码后页面地址
            width: 128, // 二维码宽度
            height: 128, // 二维码高度
            colorDark: "#000000", // 二维码颜色
            colorLight: "#ffffff", // 背景颜色
            correctLevel: QRCode.CorrectLevel.H // 校正水准
        });
    }
    // 清除二维码
    const clearQrcode = () => {
        qrcodeDom.current.innerText = ''
    }

    return (
        <div>
            <div ref={qrcodeDom}></div>
            <button onClick={() => makeQrcode()}>生成二维码<button>
            <button onClick={() => clearQrcode()}>清除二维码<button>
        </div>
    )
}

export default App

四、补充

因为利用了 new  所以每次触发都会生成一个新的对象,同时在盒子中追加子节点。

js如何生成二维码_jquery 生成二维码无法识别

 如果你不想触发一次就多一个,就在创建前清空一下

盒子节点.innerText = “”

还有这种方式可以生成二维码,不过会比较大,样式的话我是利用js修改了

 let qrcode = new QRCode(节点);
 qrcode.makeCode("内容");
 // 设置样式
 this.$refs.qrcodeDom.querySelector("img").style.cssText = "width:40px";

总结

非常基础,cv即用

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/180866.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Unity3d场景快速烘焙【2020】

    Unity3d场景快速烘焙【2020】很多刚刚接触Unity3d的童鞋花了大量的时间自学,可总是把握不好Unity3d的烘焙,刚从一个坑里爬出来,又陷入另一个新的坑,每次烘焙一个场景少则几个小时,多则几十个小时,机器总是处于假死机状态,半天看不到结果,好不容易烘焙完了,黑斑、撕裂、硬边、漏光或漏阴影等缺陷遍布,惨不忍睹,整体效果暗无层次,或者苍白无力,灯光该亮的亮不起来,该暗的暗不下去,更谈不上有什么意境,痛苦的折磨,近乎失去了信心,一个团队从建模到程序,都没什么问题,可一到烘焙这一关,就堵得心塞,怎么也搞不出好的视觉效果,作品没法及时向用户交

  • 使用line_profiler查看api接口函数每行代码执行时间

    使用line_profiler查看api接口函数每行代码执行时间

  • html页面根据js名称调用需要的js

    html页面根据js名称调用需要的js

  • webpack 核心_学术界最重要的价值基础是

    webpack 核心_学术界最重要的价值基础是前言本质上,webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部构建一个依赖图(dependencygraph),此

  • 让你彻底理解浅拷贝和深拷贝的区别是什么_怎么让文件无法拷贝

    让你彻底理解浅拷贝和深拷贝的区别是什么_怎么让文件无法拷贝在写js的时候经常会遇到复制对象,在复制对象的过程中往往会出现新对象改变原对象等等的一些问题,今天特意梳理一下,希望能帮助到遇到这些问题的开发人员。什么是浅拷贝,深拷贝以及和他们之间的区别赋值浅拷贝深拷贝在开始梳理之前先说一下值类型和引用类型:值类型(基本类型):字符串(string)、数值(number)、布尔值(boolean)、undefined、null;引用类型:对象(Object)、数组(Array)、函数(Function);1、什么是浅拷贝,深拷贝以及和他们之间的区别

  • 【C++学习五】STL库的应用

    【C++学习五】STL库的应用文章目录初识C++之STL标准库1.C++STL的三大核心组件2.自定义函数与算法对容器实现操作3.基于自定义函数以及操作模板实现简易数字图像处理3.1图像灰度变换3.2图像二值化4.初识STL容器之:set集合5.初识STL容器之:map(关联容器)结语初识C++之STL标准库STL是StandardTemplateLibrary的缩写,中文译为“标准模板库”。STL是C++标准库的一部分。我们之前已经基本了解了C++中的模板templet,以及模板的作用。可以说,C

    2022年10月15日

发表回复

您的电子邮箱地址不会被公开。

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