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. spring事务的传播机制新解

    以下是事物的传播机制: @Transactional(propagation=Propagation.REQUIRED)如果有事务, 那么加入事务, 没有的话新建一个(默认情况下)@Transacti ...

  2. Linux应该知道的技巧

    https://coolshell.cn/articles/8883.html https://www.quora.com/Linux/What-are-some-time-saving-tips-t ...

  3. Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK - Android

    在Windows7上运行 “cordova build android” 报错,如下: C:\test\hello> cordova build android ANDROID_HOME=C:\ ...

  4. DTO转DOMAIN动态转换类。

    package dtotransfer.util; import dtotransfer.annotation.DomainField; import java.lang.annotation.Ann ...

  5. ASCII码与unicode字符集

    问题1:为什么需要字符ASCII码.unicode码等等???它们到底有什么作用? 首先要明白一个事实:在计算机中只能用一系列存储着的0和1,当我们把一个字符存放在计算机时,我们是如何表示常用的字符呢 ...

  6. 乾坤合一~Linux设备驱动之块设备驱动

    1. 题外话 在蜕变成蝶的一系列学习当中,我们已经掌握了大部分Linux驱动的知识,在乾坤合一的分享当中,以综合实例为主要讲解,在一个月的蜕茧成蝶的学习探索当中,觉得数据结构,指针,链表等等占据了代码 ...

  7. Springboot多数据源配置--数据源动态切换

    在上一篇我们介绍了多数据源,但是我们会发现在实际中我们很少直接获取数据源对象进行操作,我们常用的是jdbcTemplate或者是jpa进行操作数据库.那么这一节我们将要介绍怎么进行多数据源动态切换.添 ...

  8. 【Excel】读取固定长文本

    '******************************************************************************* ' 固定長形式テキストファイルを読み込 ...

  9. fastadmin 使用记录

    1.引用静态css文件 参考路径:D:\wwwroot\public\assets\addons\cms\css 静态资源文件基本都放在public目录下引用 引用实例 D:\wwwroot\addo ...

  10. Kylin如何进行JDBC方式访问或者调用

    Kylin提供了标准的ODBC和JDBC接口,能够和传统BI工具进行很好的集成.分析师们可以用他们最熟悉的工具来享受Kylin带来的快速.我们也可以对它进行定制开发报表等,把kylin当做数据库服务器 ...