当前位置：首页 > VUE

vue实现树形视频

2026-03-08 22:20:45VUE

Vue实现树形视频结构

使用Vue构建树形视频结构需要结合组件递归和数据嵌套。以下是具体实现方法：

数据准备 树形视频数据通常包含嵌套结构，例如：

const videoTreeData = {
  id: 1,
  name: '主视频',
  children: [
    {
      id: 2,
      name: '子视频1',
      children: []
    }
  ]
}

递归组件实现 创建可递归调用的树形组件：

<template>
  <div class="video-node">
    <div @click="toggle">{{ video.name }}</div>
    <div v-show="isOpen" v-if="video.children && video.children.length">
      <video-tree 
        v-for="child in video.children" 
        :key="child.id" 
        :video="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoTree',
  props: {
    video: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

样式优化 为树形结构添加视觉层次：

.video-node {
  margin-left: 20px;
  cursor: pointer;
}
.video-node > div:first-child {
  padding: 8px;
  background: #f5f5f5;
}

视频播放集成 在节点点击事件中添加视频播放功能：

methods: {
  playVideo(videoId) {
    // 调用视频播放API
    console.log('播放视频:', videoId)
  },
  toggle() {
    this.isOpen = !this.isOpen
    this.playVideo(this.video.id)
  }
}

动态加载子节点 实现懒加载子视频数据：

async loadChildren() {
  if (!this.video.childrenLoaded && this.video.hasChildren) {
    const res = await fetch(`/api/videos/${this.video.id}/children`)
    this.video.children = await res.json()
    this.video.childrenLoaded = true
  }
  this.isOpen = !this.isOpen
}

性能优化 对于大型树结构，可使用虚拟滚动：

<template>
  <div style="height: 500px">
    <RecycleScroller 
      :items="flattenedTree"
      :item-size="50"
      key-field="id"
    >
      <template v-slot="{ item }">
        <video-tree :video="item" />
      </template>
    </RecycleScroller>
  </div>
</template>

状态管理 对于复杂交互，建议使用Vuex：

const store = new Vuex.Store({
  state: {
    videoTree: []
  },
  mutations: {
    UPDATE_VIDEO_TREE(state, payload) {
      state.videoTree = payload
    }
  }
})

完整组件集成 在主组件中使用树形组件：

vue实现树形视频

<template>
  <div>
    <h2>视频目录</h2>
    <video-tree :video="videoTreeData" />
  </div>
</template>

<script>
import VideoTree from './VideoTree.vue'

export default {
  components: {
    VideoTree
  },
  data() {
    return {
      videoTreeData: {} // 从API获取或本地定义
    }
  },
  created() {
    this.fetchVideoTree()
  },
  methods: {
    async fetchVideoTree() {
      const res = await fetch('/api/video-tree')
      this.videoTreeData = await res.json()
    }
  }
}
</script>