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. crontab 选择编辑器 select-editor

    用root第一次运行 crontab -e 会出现如题的错误,解决方法如下: 1.select-editor 选择编辑器,我选的vim.basic. 2.crontab -e 进入编辑器编辑. 推荐第 ...

  2. [转] 一个小时学会Git

    一个小时学会Git http://www.cnblogs.com/best/p/7474442.html

  3. 34对MyBatis的博客的整理心得

    对本博客的mybatis重新读一下,做一个整理.如下: 1:为什么会有mybatis,因为原生的jdbc方式有很大问题: (1)数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁连接开启和关闭 ...

  4. dubbo+spring_maven 遇到的问题 Error creating bean with name '***': Instantiation of bean failed;

    Exception in thread "main" org.springframework.beans.factory.BeanCreationException: Error ...

  5. SSH配置struts校验发生No result defined for action actions.AdminLoginAction and result input

    配置struts校验发生No result defined for action actions.AdminLoginAction and result input,但是登录,success.jsp, ...

  6. javap的使用

    今天听的分享里在介绍String时,提到了javap,学习了好久的java,但是好像从来没有了解过这个工具. javap是JDK提供的一个命令行工具,javap能对给定的class文件提供的字节代码进 ...

  7. mysql主从复制-方案2

    MySQL主从介绍 (两台机器数据同步) 主:-->binlog 从:-->relaylog 主上有一个log dump线程,用来和从的I/O线程传递binlog 从上有两个线程,其中I/ ...

  8. 23命令模式Command

    一.什么是命令模式 Command模式也叫命令模式 ,是行为设计模 式的一种.Command模式通过被称为 Command的类封装了对目标对象的调用行为以及调用参数. 二.命令模式的应用场景 在面向对 ...

  9. 转:The Difference Between a LayoutTransform and a RenderTransform

    来自:http://www.tuicool.com/articles/fIfm22 #770 – The Difference Between a LayoutTransform and a Rend ...

  10. js多个(N)个数组的的元素组合排序算法,多维数组的排列组合或多个数组之间的排列组合

    现在有一批手机,其中颜色有['白色','黑色','金色','粉红色']:内存大小有['16G','32G','64G','128G'],版本有['移动','联通','电信'],要求写一个算法,实现[[ ...