@zia_leung/common-utils

通用工具库，包含常用的 JavaScript 工具函数和 Vue 3 组件。

安装

npm install @zia_leung/common-utils

使用

1. 工具函数

import { loadImage } from '@zia_leung/common-utils';

2. Vue 组件

TimelinePlayer 时间轴播放器

<template>
  <TimelinePlayer
    :timeData="timeData"
    :currentIndex="currentIndex"
    :playInterval="1100"
    :autoPlay="false"
    primaryColor="#409EFF"
    @change="handleTimeChange"
    @play-state-change="handlePlayStateChange"
  />
</template>

<script setup>
import { ref } from 'vue';
import { TimelinePlayer } from '@zia_leung/common-utils';
// 引入 iconfont 样式（必需）
import '@zia_leung/common-utils/styles/iconfont.css';

const timeData = ref([
  { fcTime: '2025-01-01 00:00:00' },
  { fcTime: '2025-01-01 01:00:00' },
  { fcTime: '2025-01-01 02:00:00' },
]);

const currentIndex = ref(0);

const handleTimeChange = (index, item) => {
  console.log('时间改变:', index, item);
};

const handlePlayStateChange = (isPlaying) => {
  console.log('播放状态:', isPlaying);
};
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | timeData | 时间数据数组 | Array | [] | | currentIndex | 当前索引 | Number | 0 | | playInterval | 播放间隔（毫秒） | Number | 1100 | | autoPlay | 自动播放 | Boolean | false | | timeFormatter | 时间格式化函数 | Function | - | | primaryColor | 主题色 | String | #409EFF |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | change | 时间索引改变时触发 | (index, item) | | play-state-change | 播放状态改变时触发 | (isPlaying) |

依赖

• Vue 3.x
• moment

License

MIT