vue中使用vue-qriously插件生成二维码

需求：项目中需要把链接地址生成二维码，用户扫描二维码就可以打开页面
实现如下：使用了vue-qriously插件
使用步骤：

安装

npm install vue-qriously --save-dev

main.js入口文件中引入

import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

在vue文件中使用

<template>
    <qriously :value="baseUrl" :size="138"/>     <!-- initQCode: 是你在你的vue实例中定义好的变量   size:是这个Canvas的大小，这里要根据设计图大小来决定-->
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
               baseUrl: '自定义的值'
            }
        }
    }
</script>
<style lang="less">
    /*样式*/
</style>

我在项目中如下布局：

<div class="share_pop_two">
                <div>
                  <qriously :value="baseUrl" :size="140" />
                </div>
              </div>

项目中样式如下设置

.share_pop_two {
        width: 150px;
        height: 150px;
        text-align: center;
        margin: 0 auto;
        margin-top: 26px;
        div {
          width: auto;
          display: inline-block;
          background: #fff;
          // padding: 0.3rem;
          // height: 10rem;
          box-sizing: content-box;
          outline: 1px solid #fff;
          outline-offset: 5px;
        }
      }

生成的效果如下：

到此这篇关于vue中使用vue-qriously插件生成二维码的文章就介绍到这了,更多相关vue生成二维码插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 深入了解Vue使用vue-qr生成二维码的方法

    深入了解Vue使用vue-qr生成二维码的方法

    目录 npm下载 步骤 (1)导入 (2)vue-qr参数 示例 总结 "二维码"的英文是"QR Code","QR"是"Quick Response"的缩写,反映出这种二维码具有"超高速识读"的特点."Quick Response Code"也就是"快速响应码". npm下载 npm install vue-qr --save 下载成功: 步骤 (1)导入 impo

  • vue实现二维码扫码功能(带样式)

    vue实现二维码扫码功能(带样式)

    需求: 利用vue实现二维码扫描: 插件: QRCodeReader: 插件下载 npm install --save vue-qrcode-reader 注意: 需要在https协议下才可以调用相机,实现扫码. 可以通过配置vue.config.js中的devServer:{https:true} 或参照前文章 前端使用Nuxt框架,配置本地https访问 配置本地证书 <template> <div> <p class="error">{{ er

  • 通过vue方式实现二维码扫码功能

    通过vue方式实现二维码扫码功能

    提示 这个插件只能在https协议下才能访问,http协议不好使,最好用vue2,vue3容易报错!!!!! 描述 通过vue的方式,实现扫码功能 参考文档:vue-qrcode-reader去官网–>官方文档 效果展示 实现步骤: 步骤一(安装插件) npm install --save vue-qrcode-reader 步骤二(创建组件) 因为可能多个页面都会用到,所以弄成了组件 (1)在src下面的components创建qrcode.vue (2)代码实现 // qrcode.vue

  • vue中使用vue-qriously插件生成二维码

    vue中使用vue-qriously插件生成二维码

    需求:项目中需要把链接地址生成二维码,用户扫描二维码就可以打开页面实现如下:使用了vue-qriously插件使用步骤: 安装 npm install vue-qriously --save-dev main.js入口文件中引入 import Vue from 'vue' import VueQriously from 'vue-qriously' Vue.use(VueQriously) 在vue文件中使用 <template> <qriously :value="baseU

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

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

  • VUE微信H5生成二维码海报保存在本地相册的实现

    VUE微信H5生成二维码海报保存在本地相册的实现

    目录 一.效果 二.说明 三.思路 四.效果 五.代码实现 六.遇到的问题 一.效果 二.说明 公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需求是点击按钮,下载海报图到本地相册,然后h5下载的实现原理是生成一个a标签链接,然后下载,在电脑模拟器可以下载,在微信浏览器一点反应没有,所以退一步,长按保存),下面是使用版本,UI插件用的是vant(有赞) vue:“^2.6.11”, “html2canvas”:

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

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

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

  • 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

  • jquery插件qrcode在线生成二维码

    随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维

  • 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

  • 使用jquery.qrcode.js生成二维码插件

    使用jquery.qrcode.js生成二维码插件

    二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render 

  • 使用jquery插件qrcode生成二维码

    二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到获取最新的代码. 如何使用 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text

  • Vue移动端实现调用相机扫描二维码或条形码的全过程

    Vue移动端实现调用相机扫描二维码或条形码的全过程

    目录 一.开发前的准备 二.实现效果图 三.具体操作实现 总结 一.开发前的准备 实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见 概述 | 微信开放文档),或者支付宝 H5 开放的API(详见 支付宝H5开放文档). 但是这两者都会比较麻烦且有一定的局限性,微信的扫一扫只能在微信里用,而且还需要公众号认证等配置操作.支付宝在内置 App 内可以同时识别二维码和条形码,但外部调用的 API 无法一次性同时识别,只能分开识别. 我这里就提供一个直接使用的开源

随机推荐