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)
上一篇 2026年4月17日 下午4:01
下一篇 2026年4月17日 下午4:07


相关推荐

  • 在 Windows10 系统下安装 Ubuntu22.04 系统

    在 Windows10 系统下安装 Ubuntu22.04 系统在Windows10系统下安装Ubuntu22.04系统

    2022年10月9日
    4
  • 新手必学,如何制作支持GPT分区表的Windows安装U盘

    新手必学,如何制作支持GPT分区表的Windows安装U盘

    2026年3月13日
    2
  • Python基础——零基础学Python

    Python基础——零基础学Python在这里插入图片描述一 Python 语言家族 1Introductio 1Python 简介 Python 是一个高层次的结合了解释性 编译性 互动性和面向对象的脚本语言 简单来说 Python 是一门编程语言 帮助我们更好的与计算机沟通 功能全面 易学易用 可拓展语言 所以说 人生苦短 我学 Python Python 的设计具有很强的可读性 相比其他语言经常使用英文关键字 其他语言的一些标点符号 它具有比其他语言更有特色语法结构 Python 是一种解释型高级语言 这意味着开发过程中没有

    2026年3月26日
    1
  • Ubuntu 安装 gcc-4.9.3-64-gnu

    Ubuntu 安装 gcc-4.9.3-64-gnu可能每个人的环境不一样,所以安装的方法有些许差别。我参考了多个网络上的教程,在自己的ubuntu虚拟机中安装了gcc-4.9.3-64-gnu,记录一下自己的安装过程。虚拟机中默认安装了gcc-5.4.0,我要安装gcc-4.9.3一、下载地址:wgethttp://ftp.tsukuba.wide.ad.jp/software/gcc/releases/gcc-4.9.3/gcc-4.9.3.tar.bz2由于是用的虚拟机,配置不是很高,自己是windows下载完毕拷贝进虚拟机中。gcc-gn

    2022年7月24日
    17
  • SplitContainer控件设置固定比例

    SplitContainer控件设置固定比例SplitContainer控件2个panel如何设置均等大小.(竖直拆分)先随意设置空间高的大小,然后如果想要均等显示,则直接设置SplitterDistance为高的一半,即可!随后任意改变控件大小,都不会改变均等显示比例。同理3:7,4:6…

    2022年7月18日
    15
  • 【强化学习纲要】8 模仿学习「建议收藏」

    【强化学习纲要】8 模仿学习「建议收藏」【强化学习纲要】8模仿学习8.1模仿学习概要8.2BehavioralcloningandDAGGER8.3InverseRLandGAIL8.4进一步改进模仿学习的模型8.5模仿学习和强化学习结合8.6Casestudies周博磊《强化学习纲要》学习笔记课程资料参见:https://github.com/zhoubolei/introRL.教材:SuttonandBarton《ReinforcementLearning:AnIntroduction》8.1

    2026年1月22日
    5

发表回复

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

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