[email protected]

基础导航栏，可自定义背景色、标题，图标，留有插槽。

示例

基础用法

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/video-monitor
yarn add @ths-base/video-monitor

使用

import TVideoMonitor from '@ths-base/video-monitor'
import '@ths-base/video-monitor/lib/index.css'
createApp(App).use(TVideoMonitor)

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。 制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(TVideoMonitor)

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | |-------------------| ------------------ | ------- | -------------------- | ------ | ------ | | c-style | 自定义样式 | object | -- | -- | | | cameraCode | 监控点位 ID | String | -- | -- | | | basePath | 视频插件存储的路径 | String | -- | ./ | | | playerType | 播放器类型 | String | RealTime | Playback | -- | | | longitude | 经度 | String | -- | -- | | | latitude | 纬度 | String | -- | -- | | | playbackStartTime | 回放视频开始时间 | String | -- | -- | | | playbackEndTime | 回放视频结束时间 | String | -- | -- | | | realPlayUrl | 直播地址 | String | -- | -- | | | talkUrl | 对讲地址 | String | -- | -- | | | playbackUrl | 回放地址 | String | -- | -- | | | angle | 角度 | Number | -- | 0 | | | recordingDisabled | 可录制功能 | Boolean | -- | false | | | intercomDisabled | 可对讲功能 | Boolean | -- | false | | | iconPath | 所有图标的路径 | Object | -- | false | |

c-style 的属性

| 参数 | 允许接收的状态 | 说明 | --- | | ------------------ | ---------------------------- | --------------------- | --- | | wrapper | default | 容器 | | | videoContainer | default | 视频容器 | | | video | default | 视频播放器 | | | playerLoading | default | 加载中状态背景 | | | loadingIcon | default | 加载中状态的图标 | | | miniMap | default | 小地图 | | | locationIcon | default | 定位图标 | | | steeringWheel | default | 方向盘 | | directionArrowIcon | default | hover | 方向箭头图标 | | | statusTip | default | 录制、对话状态提示 | | | toolbarContainer | default | 工具条容器 | | | toolbarLeft | default | 工具条容器左侧区域 | | | toolbarRight | default | 工具条容器左侧区域 | | | toolbarIcon | default | hover | disabled | 工具条中的图标 | | | volumeContainer | default | 音量调节容器 包含图标 | | | volumePanel | default | 音量调节面板 | | | volumeSliderButton | default | 音量调节滑块 | | | volumeSliderRunway | default | 音量调节轨道 | | | volumeSliderBar | default | 音量调节进度条 | | | volumeLabel | default | 音量调节显示的文字 | | | actionContainer | default | 操作容器 | | | switchButton | default | hover | 切换按钮 | |

iconPath 的属性

| 参数 | 类型 | 描述 | | ---------- | ------- | ---------------- | | arrow | default | 云台控制的箭头 | | circle | default | 箭头背景 | | location | default | 地图中心定位图标 | | photo | default | 截图图标 | | play | default | 开始播放图标 | | talk | default | 开始对讲图标 | | record | default | 开始录制图标 | | stopRecord | default | 结束录制图标 | | sound | default | 开启声音图标 | | soundNone | default | 禁止声音图标 | | fullScreen | default | 全屏图标 |

事件

| 事件名称 | 说明 | 回调参数 | | ---------- | ------------------ | ---------------------------------------------------------------------------------------------- | | steer | 控制云台事件 | { cameraCode: props.cameraCode // 监控点位 ID, direction // 操作方向 LEFT、UP、DOWN、RIGHT , } | | switchMode | 切换视频模式的事件 | Realtime、Playback |

作者：张金秀