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. Vue Resource root options not used?

    I specify a root options in my Vue-Resource in my main.js file, but when I do the request, it does n ...

  2. sshpass 实现shell脚本直接加载密登录服务器

    主要命令:sshpass 这个命不是系统自带的,需要安装: # which sshpass/usr/bin/sshpass[root@666 tools]# rpm -qf /usr/bin/sshp ...

  3. Js 动态添加的数据,监听事件监听不到

    在开发中遇到这种问题,就是有些数据,比如按钮是动态添加进去的,结果添加事件监听无效,直接写死在页面上是可以的. 这就是很明显的加载先后顺序的问题了. 解决的方法: $(document).ready( ...

  4. Git命令速查表

  5. Maven私服(Repository Manager) - Nexus安装和使用(详细过程)

    Maven私服的安装和使用. (注:原创文章,引用请注明来自Clement-Xu的博客!) Maven私服(即Repository Manager)的主要作用: 减少从远方仓库下载的次数,节省带宽.提 ...

  6. 【XGBOOST】

    https://www.cnblogs.com/wxquare/p/5541414.html

  7. 运用kmp算法解决的一些问题的简单题解

    学习kmp算法我最后是看的数据结构书上的一本教材学会的..我认为kmp相对于普通的BF算法就是避免了非常多不必要的匹配.而kmp算法的精髓自然就在于next数组的运用...而next数组简而言之就是存 ...

  8. python处理文件的换行符

    我们知道在Windows平台下的换行符是\r\n,而在linux下的换行符是\n.现在写一个简单程序来测试python是如何处理这些换行符的. 准备文件data.txt,该文件在Windows平台下编 ...

  9. python使用requests发送application/x-www-form-urlencoded请求数据

    def client_post_formurlencodeddata_requests(request_url,requestJSONdata): #功能说明:发送以form表单数据格式(它要求数据名 ...

  10. Aspose.Words使用技巧

    咨询个问题啊,我在使用aspose生成word,遇到了两个问题,一个是用aspose自动生成的目录的字体与标题的字体一致,但是用户不想他们一致,如何修改:二是,用户只想在正文部分显示页码,目录等页面不 ...