cus-scrollbar/dist/cus-scrollbar.es.js

适用于vue3的组件CusScrollbar

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".cus-scrollbar[data-v-fce116ce]{position:relative}.cus-scrollbar__wrapper[data-v-fce116ce]{height:100%;width:100%;overflow:auto;scrollbar-width:none}.cus-scrollbar__wrapper[data-v-fce116ce]::-webkit-scrollbar{width:0}.native-scrollbar__wrapper[data-v-fce116ce]{height:100%;width:100%;overflow:auto}.cus-scrollbar__bar[data-v-fce116ce]{position:absolute;opacity:0;background-color:#0000;transition:all .3s ease;user-select:none;-webkit-user-select:none;-moz-user-select:none;transition:all .3s}.cus-scrollbar__bar.is-vertical[data-v-fce116ce]{width:6px;height:100%;right:0;top:0;z-index:999}.cus-scrollbar__bar.is-horizontal[data-v-fce116ce]{width:100%;height:6px;bottom:0;left:0;z-index:999}.cus-scrollbar__thumb[data-v-fce116ce]{position:relative;display:block;width:0;height:0;border-radius:inherit;background-color:#909399;opacity:.3;cursor:pointer}.is-round[data-v-fce116ce],.is-round[data-v-fce116ce]:after,.is-round[data-v-fce116ce]:before{border-radius:9999px!important}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { defineComponent as J, ref as y, openBlock as P, createElementBlock as N, normalizeClass as q, createElementVNode as x, renderSlot as V, Fragment as j, createCommentVNode as A } from "vue";
import { useEventListener as g, unrefElement as t, useResizeObserver as D, useMutationObserver as G } from "@vueuse/core";
const F = (s) => typeof s == "number", K = {
  /**
   * @description 视口大小是否不再改变
   */
  noResize: Boolean,
  /**
   * @description 滚动条是否始终显示
   */
  always: Boolean,
  /**
   * @description 是否使用原生滚动条
   */
  native: Boolean,
  /**
   * @description 滚动条是否显示在视口外面
   */
  isOutside: Boolean,
  /**
   * @description 是否点击开启跳转
   */
  quickJump: {
    type: Boolean,
    default: !0
  },
  /**
   * @description 滚动条高度/厚度
   */
  barWidth: {
    type: String,
    default: "6px"
  }
}, Q = {
  scroll: (s, f) => F(s) && F(f)
}, U = /* @__PURE__ */ J({
  name: "CusScrollbar",
  __name: "cus-scrollbar",
  props: { ...K },
  emits: { ...Q },
  setup(s, { emit: f }) {
    const o = s, $ = f, W = y(), r = y(), _ = y(), h = y(), E = y(), b = y();
    let p;
    const i = {
      x: 0,
      y: 0
    }, X = {
      x: 0,
      y: 0
    }, Y = {
      x: 0,
      y: 0
    }, H = {
      x: 0,
      y: 0
    }, k = y(!1), C = y(!1);
    o.native || (g(W, "mouseenter", () => {
      C.value = !0, B(), M();
    }), g(W, "mouseleave", () => {
      if (!o.always) {
        if (k.value)
          return;
        C.value = !1, t(h).style.opacity = "0", t(b).style.opacity = "0";
      }
    })), o.noResize || D(r, () => {
      B(), M();
    }), G(
      r,
      () => {
        B(), M();
      },
      {
        attributes: !0,
        childList: !0,
        subtree: !0
      }
    ), g(_, "mousedown", (e) => {
      k.value = !0, X.y = e.clientY, H.y = t(r).scrollTop, p = "thumbY", t(document.body).addEventListener("mousemove", R);
    }), g(E, "mousedown", (e) => {
      e.stopPropagation(), k.value = !0, X.x = e.clientX, H.x = t(r).scrollLeft, p = "thumbX", t(document.body).addEventListener("mousemove", R);
    }), g(document.body, "mouseup", (e) => {
      e.stopPropagation(), k.value = !1, t(document.body).removeEventListener("mousemove", R);
      const l = r.value.getBoundingClientRect();
      o.always || (e.clientX < 0 || e.clientY < 0 || e.clientX < l.left || e.clientX > l.right || e.clientY < l.top || e.clientY > l.bottom) && (t(h).style.opacity = "0", t(b).style.opacity = "0");
    });
    const M = () => {
      if (o.native)
        return;
      const e = t(r), l = t(h), n = t(b), c = t(_), a = t(E), {
        scrollHeight: u,
        scrollWidth: m,
        offsetHeight: d,
        offsetWidth: v
      } = e;
      o.always ? (m > v && (n.style.opacity = "1"), u > d && (l.style.opacity = "1")) : (m > v && C.value && (n.style.opacity = "1"), u > d && C.value && (l.style.opacity = "1")), o.isOutside && (t(b).style.bottom = `-${o.barWidth}`, t(h).style.right = `-${o.barWidth}`), t(b).style.height = o.barWidth, t(h).style.width = o.barWidth;
      const w = l.offsetHeight, L = n.offsetWidth, O = d * w / u, S = v * L / m;
      O === w ? c.style.opacity = "0" : (c.style.opacity = "0.3", c.style.width = o.barWidth, c.style.height = `${O}px`), S === L ? a.style.opacity = "0" : (a.style.opacity = "0.3", a.style.height = o.barWidth, a.style.width = `${S}px`);
    }, B = () => {
      if (o.native)
        return;
      const e = t(r), l = t(h), n = t(b), c = t(_), a = t(E), {
        scrollHeight: u,
        scrollWidth: m,
        scrollTop: d,
        scrollLeft: v
      } = e, w = l.offsetHeight, L = n.offsetWidth, O = d * w / u, S = v * L / m;
      c.style.top = `${O}px`, a.style.left = `${S}px`;
    };
    g(r, "scroll", () => {
      const e = t(r);
      B(), $("scroll", e.scrollLeft, e.scrollTop);
    }), o.quickJump && (g(h, "click", (e) => {
      p = "thumbY", z(e);
    }), g(b, "click", (e) => {
      p = "thumbX", z(e);
    }));
    const R = (e) => {
      Y.x = e.clientX, Y.y = e.clientY, i.x = Y.x - X.x, i.y = Y.y - X.y;
      const l = t(r), n = t(h), c = t(b), a = l.scrollHeight, u = l.scrollWidth, m = n.offsetHeight, d = c.offsetWidth;
      p === "thumbY" ? t(r).scrollTop = a * i.y / m + H.y : p === "thumbX" && (t(r).scrollLeft = u * i.x / d + H.x);
    }, z = (e) => {
      if (e.target !== e.currentTarget)
        return;
      e.stopPropagation();
      const l = t(r), n = t(h), c = t(_), a = t(E), u = t(b), m = l.scrollHeight, d = l.scrollWidth, v = n.offsetHeight, w = u.offsetWidth;
      i.y = e.clientY - n.getBoundingClientRect().top - c.offsetHeight / 2, i.x = e.clientX - u.getBoundingClientRect().left - a.offsetWidth / 2, i.y = Math.min(Math.max(0, i.y), n.offsetHeight - c.offsetHeight), i.x = Math.min(Math.max(0, i.x), u.offsetWidth - a.offsetWidth), p === "thumbY" ? t(r).scrollTo({
        top: m * i.y / v,
        behavior: "smooth"
      }) : p === "thumbX" && t(r).scrollTo({
        left: d * i.x / w,
        behavior: "smooth"
      });
    };
    return (e, l) => (P(), N("div", {
      ref_key: "scrollContainer",
      ref: W,
      class: q(o.native ? "native-scrollbar" : "cus-scrollbar")
    }, [
      x("div", {
        ref_key: "wrap",
        ref: r,
        class: q(o.native ? "native-scrollbar__wrapper" : "cus-scrollbar__wrapper")
      }, [
        V(e.$slots, "default", {}, void 0, !0)
      ], 2),
      o.native ? A("", !0) : (P(), N(j, { key: 0 }, [
        x("div", {
          ref_key: "barY",
          ref: h,
          class: "cus-scrollbar__bar is-vertical"
        }, [
          x("div", {
            ref_key: "thumbY",
            ref: _,
            class: "cus-scrollbar__thumb is-round"
          }, null, 512)
        ], 512),
        x("div", {
          ref_key: "barX",
          ref: b,
          class: "cus-scrollbar__bar is-horizontal"
        }, [
          x("div", {
            ref_key: "thumbX",
            ref: E,
            class: "cus-scrollbar__thumb is-round"
          }, null, 512)
        ], 512)
      ], 64))
    ], 2));
  }
}), Z = (s, f) => {
  const o = s.__vccOpts || s;
  for (const [$, W] of f)
    o[$] = W;
  return o;
}, T = /* @__PURE__ */ Z(U, [["__scopeId", "data-v-fce116ce"]]), tt = function(s) {
  return s.install = function(f) {
    f.component(s.name) || f.component(s.name, s);
  }, s;
};
T.install = function(s) {
  s.component("CusScrollbar", T);
};
const et = tt(T), I = {
  CusScrollbar: et
};
function ot(s) {
  for (const f in I) {
    const o = Reflect.get(I, f);
    s.use(o);
  }
}
T.install = function(s) {
  ot(s);
};
export {
  T as default
};