perf(src/packages): 多个摄像头切换箭头显示

-<template>
-  <video
-    crossOrigin="anonymous"
-    :id="`my-player${index}`"
-    ref="videoRef"
-    class="video-js my-video vjs-theme-city vjs-big-play-centered"
-  >
-    <source :src="sourceSrc" />
-  </video>
-</template>
-<script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch } from 'vue'
-import videojs from 'video.js'
-import type { VideoJsPlayerOptions } from 'video.js'
-import 'video.js/dist/video-js.min.css'
-
-const props = defineProps({
-  sourceSrc: {
-    type: String
-  },
-  name: {
-    type: String
-  },
-  avatar: {
-    type: String
-  },
-  w: {
-    type: Number,
-    default: 300
-  },
-  h: {
-    type: Number,
-    default: 300
-  },
-  index: {
-    type: Number
-  }
-})
-
-// video标签
-const videoRef = ref<HTMLElement | null>(null)
-
-// video实例对象
-let videoPlayer: videojs.Player | null = null
-
-//options配置
-const options: VideoJsPlayerOptions = {
-  language: 'zh-CN', // 设置语言
-  controls: true, // 是否显示控制条
-  preload: 'auto', // 预加载
-  autoplay: true, // 是否自动播放
-  fluid: false, // 自适应宽高
-  poster: props?.avatar || '',
-  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
-  muted: true,
-  userActions: {
-    hotkeys: true
-  }
-}
-
-// 初始化videojs
-const initVideo = () => {
-  if (videoRef.value) {
-    // 创建 video 实例
-    videoPlayer = videojs(videoRef.value, options)
-  }
-}
-
-watch(
-  () => props.sourceSrc,
-  (newData: any) => {
-    // props.sourceSrc = newData
-    videoPlayer?.src(newData) as any
-    videoPlayer?.play()
-  },
-  {
-    immediate: true
-  }
-)
-
-onMounted(() => {
-  initVideo()
-})
-
-onUnmounted(() => {
-  handleVideoDispose()
-})
-
-//播放
-const handleVideoPlay = () => videoPlayer?.play()
-
-const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
-//暂停
-defineExpose({
-  handleVideoPlay,
-  handleVideoDispose
-})
-</script>
-
-<style lang="scss" scoped>
-.my-video {
-  width: 100%;
-  height: 100%;
-}
-</style>

 <template>
   <div class="banner-box" ref="root">
     <div class="wrapper">
-      <div
-        v-for="(item, index) in option.dataset"
-        :key="index + item"
-        :class="item.className"
-        :style="item.sty"
-      >
+      <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
         <CameraItem
           ref="cameraRef"
           :name="item.name"
@@ -24,7 +19,7 @@
     <a href="javascript:;" class="right" @click="changeSlide('right')"></a>
   </div>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="index">
 import { PropType, watch, toRefs, shallowReactive, onMounted, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import 'video.js/dist/video-js.min.css'
@@ -186,7 +181,7 @@ function changeSlide(dir: string) {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    z-index: 9;
+    z-index: 90000000;
     width: 50px;
     height: 50px;
     background-size: contain;
@@ -195,12 +190,12 @@ function changeSlide(dir: string) {
   }
   a.left {
     @extend .arrow;
-    background-image: url(./static/left.svg);
+    background-image: url('./static/left.svg');
     left: 0px;
   }
   a.right {
     @extend .arrow;
-    background-image: url(./static/right.svg);
+    background-image: url('./static/right.svg');
     right: 0px;
   }
 }

-<template>
-  <div class="banner-box" ref="root">
-    <n-grid x-gap="12" :y-gap="12" :cols="computedCols">
-      <n-gi v-for="(item, index) in option.dataset" :key="index + item">
-        <div class="camera-container">
-          <CameraItem
-            ref="cameraRef"
-            :name="item.name"
-            :avatar="item.avatar"
-            :key="item + index"
-            :sourceSrc="item.url"
-            :index="index"
-          />
-        </div>
-      </n-gi>
-    </n-grid>
-  </div>
-</template>
-<script setup lang="ts">
-import { PropType, toRefs, watch, shallowReactive, ref, computed } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import 'video.js/dist/video-js.min.css'
-import { option as configOption } from './config'
-import { CameraItem } from './components'
-
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-const { h } = toRefs(props.chartConfig.attr)
-
-const responsiveComputeValue = ref(0)
-
-const option = shallowReactive({
-  dataset: configOption.dataset
-})
-
-const computedCols = computed(() => {
-  if (option.dataset.length <= 1) return 1
-  if (option.dataset.length <= 4) return 2
-  return 3
-})
-
-const cameraRef = ref<InstanceType<typeof CameraItem>>()
-
-const responsive = (value: number) => {
-  responsiveComputeValue.value = value
-  if (option.dataset.length <= 2) responsiveComputeValue.value = value
-  if (option.dataset.length > 2 && option.dataset.length <= 4) responsiveComputeValue.value = value / 2.03
-  if (option.dataset.length > 4 && option.dataset.length <= 9) responsiveComputeValue.value = value / 3.1
-}
-
-watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    option.dataset = newData
-    responsive(h.value)
-  },
-  {
-    immediate: true,
-    deep: true
-  }
-)
-
-watch(
-  () => h.value,
-  newData => responsive(newData),
-  {
-    immediate: true
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.banner-box {
-  .camera-container {
-    height: v-bind('`${responsiveComputeValue}px`');
-  }
-}
-</style>