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


相关推荐

  • idea 21 激活码【最新永久激活】「建议收藏」

    (idea 21 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~HC…

    2022年4月1日
    234
  • JLink接口的SWD接法

    JLink接口的SWD接法下面为J-Link接口定义:仿真器端口连接目标板备注1.VCCMCU电源VCCVCC2.VCCMCU电源VCCVCC3.TRSTTRSTTestReSeT/pin4.GNDGND或悬空 5.TDITDITestDataInpin6.

    2022年5月27日
    123
  • ubuntu16.04.3安装教程_Ubuntu16下安装QQ

    ubuntu16.04.3安装教程_Ubuntu16下安装QQUbuntu16.04.1安装NginxNginx(“enginex”)是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器。Nginx是由IgorSysoev为俄罗斯访问量第二的Rambler.ru站点开发的,第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集

    2025年12月4日
    3
  • Java安全之Commons Collections6分析

    Java安全之CommonsCollections6分析0x00前言其实在分析的几条链中都大致相同,都是基于前面一些链的变形,在本文的CC6链中,就和前面的有点小小的区别。在CC6链中也和CC

    2021年12月12日
    47
  • c++迭代器遍历list集合_list迭代器遍历删除对象

    c++迭代器遍历list集合_list迭代器遍历删除对象迭代器可用于遍历ArrayList。如果ArrayList中有更多元素,则hasNext()方法返回true,否则返回false。next()方法返回ArrayList中的下一个元素,如果没有下一个元素,则引发异常NoSuchElementException。演示该程序的程序如下。示例importjava.util.ArrayList;importjava.util.Iterator;publ…

    2022年9月27日
    5
  • 如何统计汉字的个数

    如何统计汉字的个数

    2021年9月27日
    54

发表回复

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

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