Vue——前端生成二维码的示例

　　与后端生成二维码相比，前端生成二维码更具有灵活性，下面就介绍两种前端生成二维码的方式，两种方式相比之下，vue-qr比qrcode多了一个再中间添加logo的功能。

方式一：qrcode

  • npm
npm install --save qrcodejs2
  • import
import QRCode from 'qrcodejs2'
  • 使用
<div class="qrcode" ref="qrCodeUrl"></div>
 
<script>
methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'xxxx', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
},
mounted() {
    this.creatQrCode();
},
</script>
  • 样式（这里再提供一个给二维码添加边框的小技巧：如下图所示，我们生成的二维码是没有边框的，看起来不是很好看）　

就有了下面的效果：

方式二：vue-qr

  • npm
npm install vue-qr --save
  • import
import vueQr from 'vue-qr'
  • 使用
// logoSrc为logo的url地址(使用require的方式)；text为需要转换为二维码的内容
<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
 
<script>
    export default {
        name: "qecode",
        data() {
            return {
                imageUrl: require("../assets/logo.png"),
            }
        },
        components: {
            vueQr
        },
    },
}
</script>

以上就是Vue——前端生成二维码的示例的详细内容，更多关于vue 前端生成二维码的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue中实现动态生成二维码的方法

    最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下: 1.引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 2.引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.qrCode 3.

  • vue 二维码长按保存和复制内容操作

    效果图: 二维码用了 qrcode.vue npm install qrcode.vue --save 复制内容用了 vue-clipboard2 npm install vue-clipboard2 --save 1.二维码保存功能: <div class="qrcode"> <qrcode-vue :size="qrcodeSize" :value="shareUrl" id="picture" >

  • Vue实现手机扫描二维码预览页面效果

    本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码,供大家参考,具体内容如下 背景:vue-cli3 + ant-design-vue 搭建的后台管理系统 需求:实现扫描二维码即可在手机预览H5页面功能 使用插件:qrcode step1:安装插件 npm install qrcode --save step2:引入插件 在项目中新建QRcode.vue文件 <template> <div id="qrCode"> <div id="

  • Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    这几天做个了项.就是微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法. 问题 机型:iphone 7p 这里的二维码是一张图片,微信返回的图片,具体下图 然后是正常情况下.当我们开始扫码的时,应该是这个样子 这个是正常的,但是在苹果端的时候就懵了,下面的菜单就只有一个保存图片.那么如何解决呢,请看下面. 解决方案 解决方案其实有两种. 使用 qrcodeJs 就

  • 在Vue中用canvas实现二维码和图片合成海报的方法

    在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载 简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报 1. 设置相应比例 一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用canvas生成,在此不多赘述 import posterBgImg from '../public/images/poster_bg.png';// 海报底图 import qrcodeImg from '../public/images/qr

  • springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）

    1. 什么是支付宝接口(沙箱环境)? 记录时间:2020年10月15日3:55 现如今,手机支付已相当普遍,而作为开发人员应该对手机支付操作有所了解.而支付宝接口是支付宝提供的一个接口,用来对接软件应用程序在进行金钱交易使用.然后对于编程爱好者而言,想学习这一点就有点难,因为要想使用支付宝接口,必须前提是使用软件应用程序,软件应用程序需要向支付宝申请,提交一系列资料,这一点是实现不了的.这就对开发者增加了一定的难度,因为产品没有上线,然后需要对接支付宝接口就是很大的问题,所以出现了沙箱环境,具有

  • Vue——前端生成二维码的示例

    Vue——前端生成二维码的示例

    与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm npm install --save qrcodejs2 import import QRCode from 'qrcodejs2' 使用 <div class="qrcode" ref="qrCodeUrl"></div>   <script

  • java使用jar包生成二维码的示例代码

    使用java进行二维码的生成与读取使用到了谷歌的zxing.jar 第一步 导入,maven依赖或者下载指定jar包 <!-- https://mvnrepository.com/artifact/com.google.zxing/javase --> <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version

  • c# 生成二维码的示例

    c# 生成二维码的示例

    二维码是越来越流行了,很多地方都有可能是使用到.如果是静态的二维码还是比较好处理的,通过在线工具就可以直接生成一张二维码图片,比如:草料二维码.但有的时候是需要动态生成的(根据动态数据生成),这个使用在线就工具就无法实现了.最好是能在代码中直接生成一个二维码图片,这里我就介绍下使用QRCoder类库在代码中生成二维码. 网上生成二维码的组件还是挺多的,但是真正好用且快速的却不多.QRCoder就是我在众多中找到的,它的生成速度快.而且使用也相当方便. 开始编码 1.安装 QRCoder组件.在项

  • js生成二维码的示例代码

    js生成二维码的示例代码

    前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js 插件. 插件链接: qrcode.js下载地址,点击即可下载 一.一个简单的示例 如下:(仅供参考) <%-- Created by IntelliJ IDEA. User: ASUS author:xumz Date: 2021/2/27 Time: 10:33 搬运请备注 To change this template use File | Settings | File

  • PHP实现生成二维码的示例代码

    目录 前言 1.目前有2种类型的二维码 2.用户扫描带场景值二维码时,可能推送以下两种事件 3.创建二维码ticket 4.临时二维码请求说明 5.永久二维码请求说明 6.临时二维码和永久二维码生成实现的代码 前言 为了满足用户渠道推广分析和用户账号绑定等场景的需要,公众平台提供了生成带参数二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送. 1.目前有2种类型的二维码 临时二维码,是有过期时间的,最长可以设置为在二维码生成后的30天(即2592000

  • jquery.qrcode在线生成二维码使用示例

    最近在做一个二维码的项目,所以在随便看的时候发现这个感觉挺不错的.jquery除了它自己非常出色的js功能之外还附带有数不清的插件,可以完成各种美好的效果和功能.jquery.qrcode就是其中一个,用来在线生成二维码. qrcode插件在github上开源的地址在https://github.com/jeromeetienne/jquery-qrcode 它的后面附带有使用说明,只有简单的四步,非常方便的调用. 插件是外国人写的,所以在开始使用的时候不能识别中文内容的二维码,因为jquery

  • php使用qr生成二维码的示例分享

    复制代码 代码如下: <?php  ini_set('display_errors', 'on');  $PNG_TEMP_DIR = dirname(__FILE__).DIRECTORY_SEPARATOR.'temp'.DIRECTORY_SEPARATOR;  $PNG_WEB_DIR = 'temp/'; include "qrlib.php";    // QRcode lib $data = 'http://www.jb51.net'; // data  $ecc

  • JavaScript生成二维码图片小结

    JavaScript生成二维码图片小结

    摘要: 百度百科上是这样介绍二维码的:二维码(Quick Response Code),又称二维条码,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙.在现代商业活动中,可实现的应用十分广泛,如:产品防伪/溯源.广告推送.网站链接.数据下载.商品交易.定位/导航.电子商务应用.车辆管理.信息传递等.如今智能手机扫一扫(简称313)功能的应用使得二维码更加普遍,随着国内物联网产业的蓬勃发展,更多的二维码技术应用解决方案被开发,二维码成为移动互联网入口

  • vue生成二维码QR Code的简单实现方法示例

    vue生成二维码QR Code的简单实现方法示例

    目录 qrcodejs2 vue-qr qrcodejs2 下载qrcodejs2 cnpm i -S qrcodejs2 使用 <template> <span ref="qrCodeUrl"></span> </template> <script> import QRCode from "qrcodejs2"; export default { data() { return {}; }, mounte

随机推荐