vue二维码生成可自定义logo

代码已上传至github
github代码地址：https://github.com/Miofly/mio.git 

<template xlang="wxml">
	<view class="container">
		<!-- pdground="rgba(123, 191, 234, 1)  qrR(res) { this.src = res }-->
		<tki-qrcode :show="true" :size="200" unit="upx" cid="qrcode1" ref="qrcode"
					val="https://ext.dcloud.net.cn/plugin?id=39" :showLoading="false"
					icon="/static/images/lz/lz_bg.png"
					:iconSize="40" :onval="false" :loadMake="true" :usingComponents="true"
					@result="qrR" />
	</view>
</template>
<script>
	import {dateUtils} from 'mioJs/dateUtils'
    export default {
	    onLoad () {
	        console.log(dateUtils.today({ymrSign: true}))
	    },
        data() {
            return {
                ifShow: true,
                val: 'http://www.baidu.com', // 要生成的二维码值
                size: 200, // 二维码大小
                unit: 'upx', // 单位
                background: '#b4e9e2', // 背景色
                foreground: '#309286', // 前景色
                pdground: '#32dbc6', // 角标色
                icon: '', // 二维码图标
                iconsize: 40, // 二维码图标大小
                lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
                onval: false, // val值变化时自动重新生成二维码
                loadMake: true, // 组件加载完成后自动生成二维码
                src: '' // 二维码生成后的图片地址或base64
            }
        },
        methods: {

            creatQrcode() {
                this.$refs.qrcode._makeCode()
            },
            saveQrcode() {
                this.$refs.qrcode._saveCode()
            },
            qrR(res) {
                this.src = res
            },
            clearQrcode() {
                this.$refs.qrcode._clearCode()
                this.val = ''
            },
            ifQrcode() {
                this.ifShow = !this.ifShow
            },
        },
    }
</script>

<style>
	/* @import "../../../common/icon.css"; */
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.qrimg {
		display: flex;
		justify-content: center;
	}

	.qrimg-i {
		margin-right: 10px;
	}

	slider {
		width: 100%;
	}

	input {
		width: 100%;
		margin-bottom: 20 upx;
	}

	.btns {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	button {
		width: 100%;
		margin-top: 10 upx;
	}
</style>

组件代码

<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>