집 >웹 프론트엔드 >JS 튜토리얼 >Vue.js에서 축소 가능한 트리 메뉴를 구현하는 방법

Vue.js에서 축소 가능한 트리 메뉴를 구현하는 방법

亚连원래의: 2018-06-15 16:42:164643검색

이번 글에서는 확장/축소 트리 메뉴를 구축하면서 효과적으로 재귀 컴포넌트를 사용하는 방법을 보여드리겠습니다. 이 기사를 통해 Vue.js 재귀 구성 요소를 사용하여 축소 가능한 트리 메뉴를 구현하는 방법을 공유하겠습니다. 필요한 친구는 이를 참조할 수 있습니다.

Vue.js에서는 다음과 같은 재귀 구성 요소가 자체적으로 호출됩니다.

Vue.component(&#39;recursive-component&#39;, {
  template: `<!--Invoking myself!-->
       <recursive-component></recursive-component>`
 });

재귀 구성 요소는 블로그에서 댓글, 중첩 메뉴 또는 콘텐츠는 다르지만 기본적으로 동일한 유형의 상위 및 하위 항목을 표시하는 데 자주 사용됩니다. 예:

이제 확장/축소 트리 메뉴를 구축하여 단계별로 재귀 구성 요소를 사용하는 방법을 보여 드리겠습니다.

데이터 구조

트리 UI의 재귀 구성 요소는 일부 재귀 데이터 구조를 시각적으로 표현한 것입니다. 이 튜토리얼에서는 각 노드가 객체인

라벨 속성인 트리 구조를 사용합니다.

하위 노드가 있는 경우 노드 속성은 하나 이상의 노드의 배열 속성입니다.

모든 트리 구조와 마찬가지로 루트 노드가 있어야 하지만 깊이는 무한할 수 있습니다.

let tree = {
  label: &#39;root&#39;,
  nodes: [
   {
    label: &#39;item1&#39;,
    nodes: [
     {
      label: &#39;item1.1&#39;
     },
     {
      label: &#39;item1.2&#39;,
      nodes: [
       {
        label: &#39;item1.2.1&#39;
       }
      ]
     }
    ]
   }, 
   {
    label: &#39;item2&#39; 
   }
  ]
 }

재귀 구성 요소

TreeMenu라는 데이터 구조를 표시하는 재귀 구성 요소를 만들어 보겠습니다. 현재 노드의 레이블만 표시하고 하위 노드를 표시하기 위해 자신을 호출합니다. 파일 이름: TreeMenu.vue, 내용은 다음과 같습니다.

<template>
  <p class="tree-menu">
   <p>{{ label }}</p>
   <tree-menu 
    v-for="node in nodes" 
    :nodes="node.nodes" 
    :label="node.label"
   >
   </tree-menu>
  </p>
 </template>
 <script>
  export default { 
   props: [ &#39;label&#39;, &#39;nodes&#39; ],
   name: &#39;tree-menu&#39;
  }
 </script>

컴포넌트를 재귀적으로 사용하는 경우 먼저 Vue.comComponent에 대한 전역 정의를 만들거나 이름 속성을 지정해야 합니다. 그렇지 않으면 하위 구성 요소가 더 이상 호출할 수 없으며 정의되지 않은 "정의되지 않은 구성 요소 오류" 오류 메시지가 표시됩니다.

기본 이벤트

모든 재귀 함수와 마찬가지로 재귀를 종료하려면 기본 이벤트가 필요합니다. 그렇지 않으면 렌더링이 무한정 계속되어 결국 스택 오버플로가 발생합니다.

트리 메뉴에서 자식이 없는 노드에 도달하면 재귀를 중지하려고 합니다. v-if 를 통해 이 작업을 수행할 수 있지만 v-for 사용을 선택하면 노드 배열에 추가 정의가 없으면 트리 메뉴 구성 요소가 호출됩니다. template.vue 파일은 다음과 같습니다:

<template>
  <p class="tree-menu">
   ...
   <!--If `nodes` is undefined this will not render-->
   <tree-menu v-for="node in nodes"></tree-menu>
 </template>

Usage

이제 이 구성 요소를 어떻게 사용합니까? 먼저 데이터 속성과 정의된 트리 메뉴 구성 요소를 포함하는 데이터 구조를 사용하여 Vue 인스턴스를 선언합니다. app.js 파일은 다음과 같습니다.

import TreeMenu from &#39;./TreeMenu.vue&#39;
 let tree = {
  ...
 }
 new Vue({
  el: &#39;#app&#39;,
  data: {
   tree
  },
  components: {
   TreeMenu
  }
 })

데이터 구조에 루트 노드가 있다는 점을 기억하세요. 소품에 대한 루트 노드 속성을 사용하여 기본 템플릿에서 TreeMenu 구성 요소를 재귀적으로 호출하기 시작합니다.

<p id="app">
  <tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu>
 </p>

현재 모습은 다음과 같습니다.

올바른 자세

시각적으로 "깊이"를 식별합니다. of the sub-com넌트”는 사용자가 UI에서 데이터 구조에 대한 느낌을 얻을 수 있도록 하는 것이 좋습니다. 각 수준에서 하위 노드를 들여쓰기하여 이를 달성하겠습니다.

이는 TreeMenu를 통해 깊이 소품 정의를 추가하여 달성됩니다. 이 값을 사용하여 인라인 스타일을 변환과 동적으로 바인딩합니다. 변환에 대한 CSS 규칙: 변환은 각 노드의 레이블에 사용되어 들여쓰기를 생성합니다. template.vue는 다음과 같이 수정됩니다**:** 기본 템플릿에서

<template>
  <p class="tree-menu">
   <p :style="indent">{{ label }}</p>
   <tree-menu 
    v-for="node in nodes" 
    :nodes="node.nodes" 
    :label="node.label"
    :depth="depth + 1"
   >
   </tree-menu>
  </p>
 </template>
 <script>
  export default { 
   props: [ &#39;label&#39;, &#39;nodes&#39;, &#39;depth&#39; ],
   name: &#39;tree-menu&#39;,
   computed: {
    indent() {
     return { transform: `translate(${this.depth * 50}px)` }
    }
   }
  }
 </script>

깊이 속성은 0부터 시작합니다. 위의 구성 요소 템플릿에서 이 값이 하위 노드에 전달될 때마다 증가하는 것을 볼 수 있습니다.

<p id="app">
  <tree-menu 
   :label="tree.label" 
   :nodes="tree.nodes"
   :depth="0"
  ></tree-menu>
 </p>

참고: 깊이 값을 V바인딩하여 문자열이 아닌 JavaScript 숫자 유형인지 확인하세요.

Expand/Collapse

재귀적 데이터 구조는 클 수 있으므로 이를 표시하기 위한 좋은 UI 트릭은 사용자가 필요한 노드를 확장하거나 축소할 수 있도록 루트 노드를 제외한 모든 노드를 숨기는 것입니다.

이를 위해 로컬 속성 showChildren을 추가하겠습니다. 값이 False이면 하위 노드가 렌더링되지 않습니다. 이 값은 노드를 클릭하여 전환되어야 하므로 이를 관리하려면 클릭 이벤트 리스너 메소드인ToggleChildren을 사용해야 합니다. template.vue 파일은 다음과 같이 수정됩니다**:**

<template>
  <p class="tree-menu">
   <p :style="indent" @click="toggleChildren">{{ label }}</p>
   <tree-menu 
    v-if="showChildren"
    v-for="node in nodes" 
    :nodes="node.nodes" 
    :label="node.label"
    :depth="depth + 1"
   >
   </tree-menu>
  </p>
 </template>
 <script>
  export default { 
   props: [ &#39;label&#39;, &#39;nodes&#39;, &#39;depth&#39; ],
   data() {
    return { showChildren: false }
   },
   name: &#39;tree-menu&#39;,
   computed: {
    indent() {
     return { transform: `translate(${this.depth * 50}px)` }
    }
   },
   methods: {
    toggleChildren() {
     this.showChildren = !this.showChildren;
    }
   }
  }
 </script>

Summary

이런 식으로 작업 트리 메뉴가 생겼습니다. 마무리 작업으로 더하기/빼기 아이콘을 추가하여 UI를 더 눈에 띄게 만들 수 있습니다. 또한 원본 showChildren에 훌륭한 글꼴과 컴퓨팅 기능을 추가했습니다.

CodePen(https://codepen.io/anthonygore/pen/PJKNqa)에 가서 어떻게 구현했는지 확인해 보세요.

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

Vue.js에서 축소 가능한 트리 메뉴를 구현하는 방법

관련 기사