【工具】Vue中生成二维码组件—

【工具】Vue中生成二维码组件——vue-qr

npm地址——https://www.npmjs.com/package/vue-qr

注：不支持IE浏览器

效果

1、安包

npm install vue-qr --save

2、引入

// vue2.0
import VueQr from 'vue-qr'
// vue3.0
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({components: {VueQr}
})

3、使用

<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr>
<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr><script>
export default {methods:{test(dataUrl,id){console.log(url, id)}}
}
</script>

4、相关配置属性

属性名	含义
text	编码内容
correctLevel	容错级别
size	尺寸, 长宽一致, 包含外边距
margin	二维码图像的外边距, 默认 20px
colorDark	实点的颜色
colorLight	空白区的颜色
bgSrc	欲嵌入的背景图地址
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor	背景色
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc	嵌入至二维码中心的 LOGO 地址
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2margin), 默认 0.2
logoMargin	LOGO 标识周围的空白边框, 默认为0
logoBackgroundColor	Logo 背景色,需要设置 logo margin
logoCornerRadius	LOGO 标识及其边框的圆角半径, 默认为0
whiteMargin	若设为 true, 背景图外将绘制白色边框
dotScale	数据区域点缩小比例,默认为0.35
autoColor	若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold	(0 < threshold < 255) 二值化处理的阈值
callback	生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
bindElement	指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE

5、实例

index.vue

<!--* @Author: user* @Date: 2022-03-22 14:06:12* @LastEditTime: 2022-03-22 14:06:12* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath:/src/views/downApp.vue
-->
<template><div class="all"><div class='top'></div><div class='center_down_app'><div class='bg' :style='{backgroundImage:"url(" + bg.src +")"}'></div><div class='qrcode_sp'><div class='qrcode_bg'><!-- <vue-qr :text="downloadData.url" :logoSrc="downloadData.icon + '?cache'" :margin="0" colorDark="#f67b29" colorLight="#fff"  :logoScale="0.3" :size="200"></vue-qr> --><vue-qr :text="downloadData.url" :logoSrc="downloadData.icon" :size="145" :logoScale="0.2" :logoMargin='3' :margin="10" colorDark="#585E67" colorLight="#fff"></vue-qr></div><p>用手机扫描二维码安装</p></div><div class='download_sp'><a :href= latestAppData.appUrl ><div class='download_btn' @mousemove="isMask = true" @mouseout="isMask = false"><img src="@/img/android.svg" class="imgMiddle" /><div class='btn_w'>下载</div><div class="mask" v-show="isMask"></div></div></a><p class='versions_sp'>最新版本：{{latestAppData.appVersion}}(build {{latestAppData.upgradeLevel}}) ｜ 大小：{{latestAppData.appSize}}MB | 更新时间：{{latestAppData.updateTime}}</p></div></div></div>
</template>
<script type="text/ecmascript-6">
import vueQr from 'vue-qr'
import {queryLatestApp} from '@/api/request';
export default {components: {vueQr},data () {return {bg: { src: require('@/img/logo_download.png') },downloadData: {url: '',icon: require('@/img/qr_logo.svg')},latestAppData: {},isMask:false}},created () {queryLatestApp({appType: '安卓'}).then(res => {this.latestAppData = res;this.latestAppData.updateTime = res.updateTime.split(' ')[0];this.downloadData.url = res.appUrl;})}
}
</script>
<style lang="scss" scope>
.all{width: 100%;height: 100%;background: #131623;overflow: hidden;.top{width: 100%;height: 46px;background: linear-gradient(90deg, #75C6FE, #B256F9);}.center_down_app{width: 1366px;height: 646px;margin-left: calc(50% - 683px);position: relative;margin-top: 70px;.bg{width: 610px;height: 670px;margin-left: calc(50% - 305px);background-size: contain;}.qrcode_sp{width: 188px;height: 220px;position: absolute;top: 136px;left: 28%;.qrcode_bg{width: 188px;height: 188px;padding: 20px;background: #141723;border-radius: 30px;border:solid 1px rgba(101, 103, 107, 0.22);box-shadow: 0px 12px 68px 19px rgba(0, 0, 0, 0.59);}p{width: 188px;height: 16px;font-size: 16px;line-height: 32px;font-weight: 400;color: #848390;text-align: center;}}.download_sp{width: 461px;height: 110px;position: absolute;right: 22%;bottom: 0px;.download_btn{width: 434px;height: 62px;line-height: 58px;background: #4E55AF;border-radius: 30px;position: relative;.mask{position: absolute;width: 100%;height: 100%;top: 0;left: 0;border-radius: 30px;background-color: rgba(0, 0, 0, 0.2);}.imgMiddle{width: 36px;height: 36px;display: block;float: left;margin: 13px 0px 0px 166px;}.btn_w{margin-left: 10px;margin-top: 2px;font-size: 20px;letter-spacing: 10px;font-family: Microsoft YaHei;font-weight: bold;color: #FFFFFF;float: left;}}.versions_sp{height: 14px;font-size: 14px;font-family: PingFang SC;font-weight: 400;color: #C6CAD5;line-height: 24px;margin-top: 34px;}}}@media only screen and (max-height: 770px){.center_down_app{margin-top: 40px !important;}.bg{margin-left: calc(50% - 244px) !important;width: 427px !important;height: 469px !important;}.qrcode_sp{top: 80px !important;}.download_sp{bottom: 170px !important;}}
}
</style>

【工具】Vue中生成二维码组件——vue-qr相关推荐

Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
vue 中生成二维码，合成海报
1.分别引入 qrcodejs2.html2canvas 执行以下命令行 npm install qrcodejs2 npm install html2canvas 2.下载canvas2image, ...
vue中生成二维码并自动批量下载
项目中经常又这样的需求,要求将字符串生成二维码,并下载下来一般分为生成一个二维码展示并下载,对于这种你只需调用 qrcodejs2生成二维码就可以了下载也是按钮触发今天我们要说的是批量下载, ...
qrcodejs2--Vue生成二维码组件封装
1.安装qrcodejs2: npm install qrcodejs2 --save yarn add qrcodejs2 2.初步封装组件: /*** @file 生成二维码的组件* @autho ...
Vue生成二维码组件封装
1.使用方法 1.1.载入 JavaScript 文件 <script src="qrcode.js"></script> 1.2.调用 // 简单方式 n ...
在Vue中生成二维码扫描在手机上跳转页面
使用方法: 安装vue-qr npm install vue-qr --save 在components新建一个vue组件,eg:vueQr.vue (以下为组件完整代码) <template& ...
在Vue中生成二维码(前端生成二维码:Qrcode)
1.首先我们需要使用"npm install --save qrcode"下载依赖包 npm install --save qrcode 2.在要使用qrcode的页面导入qrco ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
Vue批量生成二维码并分页打印，组件形式实现
Vue批量生成二维码并分页打印,组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...

【工具】Vue中生成二维码组件——vue-qr

【工具】Vue中生成二维码组件——vue-qr

1、安包

2、引入

3、使用

4、相关配置属性

5、实例

【工具】Vue中生成二维码组件——vue-qr相关推荐

最新文章

热门文章