집 >웹 프론트엔드 >JS 튜토리얼 >Vue 파일 트리 구성 요소 사용에 대한 자세한 설명

Vue 파일 트리 구성 요소 사용에 대한 자세한 설명

亚连원래의: 2018-05-28 11:27:592412검색

이 글에서는 주로 vue 파일 트리 컴포넌트의 사용 방법을 자세히 소개하는데, 이는 특정 참조 가치가 있습니다. 관심 있는 친구는 이를 참조할 수 있습니다.

이 글의 예는 모든 사람을 위해 Vue 파일 트리 컴포넌트의 구현 방법을 공유합니다. 구체적인 내용은 다음과 같습니다

이 글은 주로 Vue 공식 웨어하우스 [vue github]에 있는 파일 트리 컴포넌트를 분석합니다

첫 번째는 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>

다음은 컴포넌트 부분의 소스 코드입니다:

Vue.component(&#39;item&#39;, {
 template: &#39;#item-template&#39;,
 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, &#39;children&#39;, [])
  this.addChild()
  this.open = true
  }
 }, //双击触发，通过给文件增加子节点来使文件属性变成文件夹
 addChild: function () {
  this.model.children.push({
  name: &#39;new stuff&#39;
  })  //点击文件夹里的+节点触发 为文件夹添加一个新文件
 }   
 }
})

그래서 디자인 아이디어는 객체에 하위 노드가 있는지 확인하여 폴더인지 파일인지 확인한 다음 5083cbefc9e5095dae6431462e2af988 구성 요소를 재귀적으로 재사용하여 파일 트리의 효과를 표시하는 것입니다. .

마지막은 수신 구성요소의 데이터 형식입니다.

var data = {
 name: &#39;My Tree&#39;,
 children: [
 { name: &#39;hello&#39; },
 { name: &#39;wat&#39; },
 {
  name: &#39;child folder&#39;,
  children: [
  {
   name: &#39;child folder&#39;,
   children: [
   { name: &#39;hello&#39; },
   { name: &#39;wat&#39; }
   ]
  },
  { name: &#39;hello&#39; },
  { name: &#39;wat&#39; },
  {
   name: &#39;child folder&#39;,
   children: [
   { name: &#39;hello&#39; },
   { name: &#39;wat&#39; }
   ]
  }
  ]
 }
 ]
}

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue 파일 트리 구성 요소 사용에 대한 자세한 설명

관련 기사