Explication détaillée de l'utilisation du composant d'arborescence de fichiers vue

Cet article présente principalement en détail l'utilisation du composant d'arborescence de fichiers vue, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage l'arborescence de fichiers vue avec tout le monde. La méthode du composant est pour votre référence. Le contenu spécifique est le suivant

Cet article analyse principalement le composant d'arborescence de fichiers dans l'entrepôt officiel de vue [vue github]

Le premier est le modèle html. :

<li>
  <p
   //文件夹加粗表示
   :class="{bold: isFolder}" 
   //处理单击事件 打开闭合文件列表            
   @click="toggle"  
   //处理双击事件 双击子文件，子文件属性变为文件夹               
   @dblclick="changeType">  
   //显示文件名      
   {{model.name}}
  //若是文件夹的话则显示[+]来控制文件夹的开关闭合
   <span v-if="isFolder">[{{open ? &#39;-&#39; : &#39;+&#39;}}]</span>
  </p>
  <ul v-show="open" v-if="isFolder">
  //利用v-for显示子文件列表，通过递归使用item组件来完成文件树
   <item
   class="item"
   v-for="model in model.children"
   :model="model">
   </item>
   //增加一个+标记，单击可以增加子文件
   <li class="add" @click="addChild">+</li>
  </ul>
</li>

Vient ensuite le code source du composant :

Vue.component('item', {
 template: '#item-template',
 props: {
 model: Object //将文件数据通过props传入
 },
 data: function () {
 return {
  open: false  //open表示文件夹闭合状态
 }
 },
 computed: {
 isFolder: function () {
  return this.model.children &&
  this.model.children.length
 }
 }, //计算对象是否有子节点并且子节点数大于0来判断是否是文件夹
 methods: {
 toggle: function () {
  if (this.isFolder) {
  this.open = !this.open
  }
 },    //控制文件夹闭合的方法 单击触发改变open
 changeType: function () {
  if (!this.isFolder) {
  Vue.set(this.model, 'children', [])
  this.addChild()
  this.open = true
  }
 }, //双击触发，通过给文件增加子节点来使文件属性变成文件夹
 addChild: function () {
  this.model.children.push({
  name: 'new stuff'
  })  //点击文件夹里的+节点触发 为文件夹添加一个新文件
 }   
 }
})

Donc la conception L'idée est de déterminer si l'objet a des nœuds enfants pour déterminer s'il s'agit d'un dossier ou d'un fichier, puis de réutiliser de manière récursive le composant 5083cbefc9e5095dae6431462e2af988

Le dernier est le format de données du composant entrant :

var data = {
 name: 'My Tree',
 children: [
 { name: 'hello' },
 { name: 'wat' },
 {
  name: 'child folder',
  children: [
  {
   name: 'child folder',
   children: [
   { name: 'hello' },
   { name: 'wat' }
   ]
  },
  { name: 'hello' },
  { name: 'wat' },
  {
   name: 'child folder',
   children: [
   { name: 'hello' },
   { name: 'wat' }
   ]
  }
  ]
 }
 ]
}

Ce qui précède est ce que j'ai compilé pour tout le monde, J'espère que cela sera utile à l'avenir. Utile à tout le monde.

Articles connexes :

Nodejs natif utilise le partage de code websocket

Explication détaillée des ressources de la page de rendu de nodejs via l'écriture de réponse

exemple de code de fonction de liste déroulante vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!