Vue生成二维码_vue通过二维码分享

Vue生成二维码_vue通过二维码分享转存vue生成二维码并下载1、下载插件npminstall–saveqrcodejs22、引入constQRCode=require(“qrcodejs2″)3、组件使用<template><divclass=”qr_code”><divstyle=”display:flex;align-items:center”>地址:<Inputid=”text”type=”te

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

Jetbrains全系列IDE稳定放心使用

转存 vue 生成二维码并下载

1、下载插件

npm install --save qrcodejs2

2、引入

const QRCode = require("qrcodejs2")

3、组件使用

<template>
    <div class="qr_code">
        <div style="display: flex;align-items: center">
            地址:<Input id="text" type="text" v-model="urlx" style="width:400px"/><br/>
            <Button style="margin: 0 10px;" type="primary" @click="getMadeQrCode">生成</Button>
            二维码名称:<Input type="text" v-model="qrCodeName" style="width:200px;"/><br/>
            <Button style="margin-left: 10px" type="primary" @click="downloadQrCode">下载</Button>
        </div>
        <div id="qrcode" ref="qrcodeU" style="width:200px; height:200px; margin-top:15px;"></div>
    </div>
</template>

4、生成二维码

//二维码生成
async getMadeQrCode() { 
   
     document.getElementById('qrcode').innerHTML = ''; //生成前先清除上一个
     let qrcode = new QRCode(this.$refs.qrcodeU, { 
   
         text: this.urlx,//二维码包含的信息
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
     });
}

传送门: vue自动生成二维码并下载打印到本地…

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Python学习之MacBook Pro中PyCharm安装pip以及itchat

    Python学习之MacBook Pro中PyCharm安装pip以及itchat前言:Mac中自带的python没有用,自己安装了一个PyCharm,网上很多人说安装Itchat后会安装到自带的Python中去。本文记录怎么安装到自己安装的Python3.7中去。主要技术来源于https://www.cnblogs.com/ace722/p/9697331.html,在此引用并表示感谢,以下只是精炼的步骤,具体可参考原博客。步骤一:首先查看自己是否有安装到pip,在Ter…

    2022年8月28日
    2
  • Java 泛型

    Java 泛型

    2021年10月7日
    38
  • 命令行升级pip_pip升级版本命令

    命令行升级pip_pip升级版本命令查询当前pythonpip版本:pipshowpip输入python-mpipinstall–upgradepip命令升级;报错:ERROR:CouldnotinstallpackagesduetoanEnvironmentError:[WinError5]拒绝访问。:‘c:\programfiles\python37\lib\site-packages\pip-19.2.3.dist-info\entry_points.txt’Considerusin.

    2025年6月19日
    2
  • c++容器(vector、list、deque)

    vector,deque 和 list顺序性容器:向量 vector :是一个线性顺序结构。相当于数组,但其大小可以不预先指定,并且自动扩展。它可以像数

    2021年12月22日
    55
  • 基本稳压电路

    基本稳压电路经过整流后的电源具有较大的电压纹波,单靠调节滤波电容不能明显改善输出电源纹波特性,因此需要采用稳压电路来减小输出电源的纹波。若直将稳压管接至负载输出,则稳压管的工作特性受负载影响较大,甚至会出现不能正常工作的情况。采用下图所示的稳压电路则能保证稳压管始终能够正常工作。其核心思想仍然是负反馈。运放正输入端采用稳压管提供一个相对稳定的基准电压,并通过同相放大在输出端得到一个稳定的输出电压。而由于运放具有一定的电源抑制比,所以在供电电压在一定范围波动时,其仍可正常工作。同向比例运放的输出电流有限,故采用了

    2022年6月20日
    34
  • AGV控制系统搭建

    目的  本文介绍自动导引车(AGV)车载控制系统的实现过程,分为硬件搭建和软件设计两部分,并在其中穿插AGV控制的基础知识讲解。1.车载控制器1.1控制器的类型  车载控制器是控制系统乃至整个AGV的核心,那么应该选择哪种控制器呢?根据笔者的经验,现在的AGV厂家采用的车载控制器基本可以分为以下三种:  下面简要介绍几种控制器的特点:  1.PLC…

    2022年4月9日
    112

发表回复

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

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