🎉 新增 scQrCode 二维码组件

package.json

@@ -17,6 +17,7 @@
 		"echarts": "5.2.2",
 		"element-plus": "1.2.0-beta.6",
 		"nprogress": "0.2.0",
+		"qrcodejs2": "0.0.2",
 		"sortablejs": "1.14.0",
 		"tinymce": "5.10.2",
 		"vue": "3.2.23",

src/components/scQrCode/index.vue

@@ -0,0 +1,88 @@
+<!--
+ * @Descripttion: 生成二维码组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年12月20日14:22:20
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<img ref="img"/>
+</template>
+
+<script>
+	import QRcode from "qrcodejs2"
+
+	export default {
+		props: {
+			text: { type: String, required: true, default: "" },
+			size: { type: Number, default: 100 },
+			logo: { type: String, default: "" },
+			logoSize: { type: Number, default: 30 },
+			logoPadding: { type: Number, default: 5 },
+			colorDark: { type: String, default: "#000000" },
+			colorLight: { type: String, default: "#ffffff" },
+			correctLevel: { type: Number, default: 2 },
+		},
+		data() {
+			return {
+				qrcode: null
+			}
+		},
+		watch:{
+			text(){
+				this.draw()
+			}
+		},
+		mounted() {
+			this.draw()
+		},
+		methods: {
+			//创建原始二维码DOM
+			async create(){
+				return new Promise((resolve) => {
+					var element = document.createElement("div");
+					new QRcode(element, {
+						text: this.text,
+						width: this.size,
+						height: this.size,
+						colorDark: this.colorDark,
+						colorLight: this.colorLight,
+						correctLevel: this.correctLevel
+					})
+					if (element.getElementsByTagName("canvas")[0]) {
+						this.qrcode = element
+						resolve()
+					}
+				})
+			},
+			//绘制LOGO
+			async drawLogo(){
+				return new Promise((resolve) => {
+					var logo = new Image()
+					logo.src = this.logo
+					const logoPos = (this.size - this.logoSize) / 2
+					const rectSize = this.logoSize + this.logoPadding
+					const rectPos = (this.size - rectSize) / 2
+					var ctx = this.qrcode.getElementsByTagName("canvas")[0].getContext("2d")
+					logo.onload = ()=>{
+						ctx.fillRect(rectPos, rectPos, rectSize, rectSize)
+						ctx.drawImage(logo, logoPos, logoPos, this.logoSize, this.logoSize)
+						resolve()
+					}
+				})
+			},
+			async draw(){
+				await this.create()
+				if(this.logo){
+					await this.drawLogo()
+				}
+				this.$refs.img.src = this.qrcode.getElementsByTagName("canvas")[0].toDataURL("image/png")
+			},
+		}
+	}
+</script>
+
+<style>
+</style>

src/scui.js

@@ -16,6 +16,7 @@ import scDialog from './components/scDialog'
 import scForm from './components/scForm'
 import scTitle from './components/scTitle'
 import scWaterMark from './components/scWaterMark'
+import scQrCode from './components/scQrCode'
 
 import scStatusIndicator from './components/scMini/scStatusIndicator'
 import scTrend from './components/scMini/scTrend'
@@ -52,6 +53,7 @@ export default {
 		app.component('scForm', scForm);
 		app.component('scTitle', scTitle);
 		app.component('scWaterMark', scWaterMark);
+		app.component('scQrCode', scQrCode);
 		app.component('scStatusIndicator', scStatusIndicator);
 		app.component('scTrend', scTrend);
 

src/views/vab/qrcode.vue

@@ -0,0 +1,47 @@
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="8">
+				<el-card shadow="never" header="常用">
+					<sc-qr-code text="scui"></sc-qr-code>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="带Logo">
+					<sc-qr-code text="scui" logo="img/logo.png"></sc-qr-code>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="自定义颜色大小">
+					<sc-qr-code text="scui" :size="100" colorDark="#088200" colorLight="#fff"></sc-qr-code>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="动态">
+					<sc-qr-code :text="qrcode"></sc-qr-code>
+					<el-input v-model="qrcode" placeholder="Please input"  style="margin-top: 20px;"/>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'qrcode',
+		data() {
+			return {
+				qrcode: "scui"
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>