[Tool] Generate QR code component in Vue - vue-qr
npm address - https://www.npmjs.com/package/vue-qr
Note: IE browser is not supported
Effect
1. Security package
npm install vue-qr --save
2. Introduction
// vue2.0
import VueQr from 'vue-qr'
// vue3.0
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({
components: {
VueQr}
})
3. Use
<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. Related configuration properties
| attribute name | meaning |
|---|---|
| text | encoded content |
| correctLevel | fault tolerance level |
| size | Dimensions, same height and width, including margins |
| margin | The outer margin of the QR code image, the default is 20px |
| colorDark | solid color |
| colorLight | the color of the white space |
| bgSrc | The address of the background image to be embedded |
| gifBgSrc | The gif address of the background image to be embedded, the normal background image will be invalid after setting. Setting this option affects performance |
| backgroundColor | background color |
| backgroundDimming | The color superimposed on the background image is helpful when decoding is difficult |
| logoSrc | LOGO address embedded in the center of the QR code |
| logoScale | The value used to calculate the LOGO size, too large will cause decoding failure, LOGO size calculation formula logoScale*(size-2*margin), default 0.2 |
| logoMargin | The blank border around the LOGO logo, the default is 0 |
| logoBackgroundColor | Logo background color, need to set logo margin |
| logoCornerRadius | The fillet radius of the LOGO logo and its border, the default is 0 |
| whiteMargin | If set to true, a white border will be drawn outside the background image |
| dotScale | Data area point reduction ratio, the default is 0.35 |
| autoColor | If true, the image will be binarized, and the default value will be used if no threshold is specified |
| binarizeThreshold | (0 < threshold < 255) Threshold for binarization |
| callback | The generated QR code Data URI can be obtained in the callback, the first parameter is the QR code data URL, and the second parameter is the qid passed from props (because the QR code generation is asynchronous, so add an id for sort) |
| bindElement | Specifies whether to automatically bind the generated QR code to HTML, the default is TRUE |
5. Examples
index.view
<!--
* @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>