Detaillierte Erläuterung der Verwendung der Vue-Dateibaumkomponente

Dieser Artikel stellt hauptsächlich die Verwendung der Vue-Dateibaumkomponente im Detail vor, die einen bestimmten Referenzwert hat.

Das Beispiel dieses Artikels teilt den Vue-Dateibaum mit allen Die Methode der Komponente dient als Referenz.

Dieser Artikel analysiert hauptsächlich die Dateibaumkomponente im offiziellen Vue-Warehouse [vue github]

Die erste ist die HTML-Vorlage :

<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>

Das Folgende ist der Quellcode des Komponententeils:

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'
  })  //点击文件夹里的+节点触发 为文件夹添加一个新文件
 }   
 }
})

Die Entwurfsidee besteht also darin, zu beurteilen, ob das Objekt über untergeordnete Knoten verfügt, um zu bestimmen, ob es sich um einen Ordner oder eine Datei handelt. Anschließend wird die 5083cbefc9e5095dae6431462e2af988-Komponente rekursiv wiederverwendet, um die Auswirkung des Dateibaums anzuzeigen.

Das letzte ist das Datenformat der eingehenden Komponente:

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' }
   ]
  }
  ]
 }
 ]
}

Das Obige ist, was ich hoffentlich für alle zusammengestellt habe Es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Native NodeJS verwendet WebSocket-Code-Sharing

Detaillierte Erläuterung der Darstellung von Seitenressourcen durch NodeJS durch Antwort-Writeback

Beispielcode für die Vue-Dropdown-Listenfunktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Vue-Dateibaumkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!