vue组件-文件树

最新推荐文章于 2024-09-15 07:25:01 发布

shayminsky

最新推荐文章于 2024-09-15 07:25:01 发布

阅读量2.7k

点赞数 1

分类专栏： vue学习文章标签： html vue-js 文件树文件树组件

本文链接：https://blog.csdn.net/shayminsky/article/details/78540100

版权

本文介绍了如何在Vue.js中创建一个文件树组件，详细讨论了组件的设计思路和实现过程，包括HTML结构、Vue.js指令的使用以及如何通过数据驱动展示文件层级结构。通过这个教程，读者将学会构建一个功能完善的文件树组件。

摘要由CSDN通过智能技术生成

本文主要是分析vue官方仓库里的文件树组件[vue github](https://github.com/vuejs/vue/tree/dev/examples/tree)
demo可以查看 https://codepen.io/shayminsky21/pen/xXwxgm
首先是html模板：

<li>
        <div
          //文件夹加粗表示
          :class="{bold: isFolder}"   
          //处理单击事件 打开闭合文件列表                                              
          @click="toggle"       
          //处理双击事件 双击子文件，子文件属性变为文件夹                                                         
          @dblclick="changeType">     
         //显示文件名                      
          {
  {model.