CommunityApp/pagesM/comps/tki_qrcode.vue

<template>
	<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="qrval" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
		
</template>
<script>
import tkiQrcode from './tki-qrcode/tki-qrcode.vue'
export default {
	data() {
		return {
			ifShow: false,
			val: '二维码', // 要生成的二维码值
			size: 200, // 二维码大小
			unit: 'upx', // 单位
			background: '#fff', // 背景色
			foreground: '#000', // 前景色
			pdground: '#000', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: true, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '' // 二维码生成后的图片地址或base64
		}
	},
		props:{
			qrval:{
				type:String,
				default:'二维码'
			}
		},
	methods: {
		sliderchange(e) {
			this.size = e.detail.value
		},
		creatQrcode(val) {
			this.val = val
			// this.$refs.qrcode._makeCode()
		},
		saveQrcode() {
			this.$refs.qrcode._saveCode()
		},
		qrR(res) {
			this.src = res
			 this.$emit("onQrPath",res);
		},
		clearQrcode() {
			this.$refs.qrcode._clearCode()
			this.val = ''
		},
		ifQrcode() {
			this.ifShow = !this.ifShow
		},
		selectIcon() {
			let that = this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (res) {
					that.icon = res.tempFilePaths[0]
					setTimeout(() => {
						that.creatQrcode()
					}, 100);
					// console.log(res.tempFilePaths);
				}
			});
		}
	},
	components: {
		tkiQrcode
	},
	onLoad: function () { },
}
</script>

<style lang="scss" scoped>
/* @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: 20upx;
}
.btns {
	display: flex;
	flex-direction: column;
	width: 100%;
}
button {
	width: 100%;
	margin-top: 10upx;
}
</style>