t-fighting-design/es/watermark/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as a, ref as i, onMounted as c, openBlock as p, createElementBlock as u, normalizeClass as k, normalizeStyle as d, renderSlot as f } from "vue";
import { Props as g } from "./index3.js";
import { createWatermark as h } from "../../_utils/index6.js";
import { useFilterProps as w } from "../../_hooks/use-filter-props/index.js";
import "../../_hooks/use-message/index.js";
import "../../loading-bar/src/index2.js";
const _ = a({
  name: "FWatermark"
}), v = /* @__PURE__ */ a({
  ..._,
  props: g,
  setup(n) {
    const r = n, o = i(
      null
    ), m = () => {
      const e = w(r, [
        "content",
        "width",
        "height",
        "fontSize",
        "fontColor"
      ]);
      return {
        backgroundImage: `url(${h(e)})`
      };
    }, s = () => {
      const { image: e, width: t, height: l } = r;
      return {
        backgroundImage: `url(${e})`,
        backgroundSize: `${t}px ${l}px`
      };
    };
    return c(() => {
      o.value = r.image ? s() : m();
    }), (e, t) => (p(), u("div", {
      class: k(["f-watermark", { "f-watermark__block": e.block }]),
      style: d([o.value, { zIndex: e.zIndex }])
    }, [
      f(e.$slots, "default")
    ], 6));
  }
});
export {
  v as default
};