uni-bullet-screen/dist/bullet-screen.es.js

弹幕组件 for uni-app and 微信小程序

import { defineComponent as R, ref as g, watch as M, onMounted as L, onBeforeUnmount as O, openBlock as i, createElementBlock as u, Fragment as w, renderList as y, createElementVNode as c, normalizeClass as E, normalizeStyle as f, toDisplayString as B, createCommentVNode as T } from "vue";
const z = { key: 0 }, N = { class: "relative" }, P = ["onClick"], V = ["src"], X = { class: "single-line-ellipsis" }, x = { class: "relative" }, U = ["onClick"], q = ["src"], G = { class: "single-line-ellipsis" }, H = /* @__PURE__ */ R({
  __name: "BulletScreen",
  props: {
    bullets: {},
    rows: { default: 2 },
    speed: { default: 30 },
    colors: { default: () => ["#3C4654", "#BA5140", "#8F6D5F", "#0E6E86", "#A9A082"] }
  },
  emits: ["click"],
  setup(p, { emit: k }) {
    function d(o) {
      if (o === null || typeof o != "object")
        return o;
      if (Array.isArray(o))
        return o.map((r) => d(r));
      const l = {};
      for (const r in o)
        Object.prototype.hasOwnProperty.call(o, r) && (l[r] = d(o[r]));
      return l;
    }
    const s = p, a = g([]), _ = g([]), m = g(!1), S = () => {
      if (!s.bullets || !s.rows || s.bullets.length === 0 || s.rows <= 0) {
        a.value = [], _.value = [];
        return;
      }
      _.value = [];
      const o = s.bullets.length, l = Math.ceil(o / s.rows);
      a.value = [];
      let r = 0;
      for (let n = 0; n < s.rows; n++) {
        const e = n * l, t = e + l, v = d(
          s.bullets.slice(e, t).map((C, $) => (C.color = s.colors[(r + n + $) % s.colors.length], r++, C))
        );
        a.value.push(v);
        const h = A(v, n);
        _.value.push(h);
      }
    }, A = (o, l) => {
      const r = s.bullets.length <= 8 ? 9 : s.speed || 30, n = 1.5, e = o.length, t = Math.ceil(r + e * n), v = l % 2 === 0 ? 0 * 5 : 5, h = t + v;
      return Math.max(h, s.bullets.length < 8 ? 12 : 19);
    }, D = () => {
      m.value = !1;
    }, F = () => {
      setTimeout(() => {
        m.value = !0;
      }, 100);
    };
    return M(
      () => s.bullets,
      () => {
        D(), S(), F();
      },
      { immediate: !0, deep: !1 }
    ), L(() => {
    }), O(() => {
    }), (o, l) => a.value && a.value.length > 0 ? (i(), u("view", z, [
      (i(!0), u(w, null, y(o.rows, (r, n) => (i(), u("view", {
        key: n,
        class: "bullet-screen-container"
      }, [
        c("view", {
          class: E(["bullet-screen-row", { "no-animation": !m.value }]),
          style: f({
            animationDuration: m.value ? `${_.value[n]}s` : "0s"
          })
        }, [
          c("view", N, [
            (i(!0), u(w, null, y(a.value[n], (e, t) => (i(), u("view", {
              class: "bullet absolute",
              onClick: (v) => o.$emit("click", e),
              key: t,
              style: f({
                background: (e == null ? void 0 : e.color) || "#0E6E86",
                top: t % 2 === 0 ? "6px" : "0",
                left: 0,
                "--bdColors": e.color || "#0E6E86",
                "--borderLefts": t % 2 === 0 ? "24rpx" : "8rpx",
                "--borderRights": t % 2 === 0 ? "8rpx" : "24rpx",
                "--skewXDeg": t % 2 === 0 ? "180deg" : "0deg",
                "--bullet-after-left": t % 2 === 0 ? "65%" : "10%"
              })
            }, [
              c("image", {
                src: e.avatar,
                mode: "scaleToFill",
                class: "w-4 h-4 rounded-full mr-1"
              }, null, 8, V),
              c("span", X, B(e.content), 1)
            ], 12, P))), 128))
          ])
        ], 6),
        c("view", {
          class: E(["bullet-screen-rows2", { "no-animation": !m.value }]),
          style: f({
            animationDuration: `${_.value[n]}s`,
            animationDelay: `${_.value[n] / -2}s`
          })
        }, [
          c("view", x, [
            (i(!0), u(w, null, y(a.value[n], (e, t) => (i(), u("view", {
              class: "bullet absolute",
              onClick: (v) => o.$emit("click", e),
              key: t,
              style: f({
                background: (e == null ? void 0 : e.color) || "#0E6E86",
                top: t % 2 === 0 ? "6px" : "0",
                left: 0,
                "--bdColors": e.color || "#0E6E86",
                "--borderLefts": t % 2 === 0 ? "24rpx" : "8rpx",
                "--borderRights": t % 2 === 0 ? "8rpx" : "24rpx",
                "--skewXDeg": t % 2 === 0 ? "180deg" : "0deg",
                "--bullet-after-left": t % 2 === 0 ? "65%" : "10%"
              })
            }, [
              c("image", {
                src: e.avatar ? e.avatar : "https://cdn.docoi.cc/tea_friend/avatars/default_avatar_77_77.png",
                mode: "scaleToFill",
                class: "w-20px h-20px rounded-full mr-1"
              }, null, 8, q),
              c("span", G, B(e.content || ""), 1)
            ], 12, U))), 128))
          ])
        ], 6)
      ]))), 128))
    ])) : T("", !0);
  }
});
const J = (p, k) => {
  const d = p.__vccOpts || p;
  for (const [s, a] of k)
    d[s] = a;
  return d;
}, K = /* @__PURE__ */ J(H, [["__scopeId", "data-v-cd1fc12a"]]), W = {
  install: (p) => {
    p.component("BulletScreen", K);
  }
};
export {
  K as BulletScreen,
  W as default
};