flamingo-ui/es/barrage/index.js

火烈鸟UI组件库

import "./index-sfc.css";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
const __vue_sfc__ = {
  __name: "index",
  props: {
    list: {
      type: Array,
      default: () => {
        [];
      }
    },
    channels: {
      type: [String, Number],
      default: 5
    },
    loop: {
      type: Boolean,
      default: true
    },
    IntervalTime: {
      type: [Number],
      default: 2100
    },
    animationTime: {
      type: [Number],
      default: 8
    }
  },
  setup(__props, { expose }) {
    expose();
    const props = __props;
    const showingBullets = ref([]);
    const currentChannel = ref(0);
    let timer = null;
    const waitingBullets = computed(() => {
      return props.list;
    });
    const showNextBullet = () => {
      if (document.hidden) {
        return;
      }
      if (!waitingBullets.value.length) {
        return;
      }
      currentChannel.value = currentChannel.value % props.channels + 1;
      const nextBullet = waitingBullets.value.shift();
      props.loop && waitingBullets.value.push(nextBullet);
      let obj = {};
      obj.content = nextBullet.content.length > 100 ? nextBullet.content.slice(0, 100) + "..." : nextBullet.content;
      obj.id = new Date().getTime();
      obj.channel = currentChannel.value;
      showingBullets.value.push(obj);
    };
    const remove = () => {
      showingBullets.value.shift();
    };
    onMounted(() => {
      timer = setInterval(showNextBullet, props.IntervalTime);
    });
    onBeforeUnmount(() => {
      clearInterval(timer);
    });
    const __returned__ = { props, showingBullets, currentChannel, get timer() {
      return timer;
    }, set timer(v) {
      timer = v;
    }, waitingBullets, showNextBullet, remove, ref, computed, onMounted, onBeforeUnmount };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
};
import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue";
const _hoisted_1 = { class: "fmg-barrage" };
const _hoisted_2 = { class: "list" };
function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
  return _openBlock(), _createElementBlock("div", _hoisted_1, [
    _createElementVNode("ul", _hoisted_2, [
      (_openBlock(true), _createElementBlock(
        _Fragment,
        null,
        _renderList($setup.showingBullets, (item) => {
          return _openBlock(), _createElementBlock(
            "li",
            {
              key: item.id,
              onAnimationend: $setup.remove,
              style: _normalizeStyle(`animation: barrage-in ${$props.animationTime}s linear both;top:${(item.channel - 1) * (100 / $props.channels)}%`)
            },
            _toDisplayString(item.content),
            37
            /* TEXT, STYLE, HYDRATE_EVENTS */
          );
        }),
        128
        /* KEYED_FRAGMENT */
      ))
    ])
  ]);
}
__vue_sfc__.render = __vue_render__;
var stdin_default = __vue_sfc__;
export {
  stdin_default as default
};