广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中使用vue-qriously插件生成二维码
  • 427
分享到

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

2024-04-02 19:04:59 427人浏览 独家记忆
摘要

需求:项目中需要把链接地址生成二维码,用户扫描二维码就可以打开页面实现如下:使用了Vue-qriously插件使用步骤: 安装 npm install 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生成二维码插件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue中使用vue-qriously插件生成二维码

本文链接: https://www.lsjlt.com/news/145912.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中使用vue-qriously插件生成二维码
    需求:项目中需要把链接地址生成二维码,用户扫描二维码就可以打开页面实现如下:使用了vue-qriously插件使用步骤: 安装 npm install vue-qriously --...
    99+
    2022-11-13
  • Vue使用vue-qr生成二维码的方法是什么
    本篇内容主要讲解“Vue使用vue-qr生成二维码的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue使用vue-qr生成二维码的方法是什么”吧!“二维码”的英文是“QR Code”...
    99+
    2023-06-22
  • 深入了解Vue使用vue-qr生成二维码的方法
    目录npm下载步骤(1)导入(2)vue-qr参数 示例总结 “二维码”的英文是“QR Code”,“QR”是“Quick Response”的缩写,反映出这种二维码具有“超高速识读...
    99+
    2022-11-12
  • Vue实现生成二维码的简单方式
    目录前言①首先创建一个vue项目②引入qrcodejs2③封装组件1. 创建Vue文件2. 定义template模板3. 引入QRCode包4. 进行封装5. less控制样式④启动...
    99+
    2023-01-05
    前端vue生成二维码 vue生成二维码样式 vue生成二维码样式
  • ThinkPHP5使用phpqrcode生成二维码
    生成指定跳转地址二维码图片: 首先将下载好的phpqrcode.php文件放到指定目录内(我这里用的放在public/phpqrcode目录下),准备调用 之后控制器中调用 public fu...
    99+
    2023-10-27
    php
  • vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的简单示例
    目录1.条形码插件jsbarcode2.二维码插件总结1.条形码插件jsbarcode 安装:npm install jsbarcode --save 引入:在需要生成条形码的页面引...
    99+
    2022-12-27
    Vue生成二维码 vue 生成条形码 vue qrcode生成二维码
  • canvas中二维码邀请函生成插件的示例分析
    这篇文章将为大家详细讲解有关canvas中二维码邀请函生成插件的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:我看见效果后第一反映就是,肯定canvas进...
    99+
    2022-10-19
  • 如何使用PHP生成二维码?
    二维码是现代社会信息传播中不可或缺的一种方式,它将复杂的信息通过图形化的形式直观地展现给人们。在网站开发、移动应用开发中,我们经常会用到二维码生成和识别的技术来方便用户获取信息。PHP作为一种流行的后端编程语言,也提供了方便的二维码生成和识...
    99+
    2023-05-21
    二维码 PHP 生成
  • 如何使用Java生成二维码
    如何使用Java生成二维码?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表,实现了面向对象理...
    99+
    2023-06-14
  • 如何使用 Python 生成二维码?
    随着移动设备的普及,二维码已经成为了一种非常方便的信息传递方式。在本文中,我们将介绍如何使用 Python 生成二维码。 Python 是一种非常流行的编程语言,它有着强大的功能和广泛的应用场景。使用 Python 生成二维码非常简单,只...
    99+
    2023-08-27
    二维码 bash npm
  • 如何使用nodejs生成二维码
    这篇文章主要讲解了“如何使用nodejs生成二维码”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用nodejs生成二维码”吧!效果展示详细代码生成二维码:const qrCo...
    99+
    2023-07-04
  • PHP 中如何使用二维码生成 API?
    二维码已经成为现代生活中不可或缺的一部分,而在 PHP 中使用二维码生成 API 可以让我们轻松地生成二维码。本文将介绍 PHP 中如何使用二维码生成 API,并提供一些示例代码。 安装和引入 QRCode 类 首先,我们需要安装和引...
    99+
    2023-08-27
    二维码 npm api
  • Python如何使用文件接口生成二维码?
    Python是一种高级编程语言,因其简单易学和强大的功能而被广泛使用。其中,Python的文件接口是非常强大的,可以用来处理各种文件类型,包括生成二维码。 在本文中,我们将介绍如何使用Python文件接口生成二维码。我们将首先介绍二维码的基...
    99+
    2023-10-09
    文件 接口 二维码
  • 如何在ASP文件中使用数组生成二维码?
    在现代互联网应用中,二维码已经成为了一种非常流行的数据格式。它们可以用于识别产品、链接到网站、分享社交媒体和更多其他用途。如果你是一个ASP开发人员,你可能想知道如何在ASP文件中使用数组生成二维码。在本文中,我们将详细介绍如何使用ASP中...
    99+
    2023-09-09
    文件 数组 二维码
  • 如何在Java中使用二维码API生成高质量的二维码?
    随着二维码的广泛应用,越来越多的开发人员需要在自己的应用程序中生成二维码。Java作为一种流行的编程语言,提供了多种生成二维码的API。在本文中,我们将介绍如何使用Java中的二维码API生成高质量的二维码。 一、了解二维码 二维码是一种...
    99+
    2023-06-29
    二维码 api numpy
  • 使用 NPM 包轻松生成二维码
    二维码已经成为了现代生活中不可或缺的一部分。在移动支付、活动票务、商品销售等各种场合中,我们都可以看到二维码的身影。如果你需要在自己的网站或 App 中使用二维码,那么本文将介绍的方法。 NPM(Node Package Manager)...
    99+
    2023-08-27
    二维码 bash npm
  • PHP中如何使用路径生成二维码?
    二维码作为一种新型的信息传递方式,被广泛应用于各行各业中。在网站开发中,我们经常需要将某个链接或者信息以二维码的形式展示给用户,这时候就需要用到PHP中的二维码生成库。 本文将介绍如何使用路径生成二维码。我们将使用PHP QR Code这...
    99+
    2023-09-18
    path 二维码 索引
  • PHP中如何使用对象生成二维码?
    随着二维码技术的发展,越来越多的应用场景需要使用二维码。在PHP中,我们可以通过使用一些开源的库来生成二维码。本文将介绍如何使用对象生成二维码,并且将穿插一些演示代码。 安装库 首先,我们需要安装一个PHP二维码生成库。这里我们选择z...
    99+
    2023-07-08
    二维码 开发技术 对象
  • vue生成二维码QR Code的简单实现方法示例
    目录qrcodejs2vue-qrqrcodejs2 下载qrcodejs2 cnpm i -S qrcodejs2 使用 <template> <span...
    99+
    2022-11-13
  • vue部署后不生成二维码的三种解决方案
    当我们在Vue项目中引用某些第三方库或插件时,有时可能会遇到部署后不生成二维码的问题。这个问题可能会带给我们很大的麻烦和困扰,因为二维码在现在的移动互联网时代已经成为了一种方便快捷的信息传递方式。那么,为什么在Vue项目部署后会出现不生成二...
    99+
    2023-05-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作