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自动生成二维码并下载打印到本地…

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

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

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

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

(0)


相关推荐

  • COM聚合技术中的QueryInterface

    COM聚合技术中的QueryInterface最近在看COM聚合技术时遇到一个关于QueryInterface的问题。在《COM技术内幕》和《COM原理与应用》中都是寥寥数句带过,看起来很易理解,我却看了许久才有所领悟。先说明一下,为了节省篇幅,对于一些约定俗成的代码和变量,下文不再进行说明,如内部组件指向外部组件的m_pUnknownOuter和外部组件指向内部组件的m_pUnknownInner等,这些内容在相关书籍都有描述。问题

  • Socket粘包问题「建议收藏」

    Socket粘包问题「建议收藏」什么时候要考虑粘包问题1.:如果利用tcp每次发送数据,就与对方建立连接,然后双方发送完一段数据后,就关闭连接,这样就不会出现粘包问题(因为只有一种包结构,类似于http协议)。关闭连接主要要双方都发送close连接(参考tcp关闭协议)。如:A需要发送一段字符串给B,那么A与B建立连接,然后发送双方都默认好的协议字符如”hellogivemesthabouryourself”,然后

  • I/O多路复用方案

    1.本节思维导图2.基本的网络编程接口2.1基于TCP的通信模型2.2基于UDP的通信模型3.非阻塞的服务器程序file、pipe、fifo、socket在默认创建过程中都是阻塞的

    2021年12月28日
  • 保存和检索字符串

    保存和检索字符串

  • ip addr命令配置ip_linux查不到ip地址

    ip addr命令配置ip_linux查不到ip地址在高可用,多线路及系统维护的特殊情况下,我们通常会通过”ipaddr”这一命令来添加一个隐形IP在相应的设备上,但是当我们在一个设备上添加多个ip的时候,删除某个IP的时候尤其要注意,下面通过几个实例来说明,如下root@localhost~]#ipaddradd10.1.1.230/24deveth0[root@localhost~]#ipaddradd10….

  • RSA加密算法c++实现

    RSA加密算法c++实现RSA加密算法c++实现 先码个代码:/*************************************************************************&gt;FileName:RSA.cpp&gt;Author:YB&gt;E-mail:134…

发表回复

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

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