当前位置: 首页 > article >正文

生成二维码vue2

1、下载插件

 npm install vue-qr --save

2、引入插件在页面上

import vueQr from "vue-qr"

3、声明生成二维码的方法

creatQrCode() {
  var qrcode = new QRCode(this.$refs.qrCodeUrl, {
         text: "https://blog.csdn.net/Tresson_A?spm=1000.2115.3001.5343", // 需要转换为二维码的内容
         width: 100,
         height: 100,
         colorDark: "#000000",
         colorLight: "#ffffff",
         correctLevel: QRCode.CorrectLevel.H,
    });
},

4、在页面初始化时就调用该方法 

5、页面使用

<div>
	<div class="qrcode" ref="qrCodeUrl"></div>
    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/Tresson_A?spm=1000.2115.3001.5343" :size="200"></vue-qr>
</div>

6、imagesUrl变量需要再data中定义并且给二维码中间的图片复制


http://www.kler.cn/a/414997.html

相关文章:

  • vue3+elPlus 选择框select 下拉数据过千条,页面卡顿,分页解决
  • 命令行使用ssh隧道连接远程mysql
  • Perplexica - AI 驱动的搜索引擎
  • Mac安装及合规无限使用Beyond Compare
  • UWB数字钥匙安全测距和场景应用
  • 如何正确使用 GitHub API 获取特定版本信息:详解错误排查与解决方案
  • java全栈day10--后端Web基础(基础知识)之续集
  • 贵阳思普信息技术有限公司 OA系统 apilogin 接口存在SQL注入漏洞风险
  • 如何利用Java爬虫按关键字搜索工厂数据
  • JVM的内存区域划分
  • 【前端知识】SCSS(Sassy CSS)是一种CSS预处理器语言
  • 《Learn Three.js》学习(2)构建Three.js基本组件
  • 专业学习|如何绘制算法流程图?
  • 华为E9000刀箱(HWE9000V2)服务器硬件监控指标解读
  • http的文件上传和下载原理
  • 什么是C++中的函数对象?
  • 【二分查找】力扣 34. 在排序数组中查找元素的第一个和最后一个位置
  • 鸿蒙多线程应用-taskPool
  • spark3.x之后时间格式数据偶发报错org.apache.spark.SparkUpgradeException
  • Linux中网络文件系统nfs使用
  • S4 UPA of AA :新资产会计概览
  • 如何使用PHP爬虫获取店铺详情:一篇详尽指南
  • 初识 Django
  • 2024第六次随堂测验参考答案
  • leetcode 208. 实现 Trie (前缀树)
  • pico-sdk(八)-程序架构之自定义预处理变量