|
|
@@ -1,52 +1,60 @@
|
|
|
<template>
|
|
|
- <canvas canvas-id="qrcode" :style="{width: size * 2 +'rpx', height: size * 2 + 'rpx'}"></canvas>
|
|
|
+ <div class="con">
|
|
|
+ <canvas v-if="!canvasSrc" canvas-id="qrcode" :style="{width: size +'px', height: size + 'px'}"></canvas>
|
|
|
+ <image :src="canvasSrc" v-if="canvasSrc" :style="{width: size +'px', height: size + 'px'}"></image>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
import UQRCode from "uqrcodejs";
|
|
|
-var qr = new UQRCode();
|
|
|
export default {
|
|
|
- name: "",
|
|
|
- props: {
|
|
|
- size: {
|
|
|
- type: Number,
|
|
|
- default: 200
|
|
|
+ name: "",
|
|
|
+ props: {
|
|
|
+ size: {
|
|
|
+ type: Number,
|
|
|
+ default: 200
|
|
|
+ },
|
|
|
+ code: {
|
|
|
+ type: String,
|
|
|
+ default: undefined
|
|
|
+ },
|
|
|
},
|
|
|
- code: {
|
|
|
- type: String,
|
|
|
- default: undefined
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ctx: null,
|
|
|
+ canvasSrc: ""
|
|
|
+ };
|
|
|
},
|
|
|
- },
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- methods: {
|
|
|
- createCode(va) {
|
|
|
- // 获取uQRCode实例
|
|
|
- var qr = new UQRCode();
|
|
|
- // 设置二维码内容
|
|
|
- qr.data = va;
|
|
|
- // 设置二维码大小,必须与canvas设置的宽高一致
|
|
|
- qr.size = this.size;
|
|
|
- // 调用制作二维码方法
|
|
|
- qr.make();
|
|
|
- // 获取canvas上下文
|
|
|
- var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件,this必须传入
|
|
|
- // 设置uQRCode实例的canvas上下文
|
|
|
- qr.canvasContext = canvasContext;
|
|
|
- // 调用绘制方法将二维码图案绘制到canvas上
|
|
|
- qr.drawCanvas();
|
|
|
+ methods: {
|
|
|
+ createCode(va) {
|
|
|
+ let qr = new UQRCode();
|
|
|
+ qr.data = va;
|
|
|
+ qr.size = this.size;
|
|
|
+ qr.make();
|
|
|
+ let canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件,this必须传入
|
|
|
+ qr.canvasContext = canvasContext;
|
|
|
+ let that = this;
|
|
|
+ qr.drawCanvas();
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.canvasToTempFilePath({
|
|
|
+ canvasId: 'qrcode',
|
|
|
+ success(res) {
|
|
|
+ that.canvasSrc = res.tempFilePath;
|
|
|
+ },
|
|
|
+ fail(err){
|
|
|
+ console.log("canvasToTempFilePath", err);
|
|
|
+ }
|
|
|
+ },that)
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if(this.code) this.createCode(this.code);
|
|
|
- },
|
|
|
- watch: {},
|
|
|
- computed: {},
|
|
|
- filters: {},
|
|
|
+ mounted() {
|
|
|
+ if (this.code) this.createCode(this.code);
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {},
|
|
|
+ filters: {},
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style scoped lang='scss'>
|
|
|
</style>
|