vue-amazing-ui/es/qrcode/QRCode.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as C, ref as s, computed as u, watch as p, createElementBlock as t, openBlock as r, normalizeStyle as f, normalizeClass as q, createCommentVNode as c } from "vue";
import n from "qrcode";
const h = ["src"], b = ["src"], z = /* @__PURE__ */ C({
  __name: "QRCode",
  props: {
    value: { default: void 0 },
    type: { default: "svg" },
    icon: { default: void 0 },
    size: { default: 160 },
    iconSize: { default: 40 },
    color: { default: "#000" },
    bgColor: { default: "#FFF" },
    bordered: { type: Boolean, default: !0 },
    borderColor: { default: "rgba(5, 5, 5, 0.06)" },
    scale: { default: 8 },
    errorLevel: { default: "H" }
  },
  setup(o, { expose: y }) {
    const e = o, d = s(null), i = s(null), a = s(""), g = u(() => ({
      width: `${e.size}px`,
      height: `${e.size}px`,
      backgroundColor: `${e.bgColor}`,
      borderColor: `${e.borderColor}`
    })), m = u(() => ({
      width: `${e.iconSize}px`,
      height: `${e.iconSize}px`,
      backgroundColor: `${e.bgColor}`
    })), l = u(() => ({
      quality: 1,
      // number 默认 0.92, 0 <= quality <= 1 仅在 type 为 'image/jpeg' 或 'image/webp' 时有效
      margin: 0,
      // number 默认 4, 边距大小，单位 px
      scale: e.scale,
      // number，默认 4, 缩放因子，A value of 1 means 1px per modules (black dots).
      color: {
        dark: e.color,
        // 像素点颜色
        light: "#00000000"
        // 背景色
      },
      errorCorrectionLevel: e.errorLevel
    }));
    return p(
      () => [e.value, e.type, l.value],
      async () => {
        e.value && (e.type === "svg" ? (a.value = await n.toString(e.value, l.value), d.value.innerHTML = a.value) : e.type === "canvas" ? (a.value = await n.toCanvas(e.value, l.value), i.value?.appendChild(a.value)) : a.value = await n.toDataURL(e.value, l.value));
      },
      {
        immediate: !0,
        deep: !0,
        flush: "post"
      }
    ), y({
      getQRCodeImage: () => e.value && n.toDataURL(e.value, l.value)
    }), (v, k) => (r(), t("div", {
      class: q(["qrcode-wrap", { "qrcode-bordered": o.bordered }]),
      style: f(g.value)
    }, [
      o.type === "svg" ? (r(), t("span", {
        key: 0,
        ref_key: "qrcodeSVGRef",
        ref: d,
        class: "qrcode-svg"
      }, null, 512)) : c("", !0),
      o.type === "canvas" ? (r(), t("span", {
        key: 1,
        ref_key: "qrcodeCanvasRef",
        ref: i,
        class: "qrcode-canvas"
      }, null, 512)) : c("", !0),
      o.type === "image" ? (r(), t("img", {
        key: 2,
        src: a.value,
        class: "qrcode-image",
        alt: "QR Code"
      }, null, 8, h)) : c("", !0),
      o.icon ? (r(), t("img", {
        key: 3,
        src: o.icon,
        style: f(m.value),
        class: "qrcode-icon",
        alt: "QR Code Icon"
      }, null, 12, b)) : c("", !0)
    ], 6));
  }
});
export {
  z as default
};