comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
45 lines (44 loc) • 1.3 kB
JavaScript
import { onMounted, onUnmounted } from "vue";
function reRendering(mutation, watermarkElement) {
let flag = false;
if (mutation.removedNodes.length) {
flag = Array.from(mutation.removedNodes).some((node) => node === watermarkElement);
}
if (mutation.type === "attributes" && mutation.target === watermarkElement) {
flag = true;
}
return flag;
}
const toLowercaseSeparator = (key) => key.replace(/([A-Z])/g, "-$1").toLowerCase();
const getStyleStr = (style) => Object.keys(style).map((key) => `${toLowercaseSeparator(key)}: ${style[key]};`).join(" ");
const getPixelRatio = () => window.devicePixelRatio || 1;
const useMutationObserver = (target, callback, options) => {
var ob;
function createObserver() {
const isSupported = typeof MutationObserver !== "undefined";
if (!isSupported) return false;
ob = new MutationObserver(onMutate);
ob.observe(target.value, options);
}
function onMutate(records) {
records.forEach((mutation) => {
if (!reRendering(mutation, target.value)) return;
callback();
});
}
function disconnect() {
ob.disconnect();
ob = null;
}
onMounted(() => {
createObserver();
});
onUnmounted(() => {
disconnect();
});
};
export {
getPixelRatio,
getStyleStr,
useMutationObserver
};