<template xlang="wxml" minapp="mpvue"> <view class="tki-qrcode"> <!-- #ifndef MP-ALIPAY --> <canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" /> <!-- #endif --> <!-- #ifdef MP-ALIPAY --> <canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" /> <!-- #endif --> <image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" /> </view> </template> <script> import QRCode from "./qrcode.js" let qrcode export default { name: "tki-qrcode", props: { cid: { type: String, default: 'tki-qrcode-canvas' }, size: { type: Number, default: 200 }, unit: { type: String, default: 'upx' }, show: { type: Boolean, default: true }, val: { type: String, default: '' }, background: { type: String, default: '#ffffff' }, foreground: { type: String, default: '#000000' }, pdground: { type: String, default: '#000000' }, icon: { type: String, default: '' }, iconSize: { type: Number, default: 40 }, lv: { type: Number, default: 3 }, onval: { type: Boolean, default: false }, loadMake: { type: Boolean, default: false }, usingComponents: { type: Boolean, default: true }, showLoading: { type: Boolean, default: true }, loadingText: { type: String, default: '二维码生成中' }, }, data() { return { result: '', } }, methods: { _makeCode() { let that = this if (!this._empty(this.val)) { qrcode = new QRCode({ context: that, // 上下文环境 canvasId:that.cid, // canvas-id usingComponents: that.usingComponents, // 是否是自定义组件 showLoading: that.showLoading, // 是否显示loading loadingText: that.loadingText, // loading文字 text: that.val, // 生成内容 size: that.cpSize, // 二维码大小 background: that.background, // 背景色 foreground: that.foreground, // 前景色 pdground: that.pdground, // 定位角点颜色 correctLevel: that.lv, // 容错级别 image: that.icon, // 二维码图标 imageSize: that.iconSize,// 二维码图标大小 cbResult: function (res) { // 生成二维码的回调 that._result(res) }, }); } else { uni.showToast({ title: '二维码内容不能为空', icon: 'none', duration: 2000 }); } }, _clearCode() { this._result('') qrcode.clear() }, _saveCode() { let that = this; if (this.result != "") { uni.saveImageToPhotosAlbum({ filePath: that.result, success: function () { uni.showToast({ title: '二维码保存成功', icon: 'success', duration: 2000 }); } }); } }, _result(res) { this.result = res; this.$emit('result', res) }, _empty(v) { let tp = typeof v, rt = false; if (tp == "number" && String(v) == "") { rt = true } else if (tp == "undefined") { rt = true } else if (tp == "object") { if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true } else if (tp == "string") { if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true } else if (tp == "function") { rt = false } return rt } }, watch: { size: function (n, o) { if (n != o && !this._empty(n)) { this.cSize = n if (!this._empty(this.val)) { setTimeout(() => { this._makeCode() }, 100); } } }, val: function (n, o) { if (this.onval) { if (n != o && !this._empty(n)) { setTimeout(() => { this._makeCode() }, 0); } } } }, computed: { cpSize() { if(this.unit == "upx"){ return uni.upx2px(this.size) }else{ return this.size } } }, mounted: function () { if (this.loadMake) { if (!this._empty(this.val)) { setTimeout(() => { this._makeCode() }, 0); } } }, } </script> <style> .tki-qrcode { position: relative; } .tki-qrcode-canvas { position: fixed; top: -99999upx; left: -99999upx; z-index: -99999; } </style>