vue 使用qrcode生成二维码功能

安装插件

npm i --save qrcodejs2

template部分

<template><div class='turnout-wrapper turnin-wrapper'><div class="qrcode-style" id="qrcode"></div></div>
</template>

js部分

如果只需要转换成二维码并展示出来, 可以这么写

import QRCode from "qrcodejs2";
export default {data(){return {address:'',}},mounted(){this.address = this.$route.params.address;this.qrcode();},methods: {qrcode() {let qrcode = new QRCode("qrcode", {width: 120, // 设置宽度，单位像素height: 120, // 设置高度，单位像素text: this.$route.params.address // 设置二维码内容或跳转地址,});},}
}

说明: text存放的是需要转换为二维码的地址,可以是跳转地址, 如 'http://baidu.com' 或者需存放内容, 如"1c6222c248d20d50b302e59aa50aa8560b1794367b"

效果图:

要实现二维码长按保存, 只需要将上面改成下面这样:

import QRCode from "qrcodejs2";
export default {data(){return {address:'',}},mounted(){this.address = this.$route.params.address;this.qrcode();},methods: {qrcode() {let qrcode = new QRCode("qrcode", {width: 120, // 设置宽度，单位像素height: 120, // 设置高度，单位像素// text: this.$route.params.address // 设置二维码内容或跳转地址});qrcode.makeCode(this.$route.params.address);},}
}

说明: 上面代码只在ios系统才有效果, 原因是这样生成的是base64格式的image图片. 查资料发现,安卓系统不支持这种, 需要从后台转一遍,拿到url后填充src.

效果图:

要实现显示logo功能, 可以在二维码里面添加一张img图片存放logo, 在扫描二维码时,不会受影响.

<template><div class='turnout-wrapper turnin-wrapper'><div class="qrcode-style" id="qrcode"><img src='/images/logo.png' /></div></div>
</template>

效果图:

使用 qrcodejs 生成二维码的几个问题

一次 H5 「保存页面为图片」的踩坑之旅

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

vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...
vue 根据链接生成二维码(功能实现)
今天同事问我一个问题,在vue项目中想要根据一个链接显示对应的二维码该怎么实现. 我前一段时间,有用apicloud项目生成二维码的功能,但是vue版本的没有处理过.百度后找到一个可行的方案: 大神实 ...
vue+element+qrcode 生成二维码
今天做项目遇到了一个需求,就是管理后台生成签到的二维码,app端扫码获取培训班.班级.课程等等,然后就想到了qrcode. vue项目使用qrcodejs2生成二维码 1,导入第三方插件 npm in ...
vue引用QrCode生成二维码
需求:后台生成二维码链接和邀请码返回到前台,前台渲染生成二维码 1.安装 npm i qrcode 2.引入 import QRCode from "qrcode"; 3.渲染二维 ...
【功能实现】qrcode生成二维码Demo
[功能实现]qrcode生成二维Demo 功能简介代码实现 html js 效果图功能简介通过qrcode.js生成二维码的简单实现功能,代码很简单,需要在html引入jquery.min.js ...
vue 中生成带logo的二维码vue-qr(可换背景) 利用qrcode生成二维码
vue 中生成带logo的二维码这里运用了一个插件 vue-qr npm install vue-qr --save <template><div><vue-qr :c ...
C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
【在web项目jsp页面自动生成二维码功能】
在web项目jsp页面自动生成二维码功能原文: http://www.cnblogs.com/gczmn/. https://www.jq22.com/jquery-info294/. 先将下面的文 ...
vue+qrcodejs2 动态生成二维码并下载
安装依赖 npm install --save qrcodejs2 vue页面引用 <script>import QRCode from 'qrcodejs2'import axios f ...

vue 使用qrcode生成二维码功能

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

最新文章

热门文章