Vue生成二维码的方式
第一种使用QRcode
1.安装vue-qr
npm install vue-qr --save
2.在需要使用的vue组件中使用vueQr.vue
<template>
<div class="content">
<div class="qr_content">
<vue-qr
:text="downloadData.url"
:margin="10"
color-dark="#000"
color-light="#fff"
:dot-scale="1"
:logo-src="downloadData.icon"
:logo-scale="0.2"
:size="300"
></vue-qr>
</div>
</div>
</template>
<script>
import vueQr from 'vue-qr'
export default {
components: { vueQr },
mixins: [],
props: {},
data() {
return {
downloadData: {
url: 'https://www.baidu.com/', // 需要转化成二维码的网址
icon: require("../assets/logo.png") //二维码中间的图片,可以不设置
}
}
},
}
</script>
插件方法:
- text:转化成二维码的内容
- margin:二维码与边框的距离,可以设置白边
- colorDark:二维码(黑点)的颜色
- colorLight:背景颜色
- dotScale:二维码中点的大小,一般设置为1
- logoSrc:中央图片或logo的路径
- logoScale:中央图片的缩放比例
- size:设置二维码大小,宽高相等
第二种使用tki-qrcode插件
1.安装tki-qrcode
npm i tki-qrcode
2.页面中引用
<template>
<view class="content">
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
<view>
<view class="qrimg">
<tki-qrcode
ref="qrcode"
:val="val"
:size="size"
:unit="unit"
:background="background"
:foreground="foreground"
:pdground="pdground"
:lv="lv"
:onval="onval"
:load-make="loadMake"
@result="qrR"
/>
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from "tki-qrcode"
export default {
components: {
tkiQrcode
},
data() {
return {
val: '生成二维码内容', //要生成二维码的值
size: 250, // 二维码的大小 单位为rpx
background: '#ffffff', //背景色
foreground: '#000000',
pdground: '#000000', //角标色
icon: '', //二维码图标
iconsize: 30, //二维码图标大小
lv: 3, //二维码容错级别
onval: true, //val值变化时自动重新生成二维码
unit: 'upx',
loadMake: true, //组件加载完成后自动生成二维码
src: '',
showLoading: true, //loading
loadingText: 'loading内容', //loading内容
title: 'Hello'
};
},
methods:{
qrR(){
console.log("二维码生成")
}
}
}
</script>
