zxl-common-utils 0.0.1 → 0.0.3

package/README.md

@@ -1,9 +1,86 @@
 # zxl-common-utils
 
-一个基于 Vue 3 和 TypeScript 的通用工具库，封装各种常用方法、组件和工具。
+一个基于 Vue 3 和 TypeScript 的通用工具库，封装常用方法、组件与工具。
 
 ## 安装
 
 ```bash
 npm install zxl-common-utils
 ```
+
+## 使用组件
+### 滚动组件有两种：
+#### domAutoScroll  dom滚动
+
+```vue
+<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滚动
+
+```vue
+<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>
+```

package/lib/components/index.d.ts

@@ -2,5 +2,7 @@ declare const components: Record<string, any>;
 export default components;
 export declare const ComponentRatio: any;
 export declare const Image: any;
+export declare const domAutoScroll: any;
+export declare const echartsAutoScroll: any;
 export declare const TooltipBox: any;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAYA,QAAA,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,CAAC;AAY3C,eAAe,UAAU,CAAC;AAG1B,eAAO,MAAM,cAAc,KAA4B,CAAC;AACxD,eAAO,MAAM,KAAK,KAAmB,CAAC;AACtC,eAAO,MAAM,UAAU,KAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAYA,QAAA,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,CAAC;AAY3C,eAAe,UAAU,CAAC;AAG1B,eAAO,MAAM,cAAc,KAA4B,CAAC;AACxD,eAAO,MAAM,KAAK,KAAmB,CAAC;AACtC,eAAO,MAAM,aAAa,KAA2B,CAAC;AACtD,eAAO,MAAM,iBAAiB,KAA+B,CAAC;AAC9D,eAAO,MAAM,UAAU,KAAwB,CAAC"}