vue使用qrcodejs2生成二维码

目录

概要

构建展示的vue组件qrcode.vue

组件的使用


概要

项目中用到需要展示二维码的样式,想到了qrcode

例如:

前提:安装包

npm install qrcodejs2 --save

构建展示的vue组件qrcode.vue

<template><div style="width: 100%;height: 100%;" :id="id" :ref="id"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {data() {return {qrcode: ''}},props: {id: {type: String,required: true},text: {  // 后端返回的二维码地址type: String,default: 'M000001'},width: {type: String,default: '100'},height: {type: String,default: '100'},colorDark: {type: String,default: '#000000'},colorLight: {type: String,default: '#ffffff'}},watch: {text(newText) {this.createQrcode()}},mounted() {this.createQrcode()},methods: {createQrcode() {if(this.qrcode) {  // 有新的二维码地址了,先把之前的清除掉this.$refs[this.id].innerHTML = ''}this.qrcode = new QRCode(this.$refs[this.id], {text: this.text, //页面地址 ,如果页面需要参数传递请注意哈希模式#width: this.width, // 二维码宽度 (不支持100%)height: this.height, // 二维码高度 (不支持100%)colorDark: this.colorDark,colorLight: this.colorLight,correctLevel: QRCode.CorrectLevel.H,})},// 制作另一个二维码updateCode() {this.qrcode.makeCode("http://naver.com")}}
}
</script>

组件的使用

<template><div>/***item为二维码的内容*colorDark为前景色*/<QrCode :id="'QrCode'" :text="item" colorDark="#802126"/></div></template>
<script>
import QrCode from '../../components/QRcode/qrCode.vue'  // 引用上面封装的二维码组件
export default {
components: { QrCode },//注册组件}</script>

小结

这个组件还是相当好用的,多多推荐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61034.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何用Python爬虫持续监控商品价格

目录 持续监控商品价格步骤 1. 选择合适的爬虫库&#xff1a; 2. 选择目标网站&#xff1a; 3. 编写爬虫代码&#xff1a; 4. 设定监控频率&#xff1a; 5. 存储和展示数据&#xff1a; 6. 设置报警机制&#xff1a; 7. 异常处理和稳定性考虑&#xff1a; 可能会遇到的…

Uniapp笔记(三)uniapp语法2

一、本节项目预备知识 1、组件生命周期 1.1、什么是生命周期 生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段&#xff0c;强调的是一个时间段 我们可以把每个uniapp应用运行的过程&#xff0c;也概括为生命周期 小程序的启动&#xff0c;表示生命周…

2781. 最长合法子字符串的长度

2781. 最长合法子字符串的长度 C代码&#xff1a;滑动窗口、哈希表 typedef struct{char* str;UT_hash_handle hh; } HashTable;HashTable* head;void AddToHash(char* str) {HashTable* out (HashTable*)malloc(sizeof(HashTable));out->str str;HASH_ADD_STR(head, str…

ThinkPHP 文件上传 fileSystem 扩展的使用

ThinkPHP 文件上传 ThinkPHP 文件上传 扩展 filesystem一、安装 FileSystem 扩展二、认识 filesystem 配置文件 config/filesystem.php三、上传验证&#xff08;涉及到验证器的知识点&#xff09;四、文件上传demo ThinkPHP 文件上传 扩展 filesystem ThinkPHP 为我们 提供了 …

【前端】JQ实时显示当前日期、时间、星期

效果图 html <span id"time"></span> JS // 实时显示当前时间 $(document).ready(function () {function showTime() {var today new Date;var y today.getFullYear();var M today.getMonth() 1;var d today.getDate();var w today.getDay();va…

计算机行业前景展望

计算机行业的前景展望是非常广阔的。随着技术的快速发展和应用领域的不断拓展&#xff0c;计算机行业将继续扮演着重要的角色。以下是一些计算机行业前景的关键方面&#xff1a; 人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;&#xff1a;AI和ML技术…

WPF 数据验证

WPF提供了能与数据绑定系统紧密协作的验证功能。提供了两种方法用于捕获非法值&#xff1a; 1、可在数据对象中引发错误。 可以在设置属性时抛出异常&#xff0c;通常WPF会忽略所有在设置属性时抛出的异常&#xff0c;但可以进行配置&#xff0c;从而显示更有帮助的可视化指示…

Android 音频框架 基于android 12

文章目录 前言音频服务audioserver音频数据链路hal 提供什么样的作用 前言 Android 的音频是一个相当复杂的部分。从应用到框架、hal、kernel、最后到硬件&#xff0c;每个部分的知识点都相当的多。而android 这部分代码在版本之间改动很大、其中充斥着各种workaround的处理&a…

解释 Git 的基本概念和使用方式。

Git是一个版本控制工具&#xff0c;可以追踪文件的修改历史和不同版本&#xff0c;以便于团队合作和项目的管理。 下面是Git的一些基本概念和使用方式&#xff1a; 仓库&#xff08;Repository&#xff09;&#xff1a;Git中存储代码的地方&#xff0c;包含了代码的历史记录和…

《论文阅读18》JoKDNet

一、论文 研究领域&#xff1a;用于大尺度室外TLS点云配准的联合关键点检测和特征表达网络论文&#xff1a;JoKDNet: A joint keypoint detection and description network for large-scale outdoor TLS point clouds registration International Journal of Applied Earth Ob…

docker-compose安装node-exporter, prometheus, grafana

基础 exporter提供监控数据 prometheus拉取监控数据 grafana可视化监控数据 准备 全部操作在/root/mypromethus中执行 node_exporter docker-compose -f node-exporter.yaml up -d # web访问&#xff0c;查看node_exporter采集到的数据 http://192.168.1.102:9101/metrics…

Delphi 11.3 FMX 多设备平台中使用 TGrid 实现类似 TDBGrid 的效果

Delphi Firemonkey 中 TDBGrid 这个控件已经没有了。如何实现类似这个效果呢。其实可以用TGrid 来实现。以下用 11.3 来讲解。 查询里面用到的 connection 和 query 等控件那些一般的数据库用法&#xff0c;就不做过多描述了。请参考其他资料。 方法一.通过界面配置来实现 在…

Codeforces Round 888 (Div. 3)

Codeforces Round 888 (Div. 3) A. Escalator Conversations 思路&#xff1a;暴力枚举 我们可以发现要让他们能相同高度首先你们之间的差值必须是k的倍数并且这个倍数必须小于m并且不能存在相同高度 #include<bits/stdc.h> using namespace std; #define int long lo…

js vue 鼠标悬停

let hoverTimeOut nullitem.on("mouseover", async (e) > {if (hoverTimeOutnull) {hoverTimeOut setTimeout(() > {hoverTimeOut null;//业务逻辑messageBase(info.code, position);}, 1000); }});item.on("mouseout", (e) > {console.log(离开…

unity 物体至视图中心以及新对象创建位置

如果游戏对象不在视野中心或在视野之外&#xff0c; 一种方法是双击Hierarchy中的对象名称 另一种是选中后按F 新建物体时对象的位置不是在坐标原点&#xff0c;而是在当前屏幕的中心

将 Llama2 中文模型接入 FastGPT,再将 FastGPT 接入任意 GPT 套壳应用,真刺激!

FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01; Llama2 是Facebook 母公司 Meta 发布的开源可商用大模型&#xff0c;国内的…

深度学习(前馈神经网络)知识点总结

用于个人知识点回顾&#xff0c;非详细教程 1.梯度下降 前向传播 特征输入—>线性函数—>激活函数—>输出 反向传播 根据损失函数反向传播&#xff0c;计算梯度更新参数 2.激活函数(activate function) 什么是激活函数&#xff1f; 在神经网络前向传播中&#x…

3D风速仪 Gill Instruments Limited_R3-50 R3-100 and R3A -100 Manual

R3测量超声波脉冲从上部换能器到相反的下部换能器所花费的时间&#xff0c;并将其与脉冲从下部换能器到上部换能器的时间进行比较。 同样&#xff0c;在其他上下换能器之间比较时间。 如图1所示&#xff0c;每对换能器之间沿轴的空气速度可以从每条轴上的飞行次数计算出来。 …

django的简易的图书管理系统jsp书店进销存源代码MySQL

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 django的简易的图书管理系统 系统有1权限&#xff1a…

【LeetCode-中等题】148. 排序链表

文章目录 题目方法一&#xff1a;集合排序&#xff08;核心是内部的排序&#xff09;方法二&#xff1a; 优先队列&#xff08;核心也是内部的排序&#xff09;方法三&#xff1a;归并排序&#xff08;带递归&#xff09; 从上往下方法四&#xff1a;归并排序&#xff08;省去递…