notice-bar-vue/dist/notice-bar-vue.es.js

基于Vue3的无线滚动通知栏组件

import './index.css';
import { defineComponent as p, ref as o, onMounted as g, createVNode as r, Fragment as w } from "vue";
const u = /* @__PURE__ */ p({
  name: "NoticeBar",
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "200px"
    },
    direction: {
      type: String,
      default: "row"
    }
  },
  setup(a, n) {
    let s = o(!1), t = o(0);
    const l = o();
    g(() => {
      a.direction == "row" ? d() : v();
    });
    const d = () => {
      const i = l.value.offsetWidth;
      function e() {
        s.value || (t.value -= 0.5), l.value.style.transform = "translateX(" + t.value + "px)", Math.abs(t.value) < Math.abs(i / 2) || (t.value = 0), requestAnimationFrame(e);
      }
      requestAnimationFrame(e);
    }, v = () => {
      const i = l.value.offsetHeight;
      function e() {
        s.value || (t.value -= 0.5), l.value.style.transform = "translateY(" + t.value + "px)", Math.abs(t.value) < Math.abs(i / 2) || (t.value = 0), requestAnimationFrame(e);
      }
      requestAnimationFrame(e);
    }, h = () => {
      s.value = !0;
    }, c = () => {
      s.value = !1;
    };
    return n.expose({
      pause: h,
      play: c
    }), () => {
      var i, e, f, m;
      return r(w, null, [r("div", {
        class: "scroll",
        style: {
          height: a.direction == "column" ? a.height : "auto",
          width: a.width
        }
      }, [r("div", {
        class: "bar-wrap",
        ref: l,
        style: {
          "flex-direction": a.direction
        }
      }, [(e = n == null ? void 0 : (i = n.slots).default) == null ? void 0 : e.call(i), (m = n == null ? void 0 : (f = n.slots).default) == null ? void 0 : m.call(f)])])]);
    };
  }
});
u.install = function(a) {
  a.component(u.name, u);
};
export {
  u as default
};