cione-comp-lib/es/packages/co-label-text-list/index2.mjs

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

import { defineComponent, ref, watch, nextTick, onMounted, onUnmounted, toRefs, openBlock, createElementBlock, normalizeStyle, createElementVNode, toDisplayString, Fragment, renderList, withModifiers, pushScopeId, popScopeId } from "vue";
import _imports_0 from "./images/up.mjs";
import _imports_1 from "./images/down.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoLabelTextList",
  props: {
    width: {
      type: String
    },
    height: {
      type: String
    },
    list: {
      type: Array,
      default: () => {
      }
    },
    title: {
      type: String
    },
    titleFontSize: {
      type: Number,
      default: 24
    },
    titleColor: {
      type: String,
      default: "rgba(23, 0, 0,1)"
    },
    subtitle: {
      type: String
    },
    subtitleSize: {
      type: Number,
      default: 14
    },
    subtitleColor: {
      type: String,
      default: "rgba(0, 0, 0,1)"
    },
    borderWidth: {
      type: Number,
      default: 1
    },
    borderStyle: {
      type: String,
      default: "solid"
    },
    borderColor: {
      type: String,
      default: "rgba(207, 207, 207,1)"
    },
    boxHeight: {
      type: Number,
      default: 370
    },
    rowHeight: {
      type: Number,
      default: 90
    },
    rowBorderStyle: {
      type: String,
      default: "dashed"
    },
    rowBorderColor: {
      type: String,
      default: "rgba(183, 183, 183,1)"
    },
    smallTitleSize: {
      type: Number,
      default: 14
    },
    smallTitleColor: {
      type: String,
      default: "rgba(53, 53, 53,1)"
    },
    textSize: {
      type: Number,
      default: 14
    },
    textColor: {
      type: String,
      default: "rgba(65, 106, 127, 1)"
    },
    isWebUrl: {
      type: Boolean
    },
    isTextDecoration: {
      type: Boolean
    },
    rollTimer: {
      type: Number,
      default: 4
    }
  },
  setup(props) {
    const data = ref(props.list);
    const UlDom = ref();
    const isTransition = ref(true);
    const isDirection = ref("up");
    const scrolNum = ref(1);
    const scrolInterval = ref();
    const isThrottle = ref(true);
    const isInit = ref(true);
    const scrollFn = () => {
      isDirection.value = "up";
      scrolNum.value = -props.rowHeight;
      nextTick(() => {
        isTransition.value = true;
      });
    };
    const scrollData = () => {
      data.value.push(data.value[0]);
      data.value.shift();
      nextTick(() => {
        isTransition.value = false;
        scrolNum.value = 0;
      });
    };
    const startLeaveFn = () => {
      intervalStart();
    };
    const stopEnterFn = () => {
      clearInterval(scrolInterval.value);
    };
    const intervalStart = () => {
      nextTick(() => {
        scrolInterval.value = setInterval(() => {
          isThrottle.value = false;
          scrollFn();
        }, props.rollTimer * 1e3 - 800);
      });
    };
    const downFn = () => {
      if (isThrottle.value) {
        isThrottle.value = false;
        clearInterval(scrolInterval.value);
        scrollFn();
        nextTick(() => {
          intervalStart();
        });
      }
    };
    const upFn = () => {
      if (isThrottle.value) {
        isThrottle.value = false;
        clearInterval(scrolInterval.value);
        isDirection.value = "down";
        data.value.unshift(data.value[data.value.length - 1]);
        data.value.pop();
        scrolNum.value = -props.rowHeight;
        isTransition.value = false;
        nextTick(() => {
          let timerOut = setTimeout(() => {
            isTransition.value = true;
            scrolNum.value = 0;
            intervalStart();
            clearTimeout(timerOut);
          }, 300);
        });
      }
    };
    const pageJumpFn = (webUrl) => {
      if (props.isWebUrl) {
        window.open(webUrl);
      }
    };
    const updataList = (newList) => {
      clearInterval(scrolInterval.value);
      data.value = newList;
      nextTick(() => {
        isTransition.value = true;
        intervalStart();
      });
    };
    watch(
      () => props.list,
      () => {
        clearInterval(scrolInterval.value);
        data.value = props.list;
        nextTick(() => {
          isTransition.value = true;
          intervalStart();
        });
      }
    );
    watch(
      () => props.rollTimer,
      () => {
        stopEnterFn();
        intervalStart();
      }
    );
    onMounted(() => {
      intervalStart();
      UlDom.value.addEventListener("transitionend", () => {
        if (isDirection.value === "up") {
          scrollData();
        }
        isThrottle.value = true;
      });
    });
    onUnmounted(() => {
      stopEnterFn();
    });
    return {
      data,
      UlDom,
      isTransition,
      isInit,
      scrolNum,
      startLeaveFn,
      stopEnterFn,
      downFn,
      upFn,
      pageJumpFn,
      updataList,
      ...toRefs(props)
    };
  }
});
const _withScopeId = (n) => (pushScopeId("data-v-15637728"), n = n(), popScopeId(), n);
const _hoisted_1 = { class: "text-list__hovertreeinfo" };
const _hoisted_2 = ["title", "onClick"];
const _hoisted_3 = ["title"];
const _hoisted_4 = { class: "text-list__scroltit" };
const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("img", { src: _imports_0 }, null, -1));
const _hoisted_6 = [
  _hoisted_5
];
const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("img", { src: _imports_1 }, null, -1));
const _hoisted_8 = [
  _hoisted_7
];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: "co-label-text-list",
    style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" })
  }, [
    createElementVNode("div", _hoisted_1, [
      createElementVNode("h2", {
        style: normalizeStyle({ fontSize: _ctx.titleFontSize + "px", color: _ctx.titleColor })
      }, toDisplayString(_ctx.title), 5),
      createElementVNode("p", {
        style: normalizeStyle({ fontSize: _ctx.subtitleSize + "px", color: _ctx.subtitleColor })
      }, toDisplayString(_ctx.subtitle), 5)
    ]),
    createElementVNode("div", {
      class: "text-list__hovertreebox",
      style: normalizeStyle({ border: `${_ctx.borderWidth}px ${_ctx.borderStyle} ${_ctx.borderColor}` })
    }, [
      createElementVNode("div", {
        id: "text-list__HoverTreeScroll",
        onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.stopEnterFn && _ctx.stopEnterFn(...args)),
        onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startLeaveFn && _ctx.startLeaveFn(...args)),
        style: normalizeStyle({ height: _ctx.boxHeight + "px" })
      }, [
        createElementVNode("ul", {
          ref: "UlDom",
          style: normalizeStyle({
            top: _ctx.scrolNum + "px",
            transition: _ctx.isTransition ? `top 0.8s linear 0s` : "unset"
          })
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item, index) => {
            return openBlock(), createElementBlock("li", {
              key: index,
              style: normalizeStyle({
                height: _ctx.rowHeight + "px",
                borderBottom: `${_ctx.rowBorderColor} ${_ctx.rowBorderStyle} 1px`
              })
            }, [
              createElementVNode("h3", {
                title: item.title,
                onClick: ($event) => _ctx.pageJumpFn(item.webUrl),
                style: normalizeStyle({
                  fontSize: _ctx.smallTitleSize + "px",
                  color: _ctx.smallTitleColor,
                  textDecoration: _ctx.isTextDecoration ? "underline" : "unset",
                  textDecorationColor: _ctx.smallTitleColor,
                  cursor: _ctx.isWebUrl ? "pointer" : "auto"
                })
              }, toDisplayString(item.title), 13, _hoisted_2),
              createElementVNode("div", {
                title: item.text,
                style: normalizeStyle({ fontSize: _ctx.textSize + "px", color: _ctx.textColor })
              }, toDisplayString(item.text), 13, _hoisted_3)
            ], 4);
          }), 128))
        ], 4)
      ], 36),
      createElementVNode("div", _hoisted_4, [
        createElementVNode("div", {
          class: "text-list__updown",
          onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.downFn && _ctx.downFn(...args), ["stop"]))
        }, _hoisted_6),
        createElementVNode("div", {
          class: "text-list__updown",
          onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.upFn && _ctx.upFn(...args), ["stop"]))
        }, _hoisted_8)
      ])
    ], 4)
  ], 4);
}
var CoLabelTextList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-15637728"]]);
export { CoLabelTextList as default };