Vue 기반 가계도 다이어그램 생성 도구 공유-프런트엔드 Q&A-php.cn

Vue 기반 가계도 다이어그램 생성 도구 공유

PHPz

풀어 주다： 2023-04-13 14:08:14

원래의

1113명이 탐색했습니다.

최근 몇 년간 친족관계의 분권화와 가족문화의 점진적인 퇴색으로 인해 족보 역시 더욱 주목을 받고 있습니다. 계보는 가족의 혈통을 기록하는 중요한 도구일 뿐만 아니라, 가족의 역사와 문화를 이해하고 가족의 화합을 도모하는 중요한 수단입니다. 간단하고 명확한 계보를 만드는 방법은 오늘날 많은 가족이 직면한 문제가 되었습니다. 오늘 편집자는 Vue를 기반으로 한 가계도 제작 도구를 소개합니다.

Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크로 오늘날 가장 인기 있는 JavaScript 프레임워크 중 하나입니다. Vue.js의 인기로 인해 많은 Vue.js 플러그인과 구성 요소가 개발되었으며 가계도 다이어그램 생성 도구도 그중 하나입니다.

이 Vue 플러그인은 "vue-org-tree"라고 하며, 간단하고 이해하기 쉬운 가계도 다이어그램을 빠르게 구축하는 데 도움이 됩니다. 이 플러그인을 사용하려면 먼저 Vue.js를 설치한 후 "vue-org-tree" 플러그인을 도입해야 합니다. 구체적인 단계는 다음과 같습니다.

Install Vue.js

입력하세요. Vue.js를 설치하려면 명령줄에서 지침을 따르세요.

npm install vue

로그인 후 복사

"vue-org-tree" 플러그인 소개

Vue.js 프로젝트에서 구성 요소 폴더를 입력하고 새 orgTree.vue 파일을 만듭니다. 폴더에. orgTree.vue 파일에 다음 코드를 입력합니다.

<template>
  <div>
    <tree :data="data" :options="options"></tree>
  </div>
</template>
 
<script>
  import tree from 'vue-org-tree'
  export default {
    components: {
      'tree': tree
    },
    data: function () {
      return {
        data: yourData, // 输入家族成员的数据
        options: {
          draggable: false, // 是否支持拖拽
          animated: false, // 是否支持动画
          indent: 20 // 缩进控制
        }
      }
    }
  }
</script>

로그인 후 복사

위 코드에서는 "vue-org-tree" 플러그인을 도입하고 <tree> 태그를 통해 가계도 다이어그램을 렌더링했습니다. 입력을 통해 패밀리 구성원의 데이터를 입력한 다음 이를 'data' 속성에 바인딩하고(특정 데이터 형식은 플러그인 설명서를 참조하세요) 마지막으로 'options' 속성을 사용하여 드래그, 애니메이션을 제어할 수 있습니다. 그리고 가계도 다이어그램의 들여쓰기.

위의 기본 콘텐츠 외에도 "vue-org-tree" 플러그인은 다음 기능도 지원합니다: