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. 【资料下载区】【GMT43相关代码、资料下载地址】更新日期2017/06/28

    [GMT43相关文档][更新中...] GMT43原理图(PDF)下载GMT43说明书(PDF)下载GMT43机械结构尺寸(PDF)下载 [GMT43相关例程代码][ARM][更新中...] 基于HA ...

  2. 解决Chrome 70版本以后谷歌不再信任赛门铁克证书问题

    Google 从 2018 年 10 月发布的 Chrome 70 就停止信任赛门铁克的旧证书了,而 Mozilla 也将在 10 月底发布 Firefox 63 时停止信任赛门铁克的旧证书. 导致大 ...

  3. win10 caffe python Faster-RCNN训练自己数据集(转)

    一.制作数据集 1. 关于训练的图片 不论你是网上找的图片或者你用别人的数据集,记住一点你的图片不能太小,width和height最好不要小于150.需要是jpeg的图片. 2.制作xml文件 1)L ...

  4. Goland常用快捷键

    文件相关快捷键: CTRL+E,打开最近浏览过的文件. CTRL+SHIFT+E,打开最近更改的文件. CTRL+N,可以快速打开struct结构体. CTRL+SHIFT+N,可以快速打开文件. 代 ...

  5. PXE:kickstart配置文件:全自动安装centos、redhat 系统的配置

    default menu.c32 #多网卡,其实centos7会自动处理,默认使用第一个网卡 label centos76 menu label ??? centos76 from ftp timeo ...

  6. go关键字之select

    select是Go中的一个控制结构,类似于switch语句,用于处理异步IO操作.select会监听case语句中channel的读写操作,当case中channel读写操作为非阻塞状态(即能读写)时 ...

  7. VS 错误: 未找到与约束contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService

    今天突然停电,vs重启的时候就出现了问题,最开始是提示如图1所示的错误,开始觉得可能这提示不重要,也就关闭不在提醒了,结果,vs启动是启动了,项目也开启了,但是生成的时候,依旧就报了图1的错 图1 去 ...

  8. Python学习之解决python下载第三方依赖速度慢的问题

    原因:通过pip命令直接下载,一般下载的资源存放在国外的服务器上,导致下载速度慢.下载过程中报错: 解决方法:通过pip的命令参数,从国内的下载源,国外的替换为国内的镜像,进行目标包的下载: 具体参数 ...

  9. Go VSCode配置编译task

    菜单栏Tasks->Configure Tasks { "version": "2.0.0", "tasks": [ { " ...

  10. 【CF613D】Kingdom and its Cities 虚树+树形DP

    [CF613D]Kingdom and its Cities 题意:给你一棵树,每次询问给出k个关键点,问做多干掉多少个非关键点才能使得所有关键点两两不连通. $n,\sum k\le 10^5$ 题 ...