@wfrog/vc/es/components/qr-code/index.mjs

`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。

// vue-script:D:\project\_my\vc\src\components\qr-code\index.vue?type=script
import { defineComponent as _defineComponent } from "vue";
import { resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue";
import { onMounted, ref } from "vue";
import { loader } from "@wfrog/utils";
var qr_code_default = /* @__PURE__ */ _defineComponent({
  __name: "index",
  props: {
    tag: { type: String, default: "canvas" },
    value: { type: String, default: "" },
    option: { type: Object, default: () => {
    } },
    width: { type: Number },
    height: { type: Number },
    margin: { type: Number, default: 1 },
    version: { type: String, default: "1.5.1" }
  },
  setup(__props) {
    const props = __props;
    const element = ref();
    const createQR = async () => {
      const QRCode = await loader.loadCdnSingle("QRCode", props.version);
      const { tag, value } = props;
      const option = { width: props.width, height: props.height, margin: props.margin, ...props.option };
      switch (tag) {
        case "canvas":
          QRCode.toCanvas(element.value, value, option, (error) => {
            if (error) {
              throw error;
            }
          });
          break;
        case "img":
          QRCode.toDataURL(value, option, (error, url) => {
            if (error) {
              throw error;
            }
            element.value.src = url;
          });
          break;
        case "svg":
          QRCode.toString(value, option, (error, string) => {
            if (error) {
              throw error;
            }
            const div = document.createElement("div");
            div.innerHTML = string;
            const svg = div.querySelector("svg");
            if (svg) {
              Object.keys(svg.attributes).forEach((key) => {
                const item = svg.attributes[key];
                element.value.setAttribute(item.name, item.value);
              });
              element.value.innerHTML = svg.innerHTML;
            }
          });
          break;
        default:
          break;
      }
    };
    onMounted(() => {
      createQR();
    });
    return (_ctx, _cache) => {
      return _openBlock(), _createBlock(_resolveDynamicComponent(__props.tag), {
        ref_key: "element",
        ref: element
      }, null, 512);
    };
  }
});

// src/components/qr-code/index.vue
var qr_code_default2 = qr_code_default;
export {
  qr_code_default2 as default
};