vue实现树形视频
Vue 实现树形视频列表
数据准备
树形结构通常采用嵌套的数组对象，每个节点包含 id、label、children 等字段。例如视频分类数据：
const treeData = [
{
id: 1,
label: '电影',
children: [
{ id: 11, label: '动作片', videoUrl: '...' },
{ id: 12, label: '科幻片', videoUrl: '...' }
]
},
{
id: 2,
label: '电视剧',
children: [
{ id: 21, label: '国产剧', children: [...] }
]
}
]递归组件实现
通过 Vue 的递归组件特性渲染树形结构：
<template>
<ul>
<li v-for="node in treeData" :key="node.id">
<span @click="toggleExpand(node)">{{ node.label }}</span>
<video-player v-if="node.videoUrl" :src="node.videoUrl" />
<tree-node
v-if="node.children && node.expanded"
:treeData="node.children"
/>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: ['treeData'],
methods: {
toggleExpand(node) {
this.$set(node, 'expanded', !node.expanded)
}
}
}
</script>视频播放集成
使用第三方库如 vue-video-player 实现视频嵌入：
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer)组件中直接绑定视频地址：
<video-player :src="currentVideo" :options="playerOptions" />交互优化
- 添加展开/折叠图标：使用
Font Awesome或自定义图标 - 懒加载视频：仅在节点展开时加载视频资源
- 动画过渡：通过 Vue 的
<transition>添加展开动画
完整示例结构
<template>
<div class="video-tree">
<tree-node :treeData="treeData" />
</div>
</template>
<script>
import TreeNode from './TreeNode.vue'
export default {
components: { TreeNode },
data() {
return {
treeData: [...] // 树形数据
}
}
}
</script>关键点说明
- 递归组件必须声明
name属性 - 使用
$set确保响应式更新展开状态 - 视频组件建议按需加载以提升性能
- 深层嵌套时考虑虚拟滚动优化
样式建议
.video-tree ul {
list-style: none;
padding-left: 20px;
}
.video-tree li {
margin: 5px 0;
cursor: pointer;
}
