zxl-common-utils

zxl-common-utils

一个基于 Vue 3 和 TypeScript 的通用工具库，封装常用方法、组件与工具。

安装

npm install zxl-common-utils

使用组件

滚动组件有两种：

domAutoScroll dom滚动

<script setup lang="ts">
import { ref, computed } from 'vue';
import { domAutoScroll } from 'zxl-common-utils';

const props = defineProps<{
  data: Array<{ id: number; name: string }>;
}>();

const scrollAreaRef = ref<HTMLElement | null>(null);

const bindCloneOverlayEvents = (cloneContainer: HTMLElement, index: number) => {
  const curssEl = cloneContainer.querySelector('.curss');
  cloneContainer.addEventListener('mouseenter', () => {
    curssEl?.classList.add('curss-h');
  });
  cloneContainer.addEventListener('mouseleave', () => {
    curssEl?.classList.remove('curss-h');
  });
};
</script>

<template>
  <domAutoScroll
    :enabled="true"
    :item-count="data.length"
    :scroll-config="{mode: 'step', speed: 0.5, stepInterval: 1000, stepDuration: 500}"
    :on-clone-created="bindCloneOverlayEvents"
  >
    <div v-for="item in props.data" :key="item.id" class="item">
      {{ item.name }}
    </div>
  </domAutoScroll>
</template>

echartsAutoScroll echarts滚动

<script setup lang="ts">
import { ref } from 'vue';
import { echartsAutoScroll } from 'zxl-common-utils';
const chartRef = ref<HTMLElement | null>(null);

const bindCloneOverlayEvents = (cloneContainer: HTMLElement) => {
  事件逻辑按照自己的来，
};
const getOptions = () => {
  return {
    grid: ...,
    legend: {show: false},
    tooltip: ..,
    xAxis: ...,
    yAxis: ...,
    series: ...,
  } as echarts.EChartsOption;
};
</script>

<template>
  <echartsAutoScroll
   :chartRef="chartRef"
   :enabled="true"
   :itemCount="5"
   :getOptions="getOptions"
   :scrollConfig="{ speed: 0.5, stepInterval: 1000, stepDuration: 500 }"
   @onCloneCreated="bindCloneOverlayEvents"
  >
    <div ref="chartRef" class="echarts-render"></div>
  </echartsAutoScroll>
</template>