vue中使用qrcode生成二维码

下载qrcode插件

 npm install qrcodejs2 --save

单文件引入使用

import QRCode from ‘qrcodejs2’

使用

<template><div style="margin-left:200px"><div><button @click="getapp">生成二维码</button></div><div id="qrcode"></div></div>
</template><script>
import QRCode from 'qrcodejs2'
export default {name: "Login",data() {return {};},methods: {getapp(){// new QRCode(document.getElementById('qrcode'), 'your content');var qrcode = new QRCode('qrcode', {text: 'https:/xxx.xxx.xxx/code.html?uid=111&updateCodeNumber=111',width: 100,height: 100,colorDark : '#000000',colorLight : '#ffffff',correctLevel : QRCode.CorrectLevel.H});}},
};
</script>

文档：QRCode.js 生成二维码 - 前端开发仓库

new QRCode(element, option)

参数说明

名称	默认值	说明
element		显示二维码的元素或该元素的 ID
option		参数配置

options参数说明

名称	默认值	说明
width	256	图像宽度
height	256	图像高度
typeNumber	4
colorDark	"#000000"	前景色
colorLight	"#ffffff"	背景色
correctLevel	QRCode.CorrectLevel.L	容错级别，可设置为： QRCode.CorrectLevel.L（最大 7% 的错误能够被纠正） QRCode.CorrectLevel.M（最大 15% 的错误能够被纠正） QRCode.CorrectLevel.Q（最大 25% 的错误能够被纠正）

API接口

名称	说明
makeCode(text)	设置二维码内容
clear()	清除二维码（仅在不支持 Canvas 的浏览器下有效）

vue中使用qrcode生成二维码相关推荐

vue中使用qrcode生成二维码并实现打印功能
问题产生背景: 客户要求根据表格中选中的数据产生对应的二维码并可以利用打印机打印出来必要条件:vue.需要安装qrcode和vue-print-nb依赖(具体安装可自行百度) 实现思路: 当用户勾选 ...
vue中使用qrcode 生成二维码
一安装qrcode.js npm install --save qrcode 二. 封装生成二维码的组件 index.vue <template><div class=" ...
vue 中生成带logo的二维码vue-qr(可换背景) 利用qrcode生成二维码
vue 中生成带logo的二维码这里运用了一个插件 vue-qr npm install vue-qr --save <template><div><vue-qr :c ...
vue项目中图片地址生成二维码
前言一.图片地址生成二维码二.使用步骤 1.安装插件 2.执行方法(点击图片之后,弹框显示并且显示二维码) 总结前言 vue中点击图片生成二维码,利用的是qrcode插件,在需要使用的页面中引入 ...
vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...
vue+element+qrcode 生成二维码
今天做项目遇到了一个需求,就是管理后台生成签到的二维码,app端扫码获取培训班.班级.课程等等,然后就想到了qrcode. vue项目使用qrcodejs2生成二维码 1,导入第三方插件 npm in ...
C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
php使用Qrcode生成二维码
php使用Qrcode生成二维码首先检查php.ini Gd 库要打开 use QrCode; //控制器引用public function index(){include 'phpqrcode.p ...
qrcode 生成二维码，带logo 带文字描述
qrcode 生成二维码 1.引入 pom.xml 2. ResourceRenderer 3. QRCodeUtil 4. QRCodeController 5. HTML 6. 测试 1.引入 p ...

vue中使用qrcode生成二维码

vue中使用qrcode生成二维码相关推荐

最新文章

热门文章