@tplc/wot 0.1.31 → 0.1.37

package/components/wd-qr-code/wd-qr-code.vue

@@ -1,1050 +1,18 @@
 <template>
-  <view
-    class="uqrcode"
-    :class="[{ 'uqrcode-hide': hide }, customClass]"
-    :style="{ width: `${templateOptions.width}px`, height: `${templateOptions.height}px` }"
-  >
-    <view class="uqrcode-canvas-wrapper">
-      <!-- 画布 -->
-      <!-- #ifndef APP-NVUE -->
-      <canvas
-        class="uqrcode-canvas"
-        :id="canvasId"
-        :canvas-id="canvasId"
-        :type="canvasType"
-        :style="{
-          width: `${templateOptions.canvasWidth}px`,
-          height: `${templateOptions.canvasHeight}px`,
-          transform: templateOptions.canvasTransform,
-        }"
-        v-if="templateOptions.canvasDisplay"
-        @click="onClick"
-      ></canvas>
-      <!-- #endif -->
-
-      <!-- nvue用gcanvas -->
-      <!-- #ifdef APP-NVUE -->
-      <gcanvas
-        class="uqrcode-canvas"
-        ref="gcanvas"
-        :style="{
-          width: `${templateOptions.canvasWidth}px`,
-          height: `${templateOptions.canvasHeight}px`,
-        }"
-        v-if="templateOptions.canvasDisplay"
-        @click="onClick"
-      ></gcanvas>
-      <!-- #endif -->
-    </view>
-
-    <!-- 加载效果 -->
-    <view class="uqrcode-makeing" v-if="loading === undefined ? makeing : loading">
-      <slot name="loading">
-        <image
-          class="uqrcode-makeing-image"
-          :style="{
-            width: `${templateOptions.size / 4}px`,
-            height: `${templateOptions.size / 4}px`,
-          }"
-          src="data:image/gif;base64,R0lGODlhAAEAAfIEAOHh4SSsWuDg4N3d3f///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODhGMzM4RDEwMTExRUM4MDhCRkVBQkE2QUZDQzkwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAyODhGMzM5RDEwMTExRUM4MDhCRkVBQkE2QUZDQzkwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4OEYzMzZEMTAxMTFFQzgwOEJGRUFCQTZBRkNDOTAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4OEYzMzdEMTAxMTFFQzgwOEJGRUFCQTZBRkNDOTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQ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"
-        ></image>
-      </slot>
-    </view>
-
-    <!-- 错误处理 -->
-    <view class="uqrcode-error" v-if="isError" @click="onClick">
-      <slot name="error" :error="error">
-        <text class="uqrcode-error-message">{{ error.errMsg }}</text>
-      </slot>
-    </view>
-
-    <!-- H5保存提示 -->
-    <!-- #ifdef H5 -->
-    <view class="uqrcode-h5-save" v-if="isH5Save">
-      <slot name="h5save" :tempFilePath="tempFilePath">
-        <image class="uqrcode-h5-save-image" :src="tempFilePath"></image>
-        <text class="uqrcode-h5-save-text">
-          {{ h5SaveIsDownload ? '若保存失败，' : '' }}请长按二维码进行保存
-        </text>
-      </slot>
-      <view class="uqrcode-h5-save-close" @click.stop="isH5Save = false">
-        <view class="uqrcode-h5-save-close-before"></view>
-        <view class="uqrcode-h5-save-close-after"></view>
-      </view>
-    </view>
-    <!-- #endif -->
+  <view :class="customClass">
+    <Uqrcode v-bind="$props" />
   </view>
 </template>
-<script lang="ts">
-export default {
+<script lang="ts" setup>
+import Uqrcode from './uqrcode.vue'
+import { qrCodeProps } from './types'
+defineOptions({
   name: 'wd-qr-code',
   options: {
     virtualHost: true,
     addGlobalClass: true,
     styleIsolation: 'shared',
   },
-}
-</script>
-<script lang="ts" setup>
-// #ifdef VUE3
-import { getCurrentInstance, nextTick, onMounted, ref, toRaw, watch } from 'vue'
-// #endif
-import { qrCodeProps } from './types'
-/* 引入uQRCode核心js */
-import UQRCode from './js_sdk/uqrcode/uqrcode'
-/* 引入nvue所需模块 */
-// #ifdef APP-NVUE
-// @ts-ignore
-import { enable, WeexBridge } from './js_sdk/gcanvas'
-// @ts-ignore
-const modal = weex.requireModule('modal')
-// #endif
-/* 引入队列 */
-// @ts-ignore
-import { queueDraw, queueLoadImage } from './common/queue'
-/* 引入缓存图片 */
-// @ts-ignore
-import { cacheImageList } from './common/cache'
-let instance: any = null
-const emits = defineEmits(['click', 'error', 'make', 'draw', 'save', 'complete', 'change'])
-const props = defineProps(qrCodeProps)
-const canvas = ref()
-const canvasType = ref()
-const canvasContext = ref()
-const makeDelegate = ref()
-const drawDelegate = ref()
-const toTempFilePathDelegate = ref()
-const makeExecuted = ref(false)
-const makeing = ref(false)
-const drawing = ref(false)
-const isError = ref(false)
-const error = ref()
-const isH5Save = ref(false)
-const tempFilePath = ref('')
-const gcanvas = ref()
-const templateOptions = ref({
-  size: 0,
-  width: 0, // 组件宽度
-  height: 0,
-  canvasWidth: 0, // canvas宽度
-  canvasHeight: 0,
-  canvasTransform: '',
-  canvasDisplay: false,
-})
-const uqrcodeOptions = ref({ data: '' } as any)
-const plugins = ref([] as any[])
-const makeingPattern = ref([
-  [
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-  ],
-  [
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, false, false, false],
-    [true, true, true, true, true, true, false, true, true, true],
-    [true, true, true, true, true, true, false, true, true, true],
-    [true, true, true, true, true, true, false, true, true, true],
-  ],
-  [
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, true, true, true, true, false, false, false],
-    [true, true, true, true, true, true, true, false, false, false],
-    [true, true, true, true, true, true, true, false, false, false],
-    [true, true, true, false, false, false, false, true, true, true],
-    [true, true, true, false, false, false, false, true, true, true],
-  ],
-  [
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, false, false, false, false, false, false, false],
-    [true, true, true, false, false, false, false, false, false, false],
-    [true, true, true, false, false, false, false, false, false, false],
-    [true, true, true, false, false, false, false, false, false, false],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-    [true, true, true, true, true, true, true, true, true, true],
-  ],
-])
-watch(
-  () => props.type,
-  (val) => {
-    const types = ['2d']
-    if (types.includes(val)) {
-      canvasType.value = val
-    } else {
-      canvasType.value = undefined
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-
-watch(
-  () => props.value,
-  () => {
-    if (props.auto) {
-      remake()
-    }
-  },
-)
-
-watch(
-  () => props.size,
-  () => {
-    if (props.auto) {
-      remake()
-    }
-  },
-)
-
-watch(
-  () => props.options,
-  () => {
-    if (props.auto) {
-      remake()
-    }
-  },
-  {
-    deep: true,
-  },
-)
-
-watch(
-  () => makeing.value,
-  (val) => {
-    if (!val) {
-      if (typeof toTempFilePathDelegate.value === 'function') {
-        toTempFilePathDelegate.value()
-      }
-    }
-  },
-)
-
-onMounted(() => {
-  templateOptions.value = {
-    size: props.sizeUnit === 'rpx' ? uni.upx2px(props.size) : props.size,
-    width: props.size,
-    height: props.size,
-    canvasWidth: props.size,
-    canvasHeight: props.size,
-    canvasTransform: `scale(${props.size / props.size}, ${props.size / props.size})`,
-    canvasDisplay: false,
-  }
-
-  if (canvasType.value === '2d') {
-    // #ifndef MP-WEIXIN
-    templateOptions.value.canvasTransform = `scale(${templateOptions.value.size / templateOptions.value.canvasWidth}, ${
-      templateOptions.value.size / templateOptions.value.canvasHeight
-    })`
-    // #endif
-  } else {
-    templateOptions.value.canvasTransform = `scale(${templateOptions.value.size / templateOptions.value.canvasWidth}, ${
-      templateOptions.value.size / templateOptions.value.canvasHeight
-    })`
-  }
-  if (props.start) {
-    make()
-  }
 })
-
-const getTemplateOptions = () => {
-  const size = props.sizeUnit === 'rpx' ? uni.upx2px(props.size as any) : props.size
-  return deepReplace(templateOptions.value, {
-    size,
-    width: size,
-    height: size,
-  })
-}
-
-const getUqrcodeOptions = () => {
-  return deepReplace(toRaw(props.options), {
-    data: String(props.value),
-    size: Number(templateOptions.value.size),
-  })
-}
-
-const resetCanvas = (callback) => {
-  templateOptions.value.canvasDisplay = false
-  nextTick(() => {
-    templateOptions.value.canvasDisplay = true
-    nextTick(() => {
-      callback && callback()
-    })
-  })
-}
-
-const draw = async (callback: any = {}, isDrawDelegate = false) => {
-  if (typeof callback.success !== 'function') {
-    callback.success = () => {}
-  }
-  if (typeof callback.fail !== 'function') {
-    callback.fail = () => {}
-  }
-  if (typeof callback.complete !== 'function') {
-    callback.complete = () => {}
-  }
-
-  if (drawing.value) {
-    if (!isDrawDelegate) {
-      drawDelegate.value = () => {
-        draw(callback, true)
-      }
-      return
-    }
-  } else {
-    drawing.value = true
-  }
-
-  if (!props.canvasId) {
-    console.error('[uQRCode]: canvasId must be set!')
-    isError.value = true
-    drawing.value = false
-    callback.fail({
-      errMsg: '[uQRCode]: canvasId must be set!',
-    })
-    callback.complete({
-      errMsg: '[uQRCode]: canvasId must be set!',
-    })
-    return
-  }
-  if (!props.value) {
-    console.error('[uQRCode]: value must be set!')
-    isError.value = true
-    drawing.value = false
-    callback.fail({
-      errMsg: '[uQRCode]: value must be set!',
-    })
-    callback.complete({
-      errMsg: '[uQRCode]: value must be set!',
-    })
-    return
-  }
-
-  /* 组件数据 */
-  templateOptions.value = getTemplateOptions()
-  /* uQRCode选项 */
-  uqrcodeOptions.value = getUqrcodeOptions()
-  /* 纠错等级兼容字母写法 */
-  if (typeof uqrcodeOptions.value.errorCorrectLevel === 'string') {
-    uqrcodeOptions.value.errorCorrectLevel =
-      UQRCode.errorCorrectLevel[uqrcodeOptions.value.errorCorrectLevel]
-  }
-  /* nvue不支持动态修改gcanvas尺寸，除nvue外，默认使用useDynamicSize */
-  // #ifndef APP-NVUE
-  if (typeof props.options?.useDynamicSize === 'undefined') {
-    uqrcodeOptions.value.useDynamicSize = true
-  }
-  // #endif
-  // #ifdef APP-NVUE
-  if (typeof props.options?.useDynamicSize === 'undefined') {
-    uqrcodeOptions.value.useDynamicSize = false
-  }
-  // if (typeof props.options.drawReserve === 'undefined') {
-  //   this.uqrcodeOptions.drawReserve = true;
-  // }
-  // #endif
-  /* 获取uQRCode实例 */
-  const qr = (instance = new UQRCode())
-  /* 注册扩展 */
-  plugins.value.forEach((p) => qr.register(p.plugin))
-  /* 设置uQRCode选项 */
-  qr.setOptions(uqrcodeOptions.value)
-  /* 调用制作二维码方法 */
-  qr.make()
-
-  // #ifndef APP-NVUE
-  if (canvasType.value === '2d') {
-    // #ifdef MP-WEIXIN
-    /* 微信小程序获取canvas2d上下文方式 */
-
-    canvas.value = await new Promise((resolve) => {
-      uni
-        .createSelectorQuery()
-        .in(getCurrentInstance()) // 在组件内使用需要
-        .select(`#${props.canvasId}`)
-        .fields(
-          {
-            node: true,
-            size: true,
-          },
-          (res) => {
-            resolve(res[0].node)
-          },
-        )
-        .exec((res) => {
-          resolve(res[0].node)
-        })
-    })
-
-    canvasContext.value = canvas.value.getContext('2d')
-    /* 2d的组件设置宽高与实际canvas绘制宽高不是一个，打个比方，组件size=200，canvas.width设置为100，那么绘制出来就是100=200，组件size=400，canvas.width设置为800，绘制大小还是800=400，所以无需理会下方返回的dynamicSize是多少，按dpr重新赋值给canvas即可 */
-    templateOptions.value.canvasWidth = qr.size
-    templateOptions.value.canvasHeight = qr.size
-    templateOptions.value.canvasTransform = ''
-    /* 使用dynamicSize+scale，可以解决小块间出现白线问题，dpr可以解决模糊问题 */
-    const dpr = uni.getSystemInfoSync().pixelRatio
-    canvas.value.width = qr.dynamicSize * dpr
-    canvas.value.height = qr.dynamicSize * dpr
-    canvasContext.value.scale(dpr, dpr)
-    /* 微信小程序获取图像方式 */
-    qr.loadImage = getLoadImage(function (src) {
-      /* 小程序下获取网络图片信息需先配置download域名白名单才能生效 */
-      return new Promise((resolve, reject) => {
-        const img = canvas.value.createImage()
-        img.src = src
-        img.onload = () => {
-          resolve(img)
-        }
-        img.onerror = (err) => {
-          reject(err)
-        }
-      })
-    })
-    // #endif
-    // #ifndef MP-WEIXIN
-    /* 非微信小程序不支持2d，切换回uniapp获取canvas上下文方式 */
-    const instance = getCurrentInstance()
-
-    canvasContext.value = uni.createCanvasContext(props.canvasId, instance)
-    /* 使用dynamicSize，可以解决小块间出现白线问题，再通过scale缩放至size，使其达到所设尺寸 */
-    templateOptions.value.canvasWidth = qr.dynamicSize
-    templateOptions.value.canvasHeight = qr.dynamicSize
-    templateOptions.value.canvasTransform = `scale(${templateOptions.value.size / templateOptions.value.canvasWidth}, ${
-      templateOptions.value.size / templateOptions.value.canvasHeight
-    })`
-    /* uniapp获取图像方式 */
-    qr.loadImage = getLoadImage(function (src) {
-      return new Promise((resolve, reject) => {
-        if (src.startsWith('http')) {
-          uni.getImageInfo({
-            src,
-            success: (res) => {
-              resolve(res.path)
-            },
-            fail: (err) => {
-              reject(err)
-            },
-          })
-        } else {
-          if (src.startsWith('.')) {
-            console.error('[uQRCode]: 本地图片路径仅支持绝对路径！')
-            throw new Error('[uQRCode]: local image path only supports absolute path!')
-          } else {
-            resolve(src)
-          }
-        }
-      })
-    })
-    // #endif
-  } else {
-    /* uniapp获取canvas上下文方式 */
-    canvasContext.value = uni.createCanvasContext(props.canvasId, getCurrentInstance())
-    /* 使用dynamicSize，可以解决小块间出现白线问题，再通过scale缩放至size，使其达到所设尺寸 */
-    templateOptions.value.canvasWidth = qr.dynamicSize
-    templateOptions.value.canvasHeight = qr.dynamicSize
-    templateOptions.value.canvasTransform = `scale(${templateOptions.value.size / templateOptions.value.canvasWidth}, ${
-      templateOptions.value.size / templateOptions.value.canvasHeight
-    })`
-    /* uniapp获取图像方式 */
-    qr.loadImage = getLoadImage(function (src) {
-      return new Promise((resolve, reject) => {
-        /* getImageInfo在微信小程序的bug：本地路径返回路径会把开头的/或../移除，导致路径错误，解决方法：限制只能使用绝对路径 */
-        if (src.startsWith('http')) {
-          uni.getImageInfo({
-            src,
-            success: (res) => {
-              resolve(res.path)
-            },
-            fail: (err) => {
-              reject(err)
-            },
-          })
-        } else {
-          if (src.startsWith('.')) {
-            console.error('[uQRCode]: 本地图片路径仅支持绝对路径！')
-            throw new Error('[uQRCode]: local image path only supports absolute path!')
-          } else {
-            resolve(src)
-          }
-        }
-      })
-    })
-  }
-  // #endif
-  // #ifdef APP-NVUE
-  /* NVue获取canvas上下文方式 */
-  const cCanvas = enable(gcanvas.value, {
-    bridge: WeexBridge,
-  })
-  canvasContext.value = cCanvas.getContext('2d')
-  /* NVue获取图像方式 */
-  qr.loadImage = getLoadImage(function (src) {
-    return new Promise((resolve, reject) => {
-      /* getImageInfo在nvue的bug：获取同一个路径的图片信息，同一时间第一次获取成功，后续失败，猜测是写入本地时产生文件写入冲突，所以没有返回，特别是对于网络资源 --- 已实现队列绘制，已解决此问题 */
-      if (src.startsWith('.')) {
-        console.error('[uQRCode]: 本地图片路径仅支持绝对路径！')
-        throw new Error('[uQRCode]: local image path only supports absolute path!')
-      } else {
-        uni.getImageInfo({
-          src,
-          success: (res) => {
-            resolve(res.path)
-          },
-          fail: (err) => {
-            reject(err)
-          },
-        })
-      }
-    })
-  })
-  // #endif
-  /* 设置uQRCode实例的canvas上下文 */
-  qr.canvasContext = canvasContext.value
-  /* 延时等待页面重新绘制完毕 */
-  setTimeout(() => {
-    /* 从插件获取具体要调用哪一个扩展函数 */
-    const plugin = plugins.value.find((p) => p.name === qr.style)
-    const drawCanvasName = plugin ? plugin.drawCanvas : 'drawCanvas'
-    /* 虽然qr[drawCanvasName]是直接返回Promise的，但由于js内部this指向问题，故不能直接exec(qr[drawCanvasName])此方式执行，需要改成exec(() => qr[drawCanvasName]())才能正确获取this */
-    let drawCanvas
-    if (props.queue) {
-      drawCanvas = () => queueDraw.exec(() => qr[drawCanvasName]())
-    } else {
-      drawCanvas = () => qr[drawCanvasName]()
-    }
-    /* 调用绘制方法将二维码图案绘制到canvas上 */
-    drawCanvas()
-      .then(() => {
-        if (drawDelegate.value) {
-          /* 高频重绘纠正 */
-          const delegate = drawDelegate.value
-          drawDelegate.value = undefined
-          delegate()
-        } else {
-          drawing.value = false
-          callback.success()
-        }
-      })
-      .catch((err) => {
-        console.log(err)
-        if (drawDelegate.value) {
-          /* 高频重绘纠正 */
-          const delegate = drawDelegate.value
-          drawDelegate.value = undefined
-          delegate()
-        } else {
-          drawing.value = false
-          isError.value = true
-          callback.fail(err)
-        }
-      })
-      .finally(() => {
-        callback.complete()
-      })
-  }, 300)
-}
-
-/**
- * 生成二维码
- */
-const make = (callback: any = {}) => {
-  makeExecuted.value = true
-  makeing.value = true
-  isError.value = false
-
-  if (typeof callback.success !== 'function') {
-    callback.success = () => {}
-  }
-  if (typeof callback.fail !== 'function') {
-    callback.fail = () => {}
-  }
-  if (typeof callback.complete !== 'function') {
-    callback.complete = () => {}
-  }
-
-  resetCanvas(() => {
-    clearTimeout(makeDelegate.value)
-    makeDelegate.value = setTimeout(() => {
-      draw({
-        success: () => {
-          setTimeout(() => {
-            callback.success()
-            complete(true)
-          }, 300)
-        },
-        fail: (err) => {
-          callback.fail(err)
-          error.value = err
-          complete(false, err.errMsg)
-        },
-        complete: () => {
-          callback.complete()
-          makeing.value = false
-        },
-      })
-    }, 300)
-  })
-}
-
-/**
- * 重新生成
- */
-const remake = (callback: any = {}) => {
-  emits('change')
-  make(callback)
-}
-
-/**
- * 生成完成
- */
-
-const complete = (success = true, errMsg = '') => {
-  if (success) {
-    emits('complete', {
-      success,
-    })
-  } else {
-    emits('complete', {
-      success,
-      errMsg,
-    })
-  }
-}
-
-/**
- * 导出临时路径
- */
-const toTempFilePath = (callback: any = {}) => {
-  if (typeof callback.success !== 'function') {
-    callback.success = () => {}
-  }
-  if (typeof callback.fail !== 'function') {
-    callback.fail = () => {}
-  }
-  if (typeof callback.complete !== 'function') {
-    callback.complete = () => {}
-  }
-
-  if (!makeExecuted.value) {
-    console.error('[uQRCode]: make() 方法从未调用！请先成功调用 make() 后再进行操作。')
-    const err = {
-      errMsg:
-        '[uQRCode]: make() method has never been executed! please execute make() successfully before operating.',
-    }
-    callback.fail(err)
-    callback.complete(err)
-    return
-  }
-
-  if (isError.value) {
-    callback.fail(error.value)
-    callback.complete(error.value)
-    return
-  }
-
-  if (makeing.value) {
-    /* 如果还在生成状态，那当前操作将托管到委托，监听生成完成后再通过委托复调当前方法 */
-    toTempFilePathDelegate.value = () => {
-      toTempFilePath(callback)
-    }
-    return
-  } else {
-    toTempFilePathDelegate.value = null
-  }
-
-  // #ifndef APP-NVUE
-  if (canvasType.value === '2d') {
-    // #ifdef MP-WEIXIN
-    try {
-      let dataURL = null
-      // #ifdef VUE3
-      dataURL = toRaw(canvas.value).toDataURL()
-      // #endif
-      // #ifndef VUE3
-      dataURL = canvas.value.toDataURL()
-      // #endif
-      callback.success({
-        tempFilePath: dataURL,
-      })
-      callback.complete({
-        tempFilePath: dataURL,
-      })
-    } catch (e) {
-      callback.fail(e)
-      callback.complete(e)
-    }
-    // #endif
-  } else {
-    const instance = getCurrentInstance()
-    uni.canvasToTempFilePath(
-      {
-        canvasId: props.canvasId,
-        fileType: props.fileType,
-        width: Number(templateOptions.value.canvasWidth),
-        height: Number(templateOptions.value.canvasHeight),
-        destWidth: Number(templateOptions.value.size),
-        destHeight: Number(templateOptions.value.size),
-        success: (res) => {
-          callback.success(res)
-        },
-        fail: (err) => {
-          callback.fail(err)
-        },
-        complete: () => {
-          callback.complete()
-        },
-      },
-      instance,
-    )
-  }
-  // #endif
-  // #ifdef APP-NVUE
-  const dpr = uni.getSystemInfoSync().pixelRatio
-  canvasContext.value.toTempFilePath(
-    0,
-    0,
-    templateOptions.value.canvasWidth * dpr,
-    templateOptions.value.canvasHeight * dpr,
-    templateOptions.value.size * dpr,
-    templateOptions.value.size * dpr,
-    '',
-    1,
-    (res) => {
-      callback.success(res)
-      callback.complete(res)
-    },
-  )
-  // #endif
-}
-/**
- * 保存
- */
-const save = (callback: any = {}) => {
-  if (typeof callback.success !== 'function') {
-    callback.success = () => {}
-  }
-  if (typeof callback.fail !== 'function') {
-    callback.fail = () => {}
-  }
-  if (typeof callback.complete !== 'function') {
-    callback.complete = () => {}
-  }
-
-  toTempFilePath({
-    success: (res) => {
-      // #ifndef H5
-      if (canvasType.value === '2d') {
-        // #ifdef MP-WEIXIN
-        /* 需要将 data:image/png;base64, 这段去除 writeFile 才能正常打开文件，否则是损坏文件，无法打开 */
-        const reg = /^data:image\/png;base64,/g
-        const dataURL = res.tempFilePath.replace(reg, '')
-        const fs = wx.getFileSystemManager()
-        const tempFilePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}${
-          Math.random().toString().split('.')[1]
-        }.png`
-        fs.writeFile({
-          filePath: tempFilePath, // 要写入的文件路径 (本地路径)
-          data: dataURL, // base64图片
-          encoding: 'base64',
-          success: (res1) => {
-            uni.saveImageToPhotosAlbum({
-              filePath: tempFilePath,
-              success: (res2) => {
-                callback.success(res2)
-              },
-              fail: (err2) => {
-                callback.fail(err2)
-              },
-              complete: () => {
-                callback.complete()
-              },
-            })
-          },
-          fail: (err) => {
-            callback.fail(err)
-          },
-          complete: () => {
-            callback.complete()
-          },
-        })
-        // #endif
-      } else {
-        uni.saveImageToPhotosAlbum({
-          filePath: res.tempFilePath,
-          success: (res1) => {
-            callback.success(res1)
-          },
-          fail: (err1) => {
-            callback.fail(err1)
-          },
-          complete: () => {
-            callback.complete()
-          },
-        })
-      }
-      // #endif
-
-      // #ifdef H5
-      /* 可以在电脑浏览器下载，移动端iOS不行，安卓微信浏览器不行，安卓外部浏览器可以 */
-      isH5Save.value = true
-      tempFilePath.value = res.tempFilePath
-      if (props.h5SaveIsDownload) {
-        const aEle = document.createElement('a')
-        aEle.download = props.h5DownloadName // 设置下载的文件名，默认是'下载'
-        aEle.href = res.tempFilePath
-        document.body.appendChild(aEle)
-        aEle.click()
-        aEle.remove() // 下载之后把创建的元素删除
-      }
-      callback.success({
-        errMsg: 'ok',
-      })
-      callback.complete({
-        errMsg: 'ok',
-      })
-      // #endif
-    },
-    fail: (err) => {
-      callback.fail(err)
-      callback.complete(err)
-    },
-  })
-}
-/**
- * 注册click事件
- */
-const onClick = (e) => {
-  emits('click', e)
-}
-/**
- * 获取实例
- */
-const getInstance = () => {
-  return instance
-}
-/**
- * 注册扩展，组件仅支持注册type为style的drawCanvas扩展
- * @param {Object} plugin
- */
-const registerStyle = (plugin: any) => {
-  if (plugin.Type !== 'style') {
-    console.warn('[uQRCode]: registerStyle 仅支持注册 style 类型的扩展！')
-    return {
-      errMsg: 'registerStyle 仅支持注册 style 类型的扩展！',
-    }
-  }
-  if (typeof plugin === 'function') {
-    plugins.value.push({
-      plugin,
-      name: plugin.Name,
-      drawCanvas: plugin.DrawCanvas,
-    })
-  }
-}
-const getLoadImage = (loadImage: any) => {
-  if (typeof loadImage === 'function') {
-    return function (src) {
-      /* 判断是否是队列加载图片的 */
-      if (props.isQueueLoadImage) {
-        /* 解决iOS APP||NVUE同时绘制多个二维码导致图片丢失需使用队列 */
-        return queueLoadImage.exec(() => {
-          return new Promise((resolve, reject) => {
-            setTimeout(() => {
-              const cache = cacheImageList.find((x) => x.src === src)
-              if (cache) {
-                resolve(cache.img)
-              } else {
-                loadImage(src)
-                  .then((img) => {
-                    cacheImageList.push({
-                      src,
-                      img,
-                    })
-                    resolve(img)
-                  })
-                  .catch((err) => {
-                    reject(err)
-                  })
-              }
-            }, 10)
-          })
-        })
-      } else {
-        return loadImage(src)
-      }
-    }
-  } else {
-    return function (src) {
-      return Promise.resolve(src)
-    }
-  }
-}
-
-/**
- * 对象属性深度替换
- * @param {Object} o 原始对象/默认对象/被替换的对象
- * @param {Object} r 从这个对象里取值替换到o对象里
- * @return {Object} 替换后的新对象
- */
-function deepReplace(o = {}, r = {}, c = false) {
-  let obj
-  if (c) {
-    // 从源替换
-    obj = o
-  } else {
-    // 不替换源，copy一份备份来替换
-    obj = {
-      ...o,
-    }
-  }
-  for (const k in r) {
-    const vr = r[k]
-    if (vr !== undefined) {
-      if (vr.constructor === Object) {
-        obj[k] = deepReplace(obj[k], vr)
-      } else if (vr.constructor === String && !vr) {
-        // @ts-ignore
-        // eslint-disable-next-line no-self-assign
-        obj[k] = obj[k]
-      } else {
-        obj[k] = vr
-      }
-    }
-  }
-  return obj
-}
+defineProps(qrCodeProps)
 </script>
-
-<style scoped>
-.uqrcode {
-  position: relative;
-}
-
-.uqrcode-hide {
-  position: fixed;
-  left: 7500rpx;
-}
-
-.uqrcode-canvas {
-  transform-origin: top left;
-}
-
-.uqrcode-makeing {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  justify-content: center;
-  align-items: center;
-}
-
-.uqrcode-makeing-image {
-  /* #ifndef APP-NVUE */
-  display: block;
-  max-width: 120px;
-  max-height: 120px;
-  /* #endif */
-}
-
-.uqrcode-error {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  justify-content: center;
-  align-items: center;
-}
-
-.uqrcode-error-message {
-  font-size: 12px;
-  color: #939291;
-}
-
-/* #ifdef H5 */
-.uqrcode-h5-save {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100;
-  background-color: rgba(0, 0, 0, 0.68);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.uqrcode-h5-save-image {
-  width: 512rpx;
-  height: 512rpx;
-  padding: 32rpx;
-}
-
-.uqrcode-h5-save-text {
-  margin-top: 20rpx;
-  font-size: 32rpx;
-  font-weight: 700;
-  color: #ffffff;
-}
-
-.uqrcode-h5-save-close {
-  position: relative;
-  margin-top: 72rpx;
-  width: 60rpx;
-  height: 60rpx;
-  border: 2rpx solid #ffffff;
-  border-radius: 60rpx;
-  padding: 10rpx;
-}
-
-.uqrcode-h5-save-close-before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  width: 40rpx;
-  height: 4rpx;
-  background: #ffffff;
-}
-
-.uqrcode-h5-save-close-after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(-45deg);
-  width: 40rpx;
-  height: 4rpx;
-  background: #ffffff;
-}
-
-/* #endif */
-</style>