vue3 视频监控分屏
时间: 2023-07-23 13:02:34 浏览: 179
Vue 3 可以使用组件化的方式实现视频监控分屏功能。以下是一个简单的示例代码:
```html
<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>` 元素。
当然,这只是一个简单的示例,你可以根据实际需求进行拓展和优化。比如可以添加删除屏幕的功能,设置视频源的参数等等。希望对你有所帮助!
阅读全文