-
vue如何生成二维码
2021-03-08 15:46:59使用vue-qr npm npm install vue-qr --save import import vueQr from 'vue-qr' 使用 <vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr> <script> export default { name: ...使用vue-qr
npmnpm install vue-qr --save
import
import vueQr from 'vue-qr'
使用
<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr> <script> export default { name: "qecode", data() { return { imageUrl: require("../assets/logo.png"), } }, components: { vueQr }, }, } </script>
-
vue生成二维码的插件~避免踩坑mark
2019-04-24 11:49:22vue生成二维码的两个插件 前段时间有个需求需要用到二维码,特意找了一些相关插件,发现了两个还是好用的分享给大家。 简单介绍一下如何避免踩坑。 第一种方法 qrcodejs2 第一步:下载插件qrcodejs2 npm install ...vue生成二维码的两个插件
前段时间有个需求需要用到二维码,特意找了一些相关插件,发现了两个还是好用的分享给大家。
简单介绍一下如何避免踩坑。第一种方法 qrcodejs2
- 第一步:下载插件qrcodejs2
npm install qrcodejs2 --save
- 第二步:给你准备放入二维码的标签一个id属性 ( 例如:id=“qrcode”)
<template> <div> <div id="qrcode"></div> //必须是id 和实例化的第一参数对应 </div> </template>
- 通过在methods中写入一个方法用来调用实现二维码的生成, 例如需要二维码弹出的时候调用
- 我这里写的是在组件渲染完毕后直接渲染出来
<script> import QRCode from 'qrcodejs2'; export default { mounted () { this.qrcode(); //调用二维码生成的方法 }, methods: { qrcode () { // 和div的id相同 必须是id class类名会报错 // 第二参数是他的配置项 let qrCode = new QRCode('qrcode', { width: 150, height: 150, text: 'http://www.baidu.com', colorDark: '#ccc', colorLight: 'yellow' }) } } } </script>
- 第一个是基础款,第二个是加了colorDark的属性
参数说明:
属性 是否必填 width (必填项) 宽度(Number) margin(必填) 边距-默认值为20 bgSrc(选填) 背景图片 logoSrc(选填) 中间的图片 gifBgSrc(选填) 动态背景图 (设置此选项会影响性能) colorDark(选填) 二维码颜色(实点颜色) colorLight(选填) 二维码背景填充色 callback(选填) 生成的二维码 Data URI,可以在回调中取得 注意!!! width 和 height必须是数值,如果写成 width:‘150px’ 就会报错❤
第二种方法 vue-qr
这个插件比起第一个多了一些功能,例如背景图片,类似我们微信个人名片的logo头像,更有趣的是可以社做动态gif图片作为背景图
- 第一步:下载插件vue-qr
npm install vue-qr --save
- 第二步:引入组件,挂载到components中,在template里写入组件
<template> <div> <VueQr :margin='20' :size='200' :text='config.text'></VueQr> </div> </template>
- 第三步:在data中默认返回一个二维码的配置项参数
<script> import VueQr from 'vue-qr'; export default { data () { return { config: { text:'123', //必须写text属性 bgSrc: require('../img/chicken.jpg'), logoSrc: require('../img/dao.jpg'), gifBgSrc: require('../img/dog.gif') } } }, components: { VueQr } } </script>
大概就是这样子 我写了三个跳转百度页面的二维码
最后要注意的是,引入图片文件的时候注意使用require引入,直接写图片路径是会报错的
参数说明:
属性 是否必填 text (必填) 可以写路径或者文字,扫描后想要跳转的路径或者显示的文字 size (必填) 二维码尺寸 长宽一致, 包含外边距 margin(必填) 二维码距离外边框的边距 - 默认值为20 bgSrc(选填) 背景图片 logoSrc(选填) 中间的图片 gifBgSrc (选填) 动态背景图 (设置此选项会影响性能) colorDark(选填) 二维码颜色(实点颜色) colorLight(选填) 二维码背景填充色 callback(选填) 生成的二维码 Data URI,可以在回调中取得 第一次发帖,做的不够好大家多担待!如有转帖请注明出处,最后欢迎大牛们来指点,谢谢!
-
在vue中如何快速生成二维码
2019-09-25 15:28:33// 二维码地址 colorDark : '#000' , colorLight : '#fff' } ) ; } } } ; < / script > < style > . qrcode_box { width : 2.58 rem ; height : 2.58 rem ; margin - left : ...第一步 下载插件
cnpm install --save qrcodejs2
第二步,在组件中使用
<template> <div class="qrcode_box"> <div id="qrcode"></div> </div> </template> <script> import QRCode from 'qrcodejs2'; // 引入qrcode export default { name: 'test', mounted() { this.qrcode(); }, methods: { qrcode() { let qrcode = new QRCode('qrcode', { width: 132, height: 132, text: 'https://www.baidu.com', // 二维码地址 colorDark: '#000', colorLight: '#fff' }); } } }; </script> <style> .qrcode_box { width: 2.58rem; height: 2.58rem; margin-left: 2.46rem; margin-top: 0.26rem; } </style>
-
vue如何使用qrcodejs2 生成二维码弹出框不加载二维码(已解决)
2020-08-11 16:23:521.需求 我们有一个项目是给某大会签到入场的项目,整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照,这里就讲一下碰到的...3.生成二维码的页面 <div id="qrCode" ref="qrCodeDiv"></div> 4.js里1.需求
我们有一个项目是给某大会签到入场的项目,整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照,这里就讲一下碰到的几个问题,记录一下~!
2.具体过程如下
1.安装 qrcodejs2npm install qrcodejs2 --save
2.在main.js或者是需要使用的页面引入
import QRCode from 'qrcodejs2'
3.生成二维码的页面
<div id="qrCode" ref="qrCodeDiv"></div>
4.js里的方法
//打印二维码的方法 bindQRCode: function () { new QRCode(this.$refs.qrCodeDiv, { text: '扫描二维码之后展示的内容' width: 100, height: 100, colorDark: "#333333", //二维码颜色 colorLight: "#ffffff", //二维码背景色 correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H }) },
3.打印内容
这里打印的话有好几种方法,我就简单的讲一下这几种打印方法的注意事项。
vue的打印插件cnpm i vue-print-nb -S
. 在需要打印的位置使用 <div id="dialogContent"> <p style="text-align: center"> {{ form.status === '条件' ? '标题一' : '标题二' }} </p> <div class="table-layout"> <!--内容--> </div> </div> 4. 打印 <button v-print="'#dialogContent'">打印</button>
这种方法的缺点就是只能打印可见区域,不能分页打印
方法二:print.js1. 安装依赖 cnpm install vuePlugs_printjs -S 2. 引入 import Print from '@/plugins/print' // 下载到本地地址 Vue.use(Print) 3. 使用 <template> <div ref="print"> <!--打印内容--> <div class="no-print">不要打印我</div> </div> <a-button @click="prints">打印</a-button> </template> <script> export default { data () { return {} }, methods: { prints () { this.$print(this.$refs.print) } } } </script>
注意:
需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空
4.总结
这里我就粗略的讲了一下这几种方法是怎么实现的,其实后续还有很多可以拓展的问题需要解决,如果是弹窗打印的话会出现好几个问题,比如说第一次弹出不加载二维码。let doc_body = document.body.innerHTML, printPart = document.getElementById("dialogContent").innerHTML; document.body.innerHTML = printPart; window.print(); //只能打印当前页面body里面的全部内容,所以打印之前,要替换body里面的内容 document.body.innerHTML = doc_body; window.location.reload(false); //重新刷新页面的时候会出现首页白屏,用户体验不好
这里虽然解决了第一次弹框没有出现二维码的问题,但是重新刷新页面的时候会出现白屏,用户体验不好,这里有待优化。暂时我也还没排查出问题出现在哪?后续会继续跟进!
如果有什么问题,可以到下方评论区留言。如果各位大神已有解决方法,可以留言告诉我,我也参考参考~。 -
请问vue如何生成放大也不会模糊的二维码
2021-02-25 17:49:59这边用qrcodejs2生成的二维码,一放大就模糊了,有客户需求想要把二维码下载出来打印,一放大就模糊了,...有没有哪位大神知道如何生成放大也不会模糊的二维码,还请赐教</p> -
如何用vue+element-ui生成二维码
2019-08-23 17:26:171.安装qrcode element-ui 的使用官网添加链接描述 npm install qrcodejs2 --save 2.页面引入 <template> <div>...el-button type="primary" @click="qrCode()" style="margin-...生成二维码</el-butto... -
在VUE中如何第三方插件生成二维码
2021-01-25 18:05:01意义:生成二维码的意思其实就是将一个URL地址保存在二维码中,扫描二维码的时候就指向地址,打开该URL。 步骤如下(可以参照JavaScript的二维码生成 – QRCode.js) 1、首先安装包qrcodejs2: npm install --save ... -
如何在vue项目中生成二维码(qrcode.js)并下载(中间不带logo)
2019-11-19 11:20:412. 在你需要用到二维码的页面引入 import QRCode from ‘qrcodejs2’ 二维码代码 我的操作逻辑是将二维码放在一个dialog里,点击打开二维码的按钮,弹出对话框 显示二维码,以下是代码: <el-button type=... -
vue客户端下载二维码图片
2019-07-15 11:02:44客户端实现下载二维码图片(服务器端如何生成小程序二维码请看另外一篇 链接地址:https://blog.csdn.net/qq_33238562/article/details/92972684 ) <el-button v-if="isgly" type="text" @click="create... -
vue生成二维码 qrcode_QR Code快速响应矩阵 二维码编码全过程详解(三)(纠错码的生成)...
2020-11-20 10:30:19承接上文,在了解了一些背景知识后,我们现在来讲具体的纠错码如何生成。3.纠错编码:1.将数据码字分块:在我们第一篇文章里已经将数据码字全部编好了。共80个码字,我们选的版本和纠错等级为Version4,L;查阅QR码的... -
Vue2.x实现生成二维码并且能下载到本地
2018-05-28 14:10:14一、前端生成二维码功能很常见,不用想肯定得用到插件,上github上一搜索vue qrcode出来好几个插件,star并不是很多大部分都是100多个star,下面主要介绍vue-qr的使用方法和如何下载二维码到本地的方法。 二、 1.... -
Vue使用qucodejs2生成二维码 图片设置100%问题
2020-01-16 16:39:19如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新... -
生成二维码logo模糊要如何处理
2020-12-28 10:31:11<div><p>该提问来源于开源项目:Binaryify/vue-qr</p></div> -
QRCanvas - 动态生成二维码的开源优秀 js 库
2020-12-30 22:02:23简单调用就能满足网址扫码预览和分享、登录扫码认证等...API 非常简单,简单到只需要一个文本参数就能生成二维码 虽然调用简单,但也提供了强大的定制化功能 零依赖,只需要浏览器支canvas,兼容性极佳 支持 vue / rea.