【工具】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-2*margin), 默认 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>