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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 无人机的电路板和控制器_无人机飞控电路图

    无人机的电路板和控制器_无人机飞控电路图第1步,查看官方ESP-Drone无人机ESP32-S2-WROVER模块的参考设计原理图第二步,用KiCAD绘制ESP32-S2-WROVER模块及周边电路。1、如图2-1所示,从KiCAD的原理图符号库中直接调出ESP32-S2-WROVER的原理图符号。注意,在安装KiCAD软件后,它的原理图符号库中已经有ESP32-S2-WROVER的原理图符号,可以直接调用,对于没有的原理图符号,可以进行自己创建。2、如图2-2所示,给ESP32-S2-WROVER模块…

    2022年8月15日
    9
  • struts+hibernate工作原理和简单工程创建步骤(附工程下载地址)

    struts+hibernate工作原理和简单工程创建步骤(附工程下载地址)

    2021年7月18日
    58
  • todomvc项目_reactive vue

    todomvc项目_reactive vue所有实现代码在文章结尾处分析整个实现过程的步骤:1.显示大标题“todoMVC”在h1中引入{{msg}},在js文件中将msg赋值,从而在html中显示大标签的内容2.当没有数据时,两块模板需要隐藏,用到v-if标签。将两个模板放在一个template标签中,当items.length=0时,则v-if=false,进而两块模板隐藏。3.引入数据。将JS中写好的默认数据引入在html的每一个li标签中。4.将每个事件划分为完成/未完成。该功能用到双向数据绑定,可以在浏览器中vue模

    2025年10月30日
    3
  • mac下升级terminal/终端的subversion版本方法

    mac下升级terminal/终端的subversion版本方法

    2021年9月16日
    71
  • rider 激活码【2021.10最新】

    (rider 激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~23LN…

    2022年3月29日
    71
  • 你以为我在玩游戏?其实我在学 Java「建议收藏」

    你以为我在玩游戏?其实我在学 Java「建议收藏」大家好,我是程序员cxuan!今天继续卷起来!和大家一起Look一个有趣的国外编程网站!”今天我们来学习Java”。“Java是一门面向对象的编程语言”。“Java的特性有balabalabala…”。“Java与C的区别是xxxxxx”。“Java能用来balabalabala@!#$$”。balabalabalabalabalabalabalabala。原文链接:这个网站,要火!我还是不知道什么是Java。为什么我不知道什么是Java呢,我想是因为我

    2022年8月23日
    5

发表回复

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

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