vue3 视频监控分屏

Vue 3 可以使用组件化的方式实现视频监控分屏功能。以下是一个简单的示例代码：

<template>
  <div>
    <div class="controls">
      <button @click="addScreen">添加屏幕</button>
    </div>

    <div class="screens">
      <div v-for="(screen, index) in screens" :key="index" class="screen">
        <video :src="screen.src" controls></video>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screens: [] // 存储视频源的数组
    };
  },
  methods: {
    addScreen() {
      // 在 screens 数组中添加新的视频源
      this.screens.push({ src: '视频源地址' });
    }
  }
};
</script>

<style>
.screen {
  width: 50%;
  float: left;
}
</style>

在上述代码中，我们使用了一个 `screens` 数组来存储视频源的地址。通过点击 "添加屏幕" 的按钮，可以向数组中添加新的视频源。然后使用 `v-for` 指令遍历 `screens` 数组，并在页面上展示每个视频源的 `<video>` 元素。

当然，这只是一个简单的示例，你可以根据实际需求进行拓展和优化。比如可以添加删除屏幕的功能，设置视频源的参数等等。希望对你有所帮助！