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


相关推荐

  • ASP.Net MVC 之如何写Log

    ASP.Net MVC 之如何写Log

    2021年8月12日
    74
  • react路由嵌套

    react路由嵌套在config.js中添加配置项importTwofrom”../pages/Home/Two”importRecommendfrom”../pages/Recommend/Recemmend”;//导入组件letrouters=[{path:”/home”,//路由地址component:Home,//路由模板routes:[//路由嵌套配置路由嵌套不能使用精准匹配

    2022年4月29日
    43
  • 数据结构与算法Python_数据结构与算法python语言实现

    数据结构与算法Python_数据结构与算法python语言实现我们已经知道算法是具有有限步骤的过程,其最终的目的是为了解决问题,而根据我们的经验,同一个问题的解决方法通常并非唯一。这就产生一个有趣的问题:如何对比用于解决同一问题的不同算法?为了以合理的方式提高程序效率,我们应该知道如何准确评估一个算法的性能。本节学习首先介绍算法分析的重要性,并讲解了分析算法的时间复杂度和空间复杂度分析方法,最后介绍了Python列表和字典常见操作的时间复杂度。

    2022年9月27日
    4
  • C++之greater和less

    C++之greater和less1 greater less 他在头文件里面 greater 和 less 都重载了操作符定义如下 TEMPLATESTRU publicbinary function functorforop booloperator const Ty amp Left const Ty

    2025年10月22日
    3
  • 软件测试外包_为什么不能去外包公司

    软件测试外包_为什么不能去外包公司【随笔】测试外包的正确打开方式

    2022年4月21日
    55
  • Python中通过PyPDF2实现PDF拆分「建议收藏」

    Python中通过PyPDF2实现PDF拆分「建议收藏」场景PyPDF2是一个纯pythonPDF库,能够分割、合并、裁剪和转换PDF文件的页面。它还可以向PDF文件中添加自定义数据、查看选项和密码。它可以从PDF检索文本和元数据,还可以将整个文件合并在一起。PyPDF21.26.0文档:https://pythonhosted.org/PyPDF2/实现使用pip安装pypddf2新建merged.pdf有两页…

    2022年6月23日
    33

发表回复

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

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