So verwenden Sie die Vue-Dateibaumkomponente

Dieses Mal zeige ich Ihnen, wie Sie die Vue-Dateibaumkomponente verwenden und welche Vorsichtsmaßnahmen bei der Verwendung der Vue-Dateibaumkomponente gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

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

Die Demo kann angezeigt werdenhttps://codepen.io/shayminsky21/ pen/xXwxgm

Zuerst ist die HTML-Vorlage:

<li>
  <p
   //文件夹加粗表示
   :class="{bold: isFolder}" 
   //处理单击事件 打开闭合文件列表            
   @click="toggle"  
   //处理双击事件 双击子文件，子文件属性变为文件夹               
   @dblclick="changeType">  
   //显示文件名      
   {{model.name}}
  //若是文件夹的话则显示[+]来控制文件夹的开关闭合
   <span v-if="isFolder">[{{open ? '-' : '+'}}]</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>

Als nächstes 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 Designidee besteht also darin, festzustellen, ob das Objekt hat untergeordnete Knoten, um festzustellen, ob es sich um einen Ordner oder eine Datei handelt, und verwenden Sie dann rekursiv die Komponente , 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' }
   ]
  }
  ]
 }
 ]
}

Auf Basis dieser Grundstruktur können Sie die Funktion und Darstellungswirkung des Dateibaums weiter ausbauen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie js, um die Schlüsselwertzeichenfolge in eine JSON-Zeichenfolge umzuwandeln

Anleitung Verwenden Sie Angular4 in der Datenkommunikation in mehreren Komponenten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Vue-Dateibaumkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!