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


相关推荐

  • ★ Android基础篇 初步NDK开发 .SO文件生成与JIN调用

    ★ Android基础篇 初步NDK开发 .SO文件生成与JIN调用

    2021年3月12日
    186
  • idea2021.5.4激活码[在线序列号]「建议收藏」

    idea2021.5.4激活码[在线序列号],https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    42
  • drone无人机应用_drone无人机教程视频

    drone无人机应用_drone无人机教程视频目录文章目录目录摘要1.增加姿态信息界面2.在activity中显示更新姿态数据摘要本节主要记录打造自己的HelloDrone无人机APP过程《2》—如何获取并且显示姿态信息。1.增加姿态信息界面<?xmlversion=”1.0″encoding=”utf-8″?><ScrollViewxmlns:android=”http://schemas.android.com/apk/res/android”xmlns:tools=”http://schemas.

    2022年8月15日
    6
  • 【LDC1314】金属传感器(电感传感器)的调试技巧

    【LDC1314】金属传感器(电感传感器)的调试技巧调试使用的LDC1314传感器板和感应线圈是笔者根据TI官方手册设计的本文允许转载,转载须得到本人授权,并在文章顶部注明本博文地址我所使用的LDC1314传感器板和感应线圈下面开始介绍调试的步骤这次调试的标准是按照2016年江苏省大学生电子设计竞赛的寻铁丝小车的题目要求为准的。要求能够检测出细铁丝接近和硬币靠近产生的数值变化,笔者没有参加比赛,但是听…

    2022年6月7日
    32
  • vue和layUi对比

    vue和layUi对比vue和layUi对比vue(angular,react)这些框架会负责数据和视图的绑定,数据变了,视图自动更新,视图发生事件,也会更新数据,很省事。layui(bootstrap,extjs)这类库,感觉不是框架,而是组件库,会提供一些组件(比如表格,树),只提供外观和行为,不提供和数据的绑定,数据变了,你负责刷新;视图变了,你自己获取数据。vue的界面库elementui和layui都是组件库,区别就是数据和视图是不是关联的。layui其实更偏向与后端开发人员使用,在服务端页面上有非常好的效果

    2022年6月25日
    162
  • linux 命令行 查找文件_grep命令查找文件

    linux 命令行 查找文件_grep命令查找文件一grep:查看文件内容,在文件中查询一个关键字,即搜索字符串的命令(在指定的文件中搜索符合条件的字符串)grep是包含匹配,不是完全的精确匹配,特别适合查找内容语法:grep[-option]需要搜索的关键字文件名参数:-n—-连行号一起显示-c—-统计有几行-i—-忽略大小写(一般用的少)-v—-排除指定的字符串(了解),取反,查找出来的内容是搜索条件以外的所有的内容例如:[root@localhostTEST~]#grep-n

    2022年8月24日
    4

发表回复

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

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