replay-view-component

v0.0.0

Published

7 months ago

A Vue 3 component library for replay view functionality

0High
0Medium
0Low

jediborn

vue vue3 component replay view

Replay View Component

一个基于 Vue 3 的回放视图组件库，提供强大的数据回放和可视化功能。

特性

🎯 基于 Vue 3 + TypeScript
🎨 支持 Element Plus UI 组件库
📊 集成 ECharts 图表功能
🗺️ 支持地图可视化
📱 响应式设计
🎮 支持拖拽操作
🔄 数据回放功能

安装

NPM 安装

npm install replay-view-component

CDN 引入

<!-- 引入依赖 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/pinia@2/dist/pinia.iife.js"></script>
<script src="https://unpkg.com/vue-demi@latest/lib/index.iife.js"></script>
<script src="https://unpkg.com/element-plus@2/dist/index.full.js"></script>
<script src="https://unpkg.com/lodash@4/lodash.min.js"></script>
<script src="https://unpkg.com/echarts@5/dist/echarts.min.js"></script>

<!-- 引入组件库 -->
<script src="https://unpkg.com/replay-view-component/dist/replay-view.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/replay-view-component/dist/replay-view.css">

使用方法

方式一：Vue 应用中使用

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import ReplayView from 'replay-view-component'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(ElementPlus)
app.use(ReplayView)

app.mount('#app')

方式二：全局注册（CDN）

<!DOCTYPE html>
<html>
<head>
  <title>Replay View Demo</title>
  <!-- 引入依赖 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/pinia@2/dist/pinia.iife.js"></script>
  <script src="https://unpkg.com/vue-demi@latest/lib/index.iife.js"></script>
  <script src="https://unpkg.com/element-plus@2/dist/index.full.js"></script>
  <script src="https://unpkg.com/lodash@4/lodash.min.js"></script>
  <script src="https://unpkg.com/echarts@5/dist/echarts.min.js"></script>
  
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/replay-view-component/dist/replay-view.umd.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/replay-view-component/dist/replay-view.css">
</head>
<body>
  <div id="app">
    <replay-view></replay-view>
  </div>
  
  <script>
    const { createApp } = Vue
    const { createPinia } = Pinia
    
    const app = createApp({
      template: '<replay-view></replay-view>'
    })
    
    const pinia = createPinia()
    app.use(pinia)
    app.use(ElementPlus)
    app.use(ReplayView.install)
    
    app.mount('#app')
  </script>
</body>
</html>

方式三：单个组件使用

<template>
  <div>
    <replay-view 
      :config="config"
      @data-change="handleDataChange"
    />
  </div>
</template>

<script>
import { ReplayView } from 'replay-view-component'

export default {
  components: {
    ReplayView
  },
  data() {
    return {
      config: {
        // 配置选项
      }
    }
  },
  methods: {
    handleDataChange(data) {
      console.log('数据变化:', data)
    }
  }
}
</script>

组件属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | config | Object | {} | 组件配置对象 | | data | Array | [] | 回放数据 | | autoPlay | Boolean | false | 是否自动播放 |

事件

| 事件名 | 参数 | 说明 | |--------|------|------| | data-change | data | 数据变化时触发 | | play-start | - | 开始播放时触发 | | play-pause | - | 暂停播放时触发 | | play-end | - | 播放结束时触发 |

依赖

Vue 3.x
Element Plus 2.x
Pinia 2.x
ECharts 5.x
Lodash 4.x

浏览器支持

Chrome >= 87
Firefox >= 78
Safari >= 14
Edge >= 88

许可证

MIT License

更新日志

v1.0.0

初始版本发布
支持基础回放功能
集成地图可视化
支持图表展示