cione-comp-lib/es/packages/co-table-roll-list/index2.mjs

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

import { defineComponent, ref, watch, nextTick, onMounted, onUnmounted, toRefs, resolveComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, toDisplayString, createCommentVNode, createBlock, withCtx, createVNode, withModifiers } from "vue";
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: "CoTableRollList",
  props: {
    width: {
      type: String
    },
    height: {
      type: String
    },
    isBorder: {
      type: Boolean,
      default: true
    },
    borderColor: {
      type: String,
      default: "rgba(204, 204, 204,1)"
    },
    textAlignOption: {
      type: String,
      default: "center"
    },
    clampNum: {
      type: Number,
      default: 2
    },
    fontFamily: {
      type: String
    },
    isHeader: {
      type: String,
      default: true
    },
    headreHeight: {
      type: Number,
      default: 40
    },
    headreSize: {
      type: Number,
      default: 16
    },
    headreColor: {
      type: String,
      default: "rgba(255,255,255,1)"
    },
    headreBgColor: {
      type: String,
      default: "rgba(10, 115, 255, 1)"
    },
    headreBgImg: {
      type: String,
      default: ""
    },
    headreBgSize: {
      type: String,
      default: "100% 100%"
    },
    contentHeight: {
      type: Number,
      default: 50
    },
    contentSize: {
      type: Number,
      default: 12
    },
    contentColor: {
      type: String,
      default: "rgba(255,255,255,1)"
    },
    oddColor: {
      type: String,
      default: "rgba(0, 59, 81,1)"
    },
    doubleColor: {
      type: String,
      default: "rgba(10, 39, 50,1)"
    },
    speed: {
      type: Number,
      default: 20
    },
    webJumpType: {
      type: String,
      default: "to"
    },
    iconWidth: {
      type: Number,
      default: 30
    },
    aloneHeight: {},
    isShadow: {
      type: Boolean,
      default: false
    },
    shadowColor: {
      type: String,
      default: "rgba(102,230,225,1)"
    },
    contentBg: {
      type: String,
      default: "rgba(10, 39, 50,1)"
    },
    list: {
      type: Object,
      default: () => {
      }
    }
  },
  setup(props) {
    const listData = ref(props.list);
    const linkIndex = ref(listData.value.headers.findIndex((item) => item.value === "link"));
    const aloneIndexArr = ref([]);
    const aloneHeightArr = ref([]);
    const listDom = ref();
    const listScroll = ref(0);
    const listDomHeight = ref(0);
    const actualDomBox = ref();
    const actualDomHeight = ref();
    const interval = ref();
    const actualTop = ref(0);
    const cloneTop = ref(0);
    const show = ref(true);
    const isClone = ref(true);
    const isOver = ref(false);
    const scrollHeight = ref();
    const scrollBox = ref();
    const scrollActiveH = ref();
    const scrollBoxHeight = ref();
    const isDown = ref(true);
    const downTimer = ref();
    const intervalFn = () => {
      interval.value = setInterval(() => {
        if (listDom.value) {
          if (listDom.value.scrollTop + listDom.value.clientHeight === listDom.value.scrollHeight) {
            actualTop.value = 0;
            cloneTop.value = actualDomHeight.value;
            listScroll.value = listDom.value.scrollTop - actualDomHeight.value;
            listDom.value.scrollTop = listScroll.value;
          } else if (listDom.value.scrollTop >= actualDomHeight.value) {
            if (actualTop.value === 0) {
              actualTop.value = actualDomHeight.value;
              cloneTop.value = 0;
            } else {
              actualTop.value = 0;
              cloneTop.value = actualDomHeight.value;
            }
            listScroll.value = 0;
            listDom.value.scrollTop = listScroll.value;
          } else {
            listScroll.value++;
            listDom.value.scrollTop = listScroll.value;
          }
          scrollActiveH.value = listScroll.value / listDomHeight.value * 100;
        }
      }, props.speed);
    };
    const aloneHeighFn = () => {
      aloneIndexArr.value = [];
      aloneHeightArr.value = [];
      let newAloneHeight = Function(props.aloneHeight);
      aloneHeightArr.value = newAloneHeight();
      aloneHeightArr.value.forEach((ele, ind) => {
        aloneIndexArr.value.push(ele.index);
      });
    };
    const scrollFn = (e) => {
      if (isOver.value) {
        listScroll.value = e.target.scrollTop;
        listDom.value.scrollTop = listScroll.value;
        scrollActiveH.value = e.target.scrollTop / listDomHeight.value * 100;
      }
    };
    const overFn = () => {
      var _a;
      isOver.value = true;
      clearTimeout(downTimer.value);
      scrollBoxHeight.value = listDomHeight.value;
      scrollHeight.value = listDomHeight.value / listDom.value.scrollHeight * ((_a = scrollBox.value) == null ? void 0 : _a.offsetHeight);
      clearInterval(interval.value);
    };
    const outFn = () => {
      if (isDown.value) {
        clearTimeout(downTimer.value);
        isOver.value = false;
        intervalFn();
      }
    };
    const downFn = (event) => {
      isDown.value = false;
      clearTimeout(downTimer.value);
      clearInterval(interval.value);
      let t = event.clientY - scrollActiveH.value;
      document.onmousemove = (e) => {
        listScroll.value = (e.clientY - t) * 3;
        if (listScroll.value <= 0) {
          listScroll.value = 0;
        }
        if (listScroll.value + listDom.value.clientHeight >= listDom.value.scrollHeight) {
          listScroll.value = listDom.value.scrollTop;
        }
        scrollActiveH.value = listScroll.value / listDomHeight.value * 100;
        listDom.value.scrollTop = listScroll.value;
      };
      document.onmouseup = () => {
        isDown.value = true;
        upFn();
      };
    };
    const upFn = () => {
      isDown.value = true;
      downTimer.value = setTimeout(() => {
        clearInterval(interval.value);
        outFn();
        clearTimeout(downTimer.value);
      }, 1e3);
      document.onmousemove = null;
      document.onmouseup = null;
    };
    const webJumpFn = (link) => {
      if (props.webJumpType === "to") {
        window.open(link);
      } else if (props.webJumpType === "current") {
        window.location.href = link;
      }
    };
    const updataList = (newList) => {
      listData.value = newList;
      linkIndex.value = listData.value.headers.findIndex((item) => item.value === "link");
      clearInterval(interval.value);
      clearTimeout(downTimer.value);
      show.value = false;
      aloneHeighFn();
      nextTick(() => {
        show.value = true;
        listScroll.value = 0;
        nextTick(() => {
          var _a, _b;
          listScroll.value = 0;
          actualDomHeight.value = (_a = actualDomBox.value) == null ? void 0 : _a.offsetHeight;
          if (actualDomHeight.value < listDomHeight.value) {
            isClone.value = false;
          } else {
            isClone.value = true;
            cloneTop.value = actualDomHeight.value;
            listDomHeight.value = (_b = listDom.value) == null ? void 0 : _b.offsetHeight;
            clearInterval(interval.value);
            intervalFn();
          }
        });
      });
    };
    const updataClick = () => {
      let clickArr = document.querySelectorAll(".iconClick");
      return clickArr;
    };
    watch(
      () => props.list,
      () => {
        listData.value = props.list;
        linkIndex.value = listData.value.headers.findIndex((item) => item.value === "link");
        clearInterval(interval.value);
        clearTimeout(downTimer.value);
        show.value = false;
        nextTick(() => {
          show.value = true;
          nextTick(() => {
            var _a, _b;
            listScroll.value = 0;
            actualDomHeight.value = (_a = actualDomBox.value) == null ? void 0 : _a.offsetHeight;
            if (actualDomHeight.value < listDomHeight.value) {
              isClone.value = false;
            } else {
              isClone.value = true;
              cloneTop.value = actualDomHeight.value;
              listDomHeight.value = (_b = listDom.value) == null ? void 0 : _b.offsetHeight;
              clearInterval(interval.value);
              intervalFn();
            }
          });
        });
      }
    );
    watch(
      () => props.speed,
      () => {
        show.value = false;
        nextTick(() => {
          show.value = true;
          clearInterval(interval.value);
          intervalFn();
        });
      }
    );
    watch(
      () => props.aloneHeight,
      () => {
        overFn();
        show.value = false;
        aloneHeighFn();
        nextTick(() => {
          show.value = true;
          nextTick(() => {
            var _a;
            listScroll.value = 0;
            actualDomHeight.value = (_a = actualDomBox.value) == null ? void 0 : _a.offsetHeight;
            if (actualDomHeight.value < listDomHeight.value) {
              isClone.value = false;
              clearInterval(interval.value);
              clearTimeout(downTimer.value);
            } else {
              isClone.value = true;
              cloneTop.value = actualDomHeight.value;
              intervalFn();
            }
          });
        });
      }
    );
    onMounted(() => {
      aloneHeighFn();
      nextTick(() => {
        var _a, _b;
        actualDomHeight.value = (_a = actualDomBox.value) == null ? void 0 : _a.offsetHeight;
        if (actualDomHeight.value < listDomHeight.value) {
          isClone.value = false;
          clearInterval(interval.value);
          clearTimeout(downTimer.value);
        } else {
          isClone.value = true;
          cloneTop.value = actualDomHeight.value;
          listDomHeight.value = (_b = listDom.value) == null ? void 0 : _b.offsetHeight;
          intervalFn();
        }
      });
    });
    onUnmounted(() => {
      clearInterval(interval.value);
      clearTimeout(downTimer.value);
    });
    return {
      listData,
      linkIndex,
      listDom,
      actualDomBox,
      actualTop,
      cloneTop,
      show,
      isClone,
      aloneIndexArr,
      aloneHeightArr,
      scrollHeight,
      scrollBox,
      scrollActiveH,
      scrollBoxHeight,
      isOver,
      overFn,
      outFn,
      downFn,
      upFn,
      updataList,
      updataClick,
      scrollFn,
      webJumpFn,
      ...toRefs(props)
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Link = resolveComponent("Link");
  const _component_el_icon = resolveComponent("el-icon");
  return openBlock(), createElementBlock("div", {
    class: "co-table-roll-list",
    style: normalizeStyle({
      width: _ctx.width || "100%",
      height: _ctx.height || "100%",
      fontFamily: _ctx.fontFamily
    }),
    onDrag: _cache[9] || (_cache[9] = () => {
      return false;
    })
  }, [
    _ctx.isHeader ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: "table-roll-list__header",
      style: normalizeStyle({
        backgroundColor: _ctx.headreBgColor,
        backgroundImage: `url(${_ctx.headreBgImg})`,
        backgroundSize: _ctx.headreBgSize
      })
    }, [
      createElementVNode("ul", {
        style: normalizeStyle({
          width: _ctx.isShadow ? "96%" : "100%",
          height: _ctx.headreHeight + "px",
          lineHeight: _ctx.headreHeight + "px",
          color: _ctx.headreColor,
          fontSize: _ctx.headreSize + "px"
        })
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData.headers, (item, index) => {
          return openBlock(), createElementBlock("li", {
            key: index,
            style: normalizeStyle({
              width: item.width + "%",
              justifyContent: _ctx.textAlignOption,
              borderLeft: _ctx.isBorder ? index !== 0 ? `1px solid ${_ctx.borderColor}` : "none" : "none"
            })
          }, [
            createElementVNode("span", null, toDisplayString(item.value === "link" ? "   " : item.value), 1)
          ], 4);
        }), 128))
      ], 4)
    ], 4)) : createCommentVNode("", true),
    _ctx.show ? (openBlock(), createElementBlock("div", {
      key: 1,
      class: "table-roll-list__content",
      ref: "listDom",
      onMouseover: _cache[0] || (_cache[0] = (...args) => _ctx.overFn && _ctx.overFn(...args)),
      onMouseout: _cache[1] || (_cache[1] = (...args) => _ctx.outFn && _ctx.outFn(...args)),
      onTouchstart: _cache[2] || (_cache[2] = (...args) => _ctx.overFn && _ctx.overFn(...args)),
      onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.outFn && _ctx.outFn(...args)),
      onScroll: _cache[4] || (_cache[4] = (...args) => _ctx.scrollFn && _ctx.scrollFn(...args)),
      style: normalizeStyle({
        overflowY: "scroll",
        backgroundColor: _ctx.contentBg
      })
    }, [
      createElementVNode("div", {
        class: "roll-list__content-box",
        style: normalizeStyle({
          top: _ctx.actualTop + "px",
          width: _ctx.isShadow ? "96%" : "100%"
        }),
        ref: "actualDomBox"
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData.content, (item, index) => {
          return openBlock(), createElementBlock("ul", {
            key: index,
            style: normalizeStyle({
              height: `${_ctx.aloneIndexArr.indexOf(index) === -1 ? _ctx.contentHeight : _ctx.aloneHeightArr[_ctx.aloneIndexArr.indexOf(index)].height}px`,
              color: _ctx.contentColor,
              fontSize: _ctx.contentSize + "px",
              backgroundColor: index % 2 === 1 ? _ctx.oddColor : _ctx.doubleColor,
              boxShadow: _ctx.isShadow ? `0px 0px 8px ${_ctx.shadowColor}` : ""
            })
          }, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(item, (val, i) => {
              return openBlock(), createElementBlock("li", {
                key: i,
                style: normalizeStyle({
                  width: _ctx.listData.headers[i].width + "%",
                  justifyContent: _ctx.textAlignOption,
                  borderLeft: _ctx.isBorder ? i !== 0 ? `1px solid ${_ctx.borderColor}` : "none" : "none"
                })
              }, [
                _ctx.linkIndex !== i ? (openBlock(), createElementBlock("span", {
                  key: 0,
                  style: normalizeStyle({ "-webkit-line-clamp": _ctx.clampNum })
                }, toDisplayString(val), 5)) : createCommentVNode("", true),
                _ctx.linkIndex === i ? (openBlock(), createBlock(_component_el_icon, {
                  key: 1,
                  style: normalizeStyle({ width: _ctx.iconWidth + "px", height: _ctx.iconWidth + "px", cursor: "pointer" }),
                  onClick: ($event) => _ctx.webJumpFn(val),
                  class: "iconClick"
                }, {
                  default: withCtx(() => [
                    createVNode(_component_Link)
                  ]),
                  _: 2
                }, 1032, ["style", "onClick"])) : createCommentVNode("", true)
              ], 4);
            }), 128))
          ], 4);
        }), 128))
      ], 4),
      _ctx.isClone ? (openBlock(), createElementBlock("div", {
        key: 0,
        class: "roll-list__content-box",
        style: normalizeStyle({
          top: _ctx.cloneTop + "px",
          width: _ctx.isShadow ? "96%" : "100%"
        })
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData.content, (item, index) => {
          return openBlock(), createElementBlock("ul", {
            key: index,
            style: normalizeStyle({
              height: `${_ctx.aloneIndexArr.indexOf(index) === -1 ? _ctx.contentHeight : _ctx.aloneHeightArr[_ctx.aloneIndexArr.indexOf(index)].height}px`,
              color: _ctx.contentColor,
              fontSize: _ctx.contentSize + "px",
              backgroundColor: index % 2 === 1 ? _ctx.oddColor : _ctx.doubleColor,
              boxShadow: _ctx.isShadow ? `0px 0px 8px ${_ctx.shadowColor}` : ""
            })
          }, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(item, (val, i) => {
              return openBlock(), createElementBlock("li", {
                key: i,
                style: normalizeStyle({
                  width: _ctx.listData.headers[i].width + "%",
                  justifyContent: _ctx.textAlignOption,
                  borderLeft: _ctx.isBorder ? i !== 0 ? `1px solid ${_ctx.borderColor}` : "none" : "none"
                })
              }, [
                _ctx.linkIndex !== i ? (openBlock(), createElementBlock("span", {
                  key: 0,
                  style: normalizeStyle({ "-webkit-line-clamp": _ctx.clampNum })
                }, toDisplayString(val), 5)) : createCommentVNode("", true),
                _ctx.linkIndex === i ? (openBlock(), createBlock(_component_el_icon, {
                  key: 1,
                  style: normalizeStyle({ width: _ctx.iconWidth + "px", height: _ctx.iconWidth + "px", cursor: "pointer" }),
                  onClick: ($event) => _ctx.webJumpFn(val),
                  class: "iconClick"
                }, {
                  default: withCtx(() => [
                    createVNode(_component_Link)
                  ]),
                  _: 2
                }, 1032, ["style", "onClick"])) : createCommentVNode("", true)
              ], 4);
            }), 128))
          ], 4);
        }), 128))
      ], 4)) : createCommentVNode("", true)
    ], 36)) : createCommentVNode("", true),
    createElementVNode("div", {
      class: "table-roll-list__scroll",
      ref: "scrollBox",
      style: normalizeStyle({ height: _ctx.scrollBoxHeight + "px", opacity: _ctx.isOver ? 1 : 0 })
    }, [
      createElementVNode("div", {
        class: "table-roll-list__scrollbar",
        style: normalizeStyle({ height: _ctx.scrollHeight + "px", transform: `translateY(${_ctx.scrollActiveH}%)` }),
        onMouseover: _cache[5] || (_cache[5] = (...args) => _ctx.overFn && _ctx.overFn(...args)),
        onMouseout: _cache[6] || (_cache[6] = (...args) => _ctx.outFn && _ctx.outFn(...args)),
        onMousedown: _cache[7] || (_cache[7] = withModifiers((...args) => _ctx.downFn && _ctx.downFn(...args), ["stop"])),
        onMouseup: _cache[8] || (_cache[8] = withModifiers((...args) => _ctx.upFn && _ctx.upFn(...args), ["stop"]))
      }, null, 36)
    ], 4)
  ], 36);
}
var CoTableRollList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-731ccf9e"]]);
export { CoTableRollList as default };