ci-plus 1.2.5 → 1.2.7

package/src/identificationCard/qrcode.ts

@@ -0,0 +1,4 @@
+import _CiQrcode from './qrcode.vue'
+import { withInstall } from '../utils/index';
+export const CiQrcode = withInstall(_CiQrcode)
+export default CiQrcode

package/src/identificationCard/qrcode.vue

@@ -0,0 +1,72 @@
+<template>
+  <canvas ref="qrcode"></canvas>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'ci-qrcode' })
+import { ref, onMounted, defineProps, PropType } from 'vue'
+import QRCode from 'qrcode'
+// 用于遮罩符号的遮罩图案。 可能的值为0、1、2、3、4、5、6、7。
+type MaskPattern = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
+
+const props = defineProps({
+  // 二维码内容
+  codeValue: {
+    type: String,
+    default: ''
+  },
+  // 二维码宽高
+  width: {
+    type: Number,
+    default: 100
+  },
+  // 二维码边框白色区域宽度。
+  margin: {
+    type: Number,
+    default: 1
+  },
+  scale: {
+    type: Number,
+    default: 4
+  },
+  // 二维码颜色
+  color: {
+    type: Object,
+    default: () => {
+      return {
+        dark: '#000000', // 黑色
+        light: '#ffffff' // 白色
+      }
+    }
+  },
+  // 用于遮罩符号的遮罩图案。 可能的值为0、1、2、3、4、5、6、7。
+  maskPattern: {
+    type: Number as PropType<MaskPattern>,
+    default: 1
+  }
+})
+const qrcode = ref(null)
+onMounted(() => {
+  render()
+})
+const render = () => {
+  QRCode.toCanvas(
+    qrcode.value,
+    props.codeValue,
+    {
+      version: 1.0,
+      errorCorrectionLevel: 'M',
+      maskPattern: props.maskPattern, //用于遮罩符号的遮罩图案。 可能的值为0、1、2、3、4、5、6、7。
+      margin: props.margin, //定义二维码边框白色区域宽度。
+      scale: props.scale, //比例因子。值1表示每个模块1px（黑点）。
+      small: false, //输出较小的二维码。仅与终端渲染器相关。
+      width: props.width, //宽高
+      color: props.color // 二维码颜色
+    },
+    (error) => {
+      if (error) {
+        console.log(error)
+      }
+    }
+  )
+}
+</script>

package/src/index.ts

@@ -11,7 +11,8 @@ export * from './sortableTable/index/sortableTable'; // 导出排序表格
 export * from './sortableTable/index/sortableTableDialog'; // 导出表排序组件
 export * from './sortableTable/index/sortableTableColumnCell'; // 导出表列组件
 
-export * from './identificationCard'; // 导出标识卡模板组件
+export * from './identificationCard'; // 导出标识卡条形码模板组件
+export * from './identificationCard/qrcode'; // 导出标识卡二维码模板组件
 
 export * from './fileRelated/index/ciseeFile'; // 导出附件查看组件
 export * from './fileRelated/index/ciupload'; // 导出附件上传组件