二维码

package.json

@@ -77,7 +77,8 @@
     "vxe-table": "4.6.17",
     "vxe-table-plugin-antd": "4.0.7",
     "xe-utils": "3.5.26",
-    "xss": "^1.0.15"
+    "xss": "^1.0.15",
+    "qrcode-vue3": "^1.4.17"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.1",

src/components/QrcodeVue3/index.ts

@@ -0,0 +1 @@
+export { default as QRCodeVue3 } from './src/QRCodeVue3.vue';

src/components/QrcodeVue3/src/QRCodeVue3.vue

@@ -0,0 +1,215 @@
+<template>
+  <div ref="qrcodeRef">
+    <QRCodeVue3
+      :margin="margin"
+      :width="width"
+      :height="height"
+      :value="value"
+      :qrOptions="qrOptions"
+      :image="image"
+      :imageOptions="imageOptions"
+      :dotsOptions="dotsOptions"
+      :backgroundOptions="backgroundOptions"
+      :cornersSquareOptions="cornersSquareOptions"
+      :cornersDotOptions="cornersDotOptions"
+      :key="key"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, reactive, toRefs, PropType, ref} from "vue";
+import QRCodeVue3 from "qrcode-vue3";
+
+export default defineComponent({
+  name: "Qrcode",
+  components: {
+    QRCodeVue3,
+  },
+  props: {
+    // 二维码宽度
+    key: {
+      type: String as PropType<string>,
+      default: 0,
+    },
+    // 二维码宽度
+    width: {
+      type: String as PropType<string>,
+      default: 600,
+    },
+    // 二维码高度
+    height: {
+      type: String as PropType<string>,
+      default: 600,
+    },
+    // 二维码内容，网址
+    value: {
+      type: String as PropType<string>,
+      default: "https://www.focusnu.com/devops",
+    },
+    // 二维码图像的外边距
+    margin: {
+      type: String as PropType<string>,
+      default:6,
+    },
+    //二维码背景色
+    backgroundColor: {
+      type: String as PropType<string>,
+      default: "white",
+    },
+    //二维码中间的logo图片
+    logo: {
+      type: String as PropType<string>,
+      default: '',
+    },
+    // 隐藏图片背后有点
+    hideLogoDots: {
+      type: Boolean as PropType<boolean>,
+      default: true,
+    },
+    //二维码中间的logo大小
+    logoSize: {
+      type: String as PropType<string>,
+      default: 0.5,
+    },
+    //二维码中间的logo外边距
+    logoMargin: {
+      type: String as PropType<string>,
+      default: 5,
+    },
+    //二维码点配置
+    dotsOptions: {
+      type: Object,
+      default: () => ({
+        type: "rounded", // 二维码样式 square | dots | rounded | extra-rounded | classy | classy-rounded
+        color: "#0d2a56", //不设置渐变色时显示的颜色
+        // 渐变色，优先级高于默认color颜色
+        gradient: {
+          type: "radial", // linear线性渐变 | radial径向渐变
+          rotation: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#21a3fa",
+            },
+            {
+              offset: 1,
+              color: "#0d2a56",
+            },
+          ],
+        },
+      }),
+    },
+    /**
+     * 角落广场配置
+     */
+    cornersSquareOptions: {
+      type: Object,
+      default: () => ({
+        type: "extra-rounded", // none | square | dot | extra-rounded
+        color: "#0d2a56",//不设置渐变色时显示的颜色
+        // 渐变色
+        gradient: {
+          type: "linear",
+          rotation: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#0d2a56",
+            },
+            {
+              offset: 1,
+              color: "#21a3fa",
+            },
+          ],
+        },
+      }),
+    },
+    /**
+     * 角落点配置
+     */
+    cornersDotOptions: {
+      type: Object,
+      default: () => ({
+        type: "dot", // none | square | dot
+        color: "#0d2a56",//不设置渐变色时显示的颜色
+        // 渐变色
+        gradient: {
+          type: "linear",
+          rotation: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#0d2a56",
+            },
+            {
+              offset: 1,
+              color: "#21a3fa",
+            },
+          ],
+        },
+      }),
+    },
+  },
+  setup(props) {
+    console.log(props);
+    const qrcodeRef = ref(null);
+    const data = reactive({
+      key: props.key,//key值变化时自动刷新
+      /**
+       * 基础配置
+       * https://qr-code-styling.com
+       */
+      width: props.width, // 二维码宽度
+      height: props.height, // 二维码高度
+      value: props.value, // 二维码内容
+      margin: props.margin, // 二维码图像的外边距
+      /**
+       * 背景配置
+       */
+      backgroundOptions: {
+        //二维码背景色
+        color: props.backgroundColor,
+      },
+
+      /**
+       * 二维码配置
+       */
+      qrOptions: {
+        typeNumber: "0", // 类型编号 0 - 40
+        mode: "Byte", // 模式 Numeric | Alphanumeric | Byte | Kanji
+        errorCorrectionLevel: "Q", // 纠错等级 L | M | Q | H   'L'（低）、'M'（中）、'Q'（高）、'H'（非常高）
+      },
+
+      /**
+       * 图像配置（中心图片）
+       */
+      image: props.logo, // 二维码中心的图片
+      imageOptions: {
+        hideBackgroundDots: props.hideLogoDots, // 隐藏图片背后有点
+        imageSize: props.logoSize,
+        margin: props.logoMargin,
+        crossOrigin: "anonymous", // anonymous | use-credentials
+      },
+      /**
+       * 二维码点配置
+       */
+      dotsOptions: props.dotsOptions,
+      /**
+       * 角落广场配置
+       */
+      cornersSquareOptions: props.cornersSquareOptions,
+      /**
+       * 角落点配置
+       */
+      cornersDotOptions: props.cornersDotOptions,
+    });
+
+    return {
+      ...toRefs(data),
+      qrcodeRef
+    };
+  },
+});
+
+</script>

src/views/iotsync/yiweilian/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <main class="qrcode">
+    <div class="form">
+      <input
+        type="text"
+        v-model="data.value"
+        placeholder="请在这里输入要生成的内容！"
+        @change="changeValue"
+      />
+      <JImageUpload
+        text="上传LOGO"
+        ref="uploadRef"
+        v-model:value="data.logoImage"
+        @change="upFile"
+      />
+    </div>
+
+    <div class="code" ref="code">
+      <QRCodeVue3
+        margin="5"
+        width="400"
+        height="400"
+        :key="qrCodeKey"
+        :value="data.value"
+        :logo="data.logoImage"
+      />
+    </div>
+  </main>
+</template>
+
+<script lang="ts" name="qrcode" setup>
+import {computed, nextTick, reactive, ref} from "vue";
+import { QRCodeVue3 } from '/@/components/QrcodeVue3';
+import { JImageUpload } from '/@/components/Form/index';
+import image from "@/assets/images/logo.png";
+
+const uploadUrl = ref('');
+const data = reactive({
+  value: 'www.baidu.com',
+  logoImage: image,
+})
+
+// const qrCodeKey = ref(0);
+
+const qrCodeKey = computed(()=>data.value.length + data.logoImage.length);
+// console.log(qrCodeKey.value);
+
+function upFile(){
+  // console.log(data.logoImage);
+  // qrCodeKey.value = qrCodeKey.value + 1;
+  // console.log(qrCodeKey.value);
+}
+
+function changeValue(){
+  // qrCodeKey.value = qrCodeKey.value + 1;
+}
+
+</script>
+
+
+<style lang="less">
+.qrcode {
+  .form {
+    margin: 30px auto;
+    width: 86%;
+
+    input {
+      box-sizing: border-box;
+      padding: 0 10px;
+      width: 80%;
+      height: 50px;
+      font-size: 18px;
+      border: 1px solid #767676;
+      border-radius: 6px 0 0 6px;
+    }
+
+    button {
+      box-sizing: border-box;
+      position: relative;
+      width: 20%;
+      height: 50px;
+      font-size: 18px;
+      vertical-align: top;
+      color: white;
+      background: #42b983;
+      border: 1px solid #767676;
+      border-radius: 0 6px 6px 0;
+      border-left: none;
+      overflow: hidden;
+      cursor: pointer;
+
+      input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0;
+      }
+    }
+  }
+
+  .code {
+    margin: auto;
+    padding: 8px;
+    width: 360px;
+    height: 360px;
+    border-radius: 6px;
+    border: 1px solid gray;
+  }
+}
+</style>