uniapp에서 트리 메뉴 구성 요소를 구현하는 방법
소개:
트리 메뉴는 일반적인 메뉴 구조로, 일반적으로 플랫 데이터 구조를 표시하는 데 사용되며 트리 구조 형태로 사용자에게 제공됩니다. uniapp에서는 컴포넌트 개발 아이디어를 활용해 유니버설 트리 메뉴 컴포넌트를 구현할 수 있는데, 이는 개발자가 다른 프로젝트에서 재사용하기 편리합니다. 이 기사에서는 uniapp에서 트리 메뉴 구성 요소를 구현하는 방법을 소개하고 관련 코드 예제를 제공합니다.
구현 단계:
1단계: 트리 메뉴 구성 요소 만들기
먼저 uniapp 프로젝트에서 트리 메뉴 구성 요소를 만들고 이름을 TreeMenu로 지정합니다.
1.1 구성 요소 디렉터리에 새 폴더를 만들고 이름을 TreeMenu로 지정합니다.
1.2 TreeMenu 디렉터리에 TreeMenu.vue(컴포넌트 본문), treeMenu.css(컴포넌트 스타일), index.js(컴포넌트 등록)의 세 가지 파일을 만듭니다.
2단계: TreeMenu 컴포넌트 작성
다음으로 TreeMenu.vue 파일에서 트리 메뉴 컴포넌트의 특정 콘텐츠를 정의합니다.
<script><br>기본값 내보내기 {<br> 소품: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data: { type: Array, default: () => [] }</pre><div class="contentsignin">로그인 후 복사</div></div><p> },<br> 메소드: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>toggleChildren(item) { item.open = !item.open; }</pre><div class="contentsignin">로그인 후 복사</div></div><p>}<br>}<br></script>
<스타일 범위>
.tree-menu {
여백: 0;
패딩: 0;
}
.tree-menu- 항목 {
padding-left: 20px;
커서: 포인터;
}
.icon {
디스플레이: inline-block;
너비: 10px;
높이: 10px;
margin-right: 5px;
배경색: #000;
}
.icon-open {
background-color: #f00;
}
3단계: TreeMenu 구성요소 등록
index.js 파일에서 TreeMenu 구성요소를 전역 구성 요소 .
'vue'에서 Vue 가져오기
'./TreeMenu.vue'에서 TreeMenu 가져오기
Vue.comComponent('TreeMenu', TreeMenu)
4단계: TreeMenu 구성 요소 사용
마지막으로 트리를 사용해야 하는 위치 메뉴 TreeMenu 구성 요소를 도입하고 해당 데이터를 전달합니다.
<tree-menu :data="menuData"></tree-menu>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
