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)


相关推荐

  • 大数据Hadoop生态圈介绍

    大数据Hadoop生态圈介绍大数据Hadoop生态圈-组件介绍Hadoop是目前应用最为广泛的分布式大数据处理框架,其具备可靠、高效、可伸缩等特点。Hadoop的核心组件是HDFS、MapReduce。随着处理任务不同,各种组件相继出现,丰富Hadoop生态圈,目前生态圈结构大致如图所示:根据服务对象和层次分为:数据来源层、数据传输层、数据存储层、资源管理层、数据计算层、任务调度层、业务…

  • MPLS 虚拟专用网络技术原理与配置

    MPLS 虚拟专用网络技术原理与配置

  • ping工具(群ping)

    ping工具(群ping)​今天给大家推荐一款ping工具:群ping平常我们ping一个IP地址使用命令ping,但是ping一个网段的地址就很麻烦需要一个一个去ping:下面就是群ping的界面:双击打开软件,此时

  • 将cas-server-3.5.2 导入到myeclipse中

    将cas-server-3.5.2 导入到myeclipse中

  • 大数据平台框架、组件以及处理流程详解

    大数据平台框架、组件以及处理流程详解数据产品和数据密不可分作为数据产品经理理解数据从产生、存储到应用的整个流程,以及大数据建设需要采用的技术框架Hadoop是必备的知识清单,以此在搭建数据产品时能够从全局的视角理解从数据到产品化的价值。本篇文章从三个维度:1.大数据的处理流程2.大数据的的平台框架Hadoop3.Hadoop生态圈组件理解了数据从产生到场景应用每个环节的流程过程以及企业在建立大数据平台时需要采用的技术…

  • asp.net中的Gridview控件添加序号列

    asp.net中的Gridview控件添加序号列asp.net中的Gridview控件添加序号列

发表回复

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

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