qrcode.vue-next/es/components/qrcode/QRCode.vue.js

[qrcode.react](https://github.com/zpao/qrcode.react)的vue版本实现，最开始是[ant-design-vue](https://www.antdv.com)在QRCode组件中完成迁移，此仓库将其剥离出来，不是重复造轮子，而是满足在有使用二维码场景但组件库选型不是ant-design-vue的情况下，能够使用到[qrcode.react](https://github.com/zpao/qrcode.react)这一业界优秀实现，感谢qrcode.rea

import { defineComponent as y, ref as c, useAttrs as h, computed as u, createElementBlock as o, openBlock as t, normalizeStyle as S, normalizeClass as z, createCommentVNode as i, createBlock as d, renderSlot as b, normalizeProps as R, guardReactiveProps as C, mergeProps as g } from "vue";
import k from "./QRCodeCanvas.vue.js";
import x from "./QRCodeSVG.vue.js";
const L = {
  key: 0,
  class: "qrcodeMask"
}, w = {
  key: 0,
  class: "qrcodeExpired"
}, B = { key: 1 }, q = {
  key: 2,
  class: "qrcodeScanned`"
}, D = /* @__PURE__ */ y({
  name: "QRCode",
  __name: "QRCode",
  props: {
    type: { default: "canvas" },
    errorLevel: { default: "M" },
    icon: {},
    iconSize: {},
    iconSettings: {},
    status: { default: "active" },
    bordered: { type: Boolean, default: !0 },
    onChange: { type: Function },
    onRefresh: { type: Function },
    size: { default: 160 },
    value: {},
    level: {},
    color: { default: "rgba(0, 0, 0, 0.88)" },
    bgColor: { default: "transparent" },
    fgColor: {},
    includeMargin: { type: Boolean },
    marginSize: {},
    imageSettings: {},
    title: {},
    minVersion: {},
    boostLevel: { type: Boolean }
  },
  emits: ["refresh", "change"],
  setup(e, { expose: f }) {
    const l = c(null), r = c(null);
    f({
      toDataURL: () => {
        if (e.type === "canvas")
          return l.value?.toDataURL();
        {
          const n = new XMLSerializer().serializeToString(r.value?.$el), a = new Blob([n], { type: "image/svg+xml;charset=utf-8" });
          return URL.createObjectURL(a);
        }
      }
    });
    const m = h(), s = u(() => {
      const n = m.style, a = {
        src: e.icon,
        x: void 0,
        y: void 0,
        height: typeof e.iconSize == "number" ? e.iconSize : e.iconSize?.height ?? 40,
        width: typeof e.iconSize == "number" ? e.iconSize : e.iconSize?.width ?? 40,
        excavate: !0,
        crossOrigin: "anonymous",
        ...e.iconSettings
      };
      return {
        value: e.value,
        size: e.size,
        level: e.errorLevel,
        bgColor: e.bgColor,
        fgColor: e.color,
        style: { width: n?.width, height: n?.height },
        imageSettings: e.icon ? a : void 0,
        title: e.title
      };
    }), v = u(() => ({
      width: `${e.size}px`,
      height: `${e.size}px`,
      backgroundColor: e.bgColor
    }));
    return (n, a) => (t(), o("div", {
      class: z(["qrcode", { "qrcode-borderless": !e.bordered }]),
      style: S(v.value)
    }, [
      e.status !== "active" ? (t(), o("div", L, [
        b(n.$slots, "statusRender", R(C({ status: e.status, onRefresh: e.onRefresh })), () => [
          e.status === "expired" ? (t(), o("p", w, " 已过期 ")) : e.status === "loading" ? (t(), o("p", B, "加载中...")) : e.status === "scanned" ? (t(), o("p", q, " 已扫描 ")) : i("", !0)
        ])
      ])) : i("", !0),
      e.type === "canvas" ? (t(), d(k, g({
        key: 1,
        ref_key: "canvasRef",
        ref: l
      }, s.value), null, 16)) : e.type === "svg" ? (t(), d(x, g({
        key: 2,
        ref_key: "svgRef",
        ref: r
      }, s.value), null, 16)) : i("", !0)
    ], 6));
  }
});
export {
  D as default
};