@wfrog/vc
Version:
vue3 组件库 vc
70 lines (67 loc) • 2.16 kB
JavaScript
import { defineComponent, useTemplateRef, onMounted, createBlock, openBlock, resolveDynamicComponent } from 'vue';
import { i as index } from '../../chunk/BdDihk0t.mjs';
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "qr-code",
props: {
tag: { default: "canvas" },
value: { default: "" },
option: { default: () => ({}) },
width: { default: 128 },
height: { default: 128 },
margin: { default: 1 },
version: { default: "1.5.1" }
},
setup(__props) {
const props = __props;
const elementRef = useTemplateRef("elementRef");
async function createQR() {
const QRCode = await index.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(elementRef.value, value, option, (error) => {
if (error) {
throw error;
}
});
break;
case "img":
QRCode.toDataURL(value, option, (error, url) => {
if (error) {
throw error;
}
elementRef.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];
elementRef.value.setAttribute(item.name, item.value);
});
elementRef.value.innerHTML = svg.innerHTML;
}
});
break;
}
}
onMounted(() => {
createQR();
});
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
ref_key: "elementRef",
ref: elementRef
}, null, 512);
};
}
});
export { _sfc_main as _ };