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)


相关推荐

  • UVA1455 – Kingdom(并查集 + 线段树)

    UVA1455 – Kingdom(并查集 + 线段树)

    2021年12月14日
  • C++实现贪吃蛇(控制台)

    C++实现贪吃蛇(控制台)游戏介绍有一条蛇,在屏幕上爬,用上下左右键控制吃东西,吃得多了,到了一定积分,就能过关。越吃越长,不能碰墙,不能咬自己的尾巴,没了,哈哈。这个蛇是条很有个性的蛇它会吃多少吐多少(如果要取消这个特性可以在代码中修改一行代码即可,我已经标注出来了)话不多说直接上代码(代码中有详细注释)!可以直接运行的://本来我是想用C语言实现的无奈水平有限,只能在C++下执行了,注意:这里使用的字符集为Unicode#define_CRT_SECURE_NO_WARNINGS#include<s

  • eNSP安装步骤_ENSP常用命令

    eNSP安装步骤_ENSP常用命令今天工作需要安装ensp,记下步骤以便以后使用。1前期准备工作1.1下载并打开VirtualBox-5.2.26-128414-Win安装包,按向导安装完毕。1.2下载并打开WinPcap_4_1_3安装包,按照导示安装完毕1.3下载并打开Wireshark-win64-1.12.4安装包,按照导示完成安装2完成ensp的安装下载并安装eNSP_Setup,打开运行按照导示完成安装即…

  • db4o使用全解「建议收藏」

    db4o使用全解「建议收藏」db4o使用全解 db4o是一种纯对象数据库,相对于传统的关系数据库+ORM,db4o具有以下好处:1)以存对象的方式存取数据(不过你考虑一下完全以对象的方式去考虑数据的存取对传统的数据库设计思维来说是多么大的颠覆)2)无需数据库服务器,只需要一个数据文件,且dll大小仅为300多k,非常适合作为嵌入式数据库;3)提供QueryBySample,NativeQuery和S

  • Java内存管理-Stackoverflow问答-Java是传值还是传引用?(十一)

    勿在流沙筑高台,出来混迟早要还的。做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!本文导图:一、由一个提问引发的思考在Stack Overflow 看到这样一个问题:Is Java “pass-by-reference” or “pass-by-value”?翻译成中文:Java是传值还是传引用?请先不要看下面的内容,思考10秒后,在继续阅…

  • 事业单位图形推理1000题及答案_小学生图形推理题

    事业单位图形推理1000题及答案_小学生图形推理题  2020年事业单位联考:《职测》判断推理神预测!   经过几个月的紧张备考,广大考生终于在今天走上了“战场”。经过小时的奋笔疾书,2020年下半年事业单位联考职业能力测试于今天上午拉下帷幕。根据学员的惊喜反馈,我们发现华图教育又双叒叕预测中题目了!!!   通过考生们对题目的回忆,华图教育惊喜地发现有4个考点跟我们考前给学员预测的大致相同!下面我们就一起来简单看一下:   一…

发表回复

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

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