t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
65 lines (64 loc) • 1.77 kB
JavaScript
import { defineComponent as i, ref as f, onMounted as m, computed as b, withDirectives as k, openBlock as h, createElementBlock as v, normalizeClass as _, normalizeStyle as E, unref as g, withModifiers as C, renderSlot as S, vShow as w } from "vue";
import { Props as y } from "./index3.js";
import { sizeChange as s, debounce as z } from "../../_utils/index3.js";
const T = ["onClick"], B = i({
name: "FBackTop"
}), x = /* @__PURE__ */ i({
...B,
props: y,
setup(d) {
const t = d, l = f(!1), r = (o) => z(() => {
const e = (o || document.documentElement).scrollTop;
l.value = e > t.visibleHeight;
}, 200), a = () => {
const { top: o, behavior: e, listenEl: n } = t;
if (n) {
document.querySelector(
n
).scrollTo({
top: o,
behavior: e
});
return;
}
window.scrollTo({
top: o,
behavior: e
});
};
m(() => {
if (t.listenEl) {
const o = document.querySelector(
t.listenEl
);
o.addEventListener(
"scroll",
r(o)
);
}
document.addEventListener("scroll", r(null));
});
const u = b(() => {
const { right: o, bottom: e, zIndex: n, background: c, color: p } = t;
return {
"--f-back-top-right": s(o),
"--f-back-top-bottom": s(e),
"--f-back-top-z-index": n,
"--f-back-top-background": c,
"--f-back-top-color": p
};
});
return (o, e) => k((h(), v("div", {
class: _(["f-back-top", { "f-back-top__round": o.round }]),
style: E(g(u)),
onClick: C(a, ["stop"])
}, [
S(o.$slots, "default")
], 14, T)), [
[w, l.value]
]);
}
});
export {
x as default
};