vue项目开发的时候经常会遇到需要将一个网址链接转化为二维码的需求,方便用户扫描观看,以下就是我在寻找vue二维码生成器的时候踩过的坑。

不能用的二维码生成器
    qrcode
    node-qrcode
    vue-qrcode
    qrcodejs2

建议使用 xkeshi/vue-qrcode,感谢知乎-vue二维码生成器

npm install xkeshi/vue-qrcode --save

组件中使用

<div v-show="qrcodeUrl" class="response">
<qrcode :value="qrcodeUrl" v-if="qrcodeUrl" :options="{ size: 170 }"></qrcode>
<p>请使用支付宝扫码支付</p>
</div>
// script
<script>
import QRcode from '@xkeshi/vue-qrcode'
export default {
name :'',
components::{
qrcode : QRcode
}
}
</script>

vue的二维码生成器的更多相关文章

  1. C#版二维码生成器附皮肤下载

    原文 C#版二维码生成器附皮肤下载 前言 本文所使用的二维码生成代码是谷歌开源的条形码图像处理库完成的,c#版的代码可去https://code.google.com/p/zxing/download ...

  2. jquery二维码生成插件_二维码生成器

    jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar

  3. 标星7000+,这个 Python 艺术二维码生成器厉害了!

    微信二维码,相信大家也并不陌生,为了生成美观的二维码,许多用户都会利用一些二维码生成工具. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手 ...

  4. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  5. VUE 生成二维码(qrcodejs)

    1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...

  6. vue 画二维码

    首先安装一下相关的插件 qrcode2 npm install --save qrcode2 然后在需要画二维码的页面引入一下 import QRCode from 'qrcode2' 最后在meth ...

  7. QR二维码生成器源码(中间可插入小图片)

    二维码终于火了,现在大街小巷大小商品广告上的二维码标签都随处可见,而且大都不是简单的纯二维码,而是中间有个性图标的二维码. 我之前做了一个使用google开源项目zxing实现二维码.一维码编码解码的 ...

  8. C#版二维码生成器

    前言 本文所使用的二维码生成代码是谷歌开源的条形码图像处理库完成的,c#版的代码可去 这里   --  下载压缩包. 截止目前为止最新版本为2.2,提供以下编码格式的支持: UPC-A and UPC ...

  9. python二维码生成器

    周小董简书主页二维码.png   周小董博客主页二维码.png 现在,我们生活中到处可以看到二维码.它有啥好处呢?它具有信息容量大.可靠性高.可表示汉字及图象多种文字信息.保密防伪性强等优点. 我们生 ...

随机推荐

  1. ph 提交代码的步骤;

    ph 提交代码的步骤: git status 查看状态: ls -ah 查看文件: git stash list 查看本地缓存的文件: git branch 查看本地的分支: git checkout ...

  2. ffmpeg安装步骤

    首先要安装各种解码器 1.lame lame-3.99.5.tar.gz Url:http://sourceforge.net/project/showfiles.php?group_id=290&a ...

  3. HTML 09 web 内容与攻击技术

    Servlet 改进 CGI 之前提及的 CGI, 由于每次接到请求, 程序都要跟着启动一次, 因此一旦访问量过大, web 服务器要承担低昂当大的负载, 而 servlet 运行在与 web 服务器 ...

  4. Golang查缺补漏(一)

    Go语言高级编程(Advanced Go Programming) Go语言高级编程(Advanced Go Programming) golang都是传值,与其他语言不同的是数组作为参数时,也是传值 ...

  5. Stack堆栈的数据结构

    1.

  6. 终端命令行编译运行C#程序HelloWorld

    终端命令行编译运行C#程序HelloWorld 今天忽然有人问我,刚学习java程序的时候,一般老师都会建议我们从配置环境变量开始从命令行编译运行程序,那么学习c#的时候基本是直接安装visual s ...

  7. poj3278_kuagnbin带你飞专题一

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 88247   Accepted: 27640 ...

  8. mybatis03--字段名和属性名不一致

    1.修改数据库中的字段 2.运行根据id查询所有的学生信息的测试方法会出现下面的异常 也就是说明 数据库中的字段没有个实体类中的属性名一致 3.修改StudentMapper.xml文件中的列名 4. ...

  9. 清理孤儿文件 clearing up outdated orphans

    pacman -Rns $(pacman -Qtdq) It lists all packages installed as dependencies but no longer required b ...

  10. 关于c++深拷贝与浅拷贝

    首先看一段代码: #include<iostream> #include<cstring> #include<malloc.h> using namespace s ...