qrcode.vue-next
Version:
[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
82 lines (81 loc) • 3.17 kB
JavaScript
import { defineComponent as T, computed as E, shallowRef as u, watchEffect as U, watch as L, createElementBlock as R, openBlock as C, Fragment as F, createElementVNode as I, createCommentVNode as N, mergeProps as O } from "vue";
import { useQRCode as V } from "./hooks/useQRCode.js";
import { DEFAULT_MINVERSION as b, DEFAULT_NEED_MARGIN as M, DEFAULT_FRONT_COLOR as k, DEFAULT_BACKGROUND_COLOR as B, DEFAULT_LEVEL as P, DEFAULT_SIZE as $, excavateModules as Q, isSupportPath2d as G, generatePath as H } from "./utils.js";
const K = ["title"], W = ["src", "crossorigin"], J = /* @__PURE__ */ T({
name: "QRCodeCanvas",
__name: "QRCodeCanvas",
props: {
size: { default: () => $ },
value: {},
level: { default: () => P },
color: {},
bgColor: { default: () => B },
fgColor: { default: () => k },
includeMargin: { type: Boolean, default: () => M },
marginSize: {},
imageSettings: {},
title: {},
minVersion: { default: () => b },
boostLevel: { type: Boolean }
},
setup(e, { expose: y }) {
const o = E(() => e.imageSettings?.src), s = u(null), m = u(null), g = u(!1), f = u();
U(() => {
const { margin: l, cells: i, numCells: c, calculatedImageSettings: t } = V({ value: e.value, level: e.level, minVersion: e.minVersion, includeMargin: e.includeMargin, marginSize: e.marginSize, imageSettings: e.imageSettings, size: e.size, boostLevel: e.boostLevel });
if (s.value != null) {
const r = s.value, a = r.getContext("2d");
if (!a)
return;
let v = i;
const n = m.value, d = g.value && t != null && n !== null && n.complete && n.naturalHeight !== 0 && n.naturalWidth !== 0;
d && t.excavation != null && (v = Q(
i,
t.excavation
));
const h = window.devicePixelRatio || 1;
r.height = r.width = e.size * h;
const S = e.size / c * h;
a.scale(S, S), a.fillStyle = e.bgColor, a.fillRect(0, 0, c, c), a.fillStyle = e.fgColor, G ? a.fill(new Path2D(H(v, l))) : i.forEach((D, w) => {
D.forEach((z, A) => {
z && a.fillRect(A + l, w + l, 1, 1);
});
}), t && (a.globalAlpha = t.opacity), d && a.drawImage(
n,
t.x + l,
t.y + l,
t.w,
t.h
), f.value = t;
}
}, { flush: "sync" }), L(o, () => {
g.value = !1;
}), L(() => e.imageSettings, () => {
console.log(e.imageSettings);
});
const x = E(() => ({ height: `${e.size}px`, width: `${e.size}px` }));
return y({
toDataURL: (l, i) => s.value?.toDataURL(l, i)
}), (l, i) => (C(), R(F, null, [
I("canvas", O({
style: x.value,
ref_key: "_canvas",
ref: s,
role: "img",
title: e.title
}, l.$attrs), null, 16, K),
o.value ? (C(), R("img", {
src: o.value,
key: o.value,
style: { display: "none" },
onLoad: i[0] || (i[0] = (c) => g.value = !0),
ref_key: "_image",
ref: m,
crossorigin: f.value?.crossOrigin,
alt: ""
}, null, 40, W)) : N("", !0)
], 64));
}
});
export {
J as default
};