uniapp에서 트리 메뉴 구성 요소를 구현하는 방법

uniapp에서 트리 메뉴 구성 요소를 구현하는 방법

소개:
트리 메뉴는 일반적인 메뉴 구조로, 일반적으로 플랫 데이터 구조를 표시하는 데 사용되며 트리 구조 형태로 사용자에게 제공됩니다. uniapp에서는 컴포넌트 개발 아이디어를 활용해 유니버설 트리 메뉴 컴포넌트를 구현할 수 있는데, 이는 개발자가 다른 프로젝트에서 재사용하기 편리합니다. 이 기사에서는 uniapp에서 트리 메뉴 구성 요소를 구현하는 방법을 소개하고 관련 코드 예제를 제공합니다.

구현 단계:
1단계: 트리 메뉴 구성 요소 만들기
먼저 uniapp 프로젝트에서 트리 메뉴 구성 요소를 만들고 이름을 TreeMenu로 지정합니다.

1.1 구성 요소 디렉터리에 새 폴더를 만들고 이름을 TreeMenu로 지정합니다.
1.2 TreeMenu 디렉터리에 TreeMenu.vue(컴포넌트 본문), treeMenu.css(컴포넌트 스타일), index.js(컴포넌트 등록)의 세 가지 파일을 만듭니다.

2단계: TreeMenu 컴포넌트 작성
다음으로 TreeMenu.vue 파일에서 트리 메뉴 컴포넌트의 특정 콘텐츠를 정의합니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
8b2e48a3d9011bf639e3fbceadd07fb5

<ul>
  <li v-for="item in data" :key="item.id">
    <div class="tree-menu-item" @click="toggleChildren(item)">
      <span>{{ item.name }}</span>
      <i class="icon" :class="{ 'icon-open': item.open }"></i>
    </div>
    <ul v-if="item.children && item.open">
      <tree-menu :data="item.children"></tree-menu>
    </ul>
  </li>
</ul>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
기본값 내보내기 {
소품: {

data: {
  type: Array,
  default: () => []
}

},
메소드: {

toggleChildren(item) {
  item.open = !item.open;
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

0ff9b516ad958d29edfdf762cfebcd5b
.tree-menu {
여백: 0;
패딩: 0;
}

.tree-menu- 항목 {
padding-left: 20px;
커서: 포인터;
}

.icon {
디스플레이: inline-block;
너비: 10px;
높이: 10px;
margin-right: 5px;
배경색: #000;
}
.icon-open {
background-color: #f00;
}
531ac245ce3e4fe3d50054a55f265927

3단계: TreeMenu 구성요소 등록
index.js 파일에서 TreeMenu 구성요소를 전역 구성 요소 .

'vue'에서 Vue 가져오기
'./TreeMenu.vue'에서 TreeMenu 가져오기

Vue.comComponent('TreeMenu', TreeMenu)

4단계: TreeMenu 구성 요소 사용
마지막으로 트리를 사용해야 하는 위치 메뉴 TreeMenu 구성 요소를 도입하고 해당 데이터를 전달합니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<tree-menu :data="menuData"></tree-menu>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
기본값 내보내기 {
데이터() {

return {
  menuData: [
    {
      id: 1,
      name: '菜单1',
      children: [
        {
          id: 2,
          name: '菜单1-1',
          children: [
            {
              id: 3,
              name: '菜单1-1-1'
            },
            {
              id: 4,
              name: '菜单1-1-2'
            }
          ]
        },
        {
          id: 5,
          name: '菜单1-2'
        }
      ]
    },
    {
      id: 6,
      name: '菜单2'
    }
  ]
}

}
}
3fa3f474cbb4b6d948eebecb1be5dde4

요약:
위 단계를 통해 uniapp에서 간단한 트리 메뉴 구성 요소를 구현할 수 있습니다. 먼저 TreeMenu라는 컴포넌트를 생성한 후 이 컴포넌트에 트리 메뉴의 구조와 상호작용 로직을 정의했습니다. 다음으로 프로젝트 내 어디에서나 사용할 수 있도록 TreeMenu 구성 요소를 전역 구성 요소로 등록합니다. 마지막으로 트리 메뉴를 사용해야 하는 페이지에 TreeMenu 컴포넌트를 도입하고 데이터를 전달하여 메뉴 내용을 표시합니다. 위의 샘플 코드를 통해 우리는 필요에 따라 트리 메뉴 구성 요소를 사용자 정의하고 이를 uniapp에 유연하게 적용할 수 있습니다.

위 내용은 uniapp에서 트리 메뉴 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!