From 763bdcc0d068f5bb62d577814da635ed5235bb06 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 04 Jul 2022 18:12:54 +0800
Subject: [PATCH] 实现二维码组件
---
plugins/qrcode/CQRCode.vue | 70 +++++++++++++++++++++++++++++++++++
plugins/qrcode/cQrCode.scss | 15 +++++++
plugins/qrcode/index.js | 10 +++++
3 files changed, 95 insertions(+), 0 deletions(-)
diff --git a/plugins/qrcode/CQRCode.vue b/plugins/qrcode/CQRCode.vue
new file mode 100644
index 0000000..ef9fe4a
--- /dev/null
+++ b/plugins/qrcode/CQRCode.vue
@@ -0,0 +1,70 @@
+/**
+ * CQRCode
+ * @author Tevin
+ */
+
+<template>
+ <view class="c-qr-code">
+ <canvas ref="canvas"></canvas>
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import { $ } from '@tarojs/extend';
+import QRCode from 'qrcode';
+import './cQrCode.scss';
+
+export default {
+ name: 'CQRCode',
+ components: {},
+ props: {
+ content: {
+ type: String,
+ default: 'http://www.aisim.cn',
+ },
+ size: {
+ type: Number,
+ default: 200,
+ },
+ margin: {
+ type: Number,
+ default: 2,
+ },
+ },
+ data() {
+ return {};
+ },
+ methods: {
+ _renderQRCode(canvasDom) {
+ QRCode.toCanvas(
+ canvasDom,
+ this.content,
+ {
+ width: this.size,
+ margin: this.margin,
+ },
+ err => {
+ if (err) {
+ console.error(err);
+ return;
+ }
+ }
+ );
+ },
+ },
+ mounted() {
+ if (process.env.TARO_ENV === 'h5') {
+ const canvasBox = $(this.$refs.canvas.$el);
+ const finderTimer = setInterval(() => {
+ const canvasDom = canvasBox.find('canvas');
+ if (canvasDom.length > 0) {
+ this._renderQRCode(canvasDom[0]);
+ }
+ }, 10);
+ } else {
+ // TODO: 小程序中获取canvas
+ }
+ },
+};
+</script>
\ No newline at end of file
diff --git a/plugins/qrcode/cQrCode.scss b/plugins/qrcode/cQrCode.scss
new file mode 100644
index 0000000..0abfe35
--- /dev/null
+++ b/plugins/qrcode/cQrCode.scss
@@ -0,0 +1,15 @@
+/**
+ * CQRCode
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-qr-code {
+ text-align: center;
+ taro-canvas-core {
+ display: inline-block;
+ width: auto;
+ height: auto;
+ }
+}
\ No newline at end of file
diff --git a/plugins/qrcode/index.js b/plugins/qrcode/index.js
new file mode 100644
index 0000000..60fa5b0
--- /dev/null
+++ b/plugins/qrcode/index.js
@@ -0,0 +1,10 @@
+/**
+ * qrcode
+ * @author Tevin
+ */
+
+import CQRCode from '@components/plugins/qrcode/CQRCode.vue';
+
+export {
+ CQRCode
+}
\ No newline at end of file
--
Gitblit v1.9.1