vue 및 Element-plus를 사용하여 다단계 메뉴 및 탐색 모음을 구현하는 방법

Vue 및 Element Plus를 사용하여 다단계 메뉴 및 탐색 모음을 구현하는 방법

Vue는 사용자 인터페이스를 구축하는 데 널리 사용되는 매우 인기 있는 JavaScript 프레임워크입니다. Element Plus는 Vue 기반의 UI 라이브러리로, 사용자 인터페이스를 쉽게 만들 수 있는 풍부한 UI 구성 요소 세트를 제공합니다. 이 기사에서는 사용자가 웹 사이트의 다양한 페이지를 쉽게 탐색할 수 있도록 Vue 및 Element Plus를 사용하여 다단계 메뉴와 탐색 모음을 구현하는 방법을 살펴보겠습니다.

먼저 Vue 프로젝트를 생성하고 Element Plus를 설치해야 합니다. Vue의 스캐폴딩 도구를 사용하여 새 프로젝트를 만들 수 있습니다:

vue create vue-menu-navigation
cd vue-menu-navigation

Element Plus 설치:

npm install element-plus --save

다음으로 다중 레벨 메뉴와 탐색 모음이 포함된 구성 요소를 만들어야 합니다. 이 기능을 구현하기 위해 Element Plus에서 제공하는 Menu 및 Breadcrumb 구성 요소를 사용할 수 있습니다. Vue의 단일 파일 구성 요소에서는 다음과 같은 구성 요소를 사용할 수 있습니다.

<template>
  <div>
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template #title>产品</template>
        <el-menu-item-group>
          <template #title>手机</template>
          <el-menu-item index="2-1">iPhone</el-menu-item>
          <el-menu-item index="2-2">华为</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title>电视</template>
          <el-menu-item index="2-3">小米</el-menu-item>
          <el-menu-item index="2-4">创维</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="3">关于</el-menu-item>
    </el-menu>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
        {{ item }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      breadcrumb: ['首页'],
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;

      switch (index) {
        case '1':
          this.breadcrumb = ['首页'];
          break;
        case '2-1':
          this.breadcrumb = ['产品', '手机', 'iPhone'];
          break;
        case '2-2':
          this.breadcrumb = ['产品', '手机', '华为'];
          break;
        case '2-3':
          this.breadcrumb = ['产品', '电视', '小米'];
          break;
        case '2-4':
          this.breadcrumb = ['产品', '电视', '创维'];
          break;
        case '3':
          this.breadcrumb = ['关于'];
          break;
      }
    },
  },
};
</script>

위 코드에서 el-menu 구성 요소를 사용하여 다중 레벨 메뉴를 만듭니다. el-menu-item 구성 요소는 메뉴 항목 el을 나타냅니다. -submenu 구성 요소는 하위 메뉴가 포함된 메뉴 항목을 나타냅니다. 사용자가 메뉴 항목을 선택하면 activeIndex 변수의 값이 업데이트되고 activeIndex 값에 따라 탐색경로 막대의 내용이 업데이트됩니다.

Vue 컴포넌트에서는 data 속성을 통해 데이터를 정의할 수 있고, 메서드 속성에서 메뉴 선택 이벤트를 처리하는 메서드를 정의할 수 있습니다. handlerSelect 메소드에서는 선택한 메뉴 항목의 인덱스 값을 기반으로 activeIndex 및 이동 경로 데이터를 업데이트합니다.

마지막으로 Vue 인스턴스에서 이 구성 요소를 사용합니다.

<template>
  <div>
    <navigation></navigation>
    <router-view></router-view>
  </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue';
export default {
  components: {
    Navigation,
  },
};
</script>

Navigation 구성 요소를 도입하고 사용하여 애플리케이션에 다단계 메뉴와 탐색 모음을 추가했습니다. 동시에 다른 페이지 간을 탐색할 수 있는 라우터 보기 구성 요소도 추가했습니다.

지금까지 Vue와 Element Plus를 이용하여 다단계 메뉴와 네비게이션 바를 구현하는 작업을 완료했습니다. 세심한 레이아웃과 원활한 상호작용을 통해 사용자에게 더 나은 웹사이트 탐색 경험을 제공할 수 있습니다. 물론 위의 내용은 단순한 예일 뿐이므로 필요에 따라 맞춤화하고 확장할 수 있습니다.

이 글이 여러분에게 도움이 되기를 바라며, 즐거운 코딩 되시길 바랍니다!

위 내용은 vue 및 Element-plus를 사용하여 다단계 메뉴 및 탐색 모음을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!