cione-comp-lib/es/packages/co-time-line/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, reactive, toRef, ref, computed, onMounted, onUnmounted, toRefs, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, createBlock } from "vue";
import TimeLineItem, { Props } from "./time_item.mjs";
import "./index3.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const DEFAULTTITLE = "\u52A9\u519C\u7231\u5FC3\u5C0F\u7AD9\u5EFA\u7ACB";
const DEFAULTTEXT = "\u52A9\u519C\u7231\u5FC3\u5C0F\u7AD9\u63A8\u51FAXX\u519C\u4EA7\u54C1\u8FDB\u884C\u9500\u552E\u3002\u52A9\u519C\u7231\u5FC3\u5C0F\u7AD9\u63A8\u51FAXX\u519C\u4EA7\u54C1\u8FDB\u884C\u9500\u552E\u3002\u52A9\u519C\u7231\u5FC3\u5C0F\u7AD9\u63A8\u51FAXX\u519C\u4EA7\u54C1\u8FDB\u884C\u9500\u552E\u3002";
const DEFAULTVIDEO = "https://images.cionetech.com/video/IMG_1172.mp4";
const DEFAULTLIST = [
  { time: "2022.03.16", title: DEFAULTTITLE, type: "text", text: DEFAULTTEXT, value: "" },
  { time: "2022.03.16", title: DEFAULTTITLE, type: "text", text: DEFAULTTEXT, value: "" },
  { time: "2022.03.16", title: DEFAULTTITLE, type: "text", text: DEFAULTTEXT, value: "" },
  { time: "2022.03.16", title: DEFAULTTITLE, type: "text", text: DEFAULTTEXT, value: "" },
  { time: "2022.03.16", title: DEFAULTTITLE, type: "video", text: "", value: DEFAULTVIDEO },
  { time: "2022.03.16", title: DEFAULTTITLE, type: "text", text: DEFAULTTEXT, value: "" }
];
const _sfc_main = defineComponent({
  name: "CoTimeLine",
  components: { TimeLineItem },
  props: {
    list: { type: Array, default: DEFAULTLIST },
    type: { type: String, default: "center" },
    speed: { type: Number, default: 8 },
    containerProps: Props.containerProps,
    timeProps: Props.timeProps,
    circleProps: Props.circleProps,
    mediaProps: Props.mediaProps
  },
  setup(props) {
    const state = reactive({ firstUiTop: 0, seconedUiTop: 0, mainOverflow: "hidden" });
    const sourceList = toRef(props, "list");
    const main = ref();
    const container = ref();
    const uiEle = ref();
    const height = ref(0);
    const uiHeight = ref(0);
    const placeHolderHeight = ref(0);
    const timer = ref();
    const scrollHeight = ref(0);
    let mainHeight = 0;
    let maxPercenter = 0;
    const computedHeight = computed(() => {
      return {
        "--height": `${placeHolderHeight.value}px`
      };
    });
    const computerTranform = computed(() => {
      return {
        transform: `translateX(${props.containerProps.translateX || 0}%) translateY(${scrollHeight.value}%)`
      };
    });
    function enterFn(event) {
      cancelAnimationFrame(timer.value);
      timer.value = null;
      state.mainOverflow = "scroll";
      const num = Math.abs(scrollHeight.value / 100) * mainHeight;
      if (!event)
        return;
      if (event.target && event.target.parentElement)
        event.target.parentElement.scrollTop = num;
    }
    function outFn() {
      state.mainOverflow = "hidden";
      loop();
    }
    function loop() {
      timer.value = requestAnimationFrame(() => {
        scrollView();
        loop();
      });
    }
    function scrollView() {
      let diff = props.speed;
      if (diff < 0)
        diff = 1;
      if (Math.abs(scrollHeight.value) > 50)
        scrollHeight.value += 50;
      scrollHeight.value -= diff / 100;
    }
    function scrollFn(e) {
      requestAnimationFrame(() => {
        let percenter = e.target.scrollTop / mainHeight * 100;
        if (percenter > maxPercenter)
          percenter = maxPercenter;
        scrollHeight.value = -percenter;
      });
      e.preventDefault();
      e.defaultPrevented();
    }
    onMounted(() => {
      const mainContainer = main.value;
      const ui = uiEle.value;
      height.value = mainContainer.offsetHeight;
      uiHeight.value = ui.offsetHeight;
      placeHolderHeight.value = container.value.offsetHeight;
      mainHeight = placeHolderHeight.value - height.value;
      let cutHeightPercenter = (uiHeight.value - height.value) / height.value;
      const inPer = Math.floor(cutHeightPercenter);
      cutHeightPercenter -= inPer;
      maxPercenter = 103 - Math.floor(cutHeightPercenter * 100);
      outFn();
    });
    onUnmounted(() => {
      enterFn(null);
    });
    return {
      ...toRefs(props),
      sourceList,
      state,
      main,
      uiEle,
      container,
      scrollHeight,
      computedHeight,
      computerTranform,
      enterFn,
      outFn,
      scrollFn
    };
  }
});
const _hoisted_1 = {
  class: "co-time-line-container",
  ref: "main"
};
const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "co-time-line-header" }, null, -1);
const _hoisted_3 = /* @__PURE__ */ createElementVNode("span", { class: "co-time-line-footer" }, null, -1);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_time_line_item = resolveComponent("time-line-item");
  return openBlock(), createElementBlock("div", _hoisted_1, [
    _hoisted_2,
    createElementVNode("div", {
      class: "co-time-line-content",
      ref: "container",
      style: normalizeStyle({ ..._ctx.computerTranform })
    }, [
      createElementVNode("ul", {
        class: "co-time-line-ul",
        ref: "uiEle",
        style: normalizeStyle({ top: `${_ctx.state.firstUiTop}px` })
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sourceList, (item, index) => {
          return openBlock(), createBlock(_component_time_line_item, {
            data: item,
            direction: _ctx.type === "center" ? index % 2 ? "left" : "right" : _ctx.type === "left" ? "left" : "right",
            "container-props": _ctx.containerProps,
            "time-props": _ctx.timeProps,
            "circle-props": _ctx.circleProps,
            "media-props": _ctx.mediaProps
          }, null, 8, ["data", "direction", "container-props", "time-props", "circle-props", "media-props"]);
        }), 256))
      ], 4),
      createElementVNode("ul", {
        class: "co-time-line-ul",
        style: normalizeStyle({ top: `${_ctx.state.seconedUiTop}px` })
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sourceList, (item, index) => {
          return openBlock(), createBlock(_component_time_line_item, {
            data: item,
            direction: _ctx.type === "center" ? index % 2 ? "left" : "right" : _ctx.type === "left" ? "left" : "right",
            "container-props": _ctx.containerProps,
            "time-props": _ctx.timeProps,
            "circle-props": _ctx.circleProps,
            "media-props": _ctx.mediaProps
          }, null, 8, ["data", "direction", "container-props", "time-props", "circle-props", "media-props"]);
        }), 256))
      ], 4)
    ], 4),
    _hoisted_3,
    createElementVNode("div", {
      class: "co-time-line-placeholder",
      style: normalizeStyle({ overflowY: _ctx.state.mainOverflow }),
      onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.enterFn && _ctx.enterFn(...args)),
      onTouchend: _cache[1] || (_cache[1] = (...args) => _ctx.outFn && _ctx.outFn(...args)),
      onMouseover: _cache[2] || (_cache[2] = (...args) => _ctx.enterFn && _ctx.enterFn(...args)),
      onMouseout: _cache[3] || (_cache[3] = (...args) => _ctx.outFn && _ctx.outFn(...args)),
      onScroll: _cache[4] || (_cache[4] = (...args) => _ctx.scrollFn && _ctx.scrollFn(...args))
    }, [
      createElementVNode("div", {
        style: normalizeStyle({ ..._ctx.computedHeight })
      }, null, 4)
    ], 36)
  ], 512);
}
var TimeLine = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { TimeLine as default };