Cara menggunakan vue dan Element-plus untuk melaksanakan menu berbilang peringkat dan bar navigasi

Cara menggunakan Vue dan Element Plus untuk melaksanakan menu berbilang peringkat dan bar navigasi

Vue ialah rangka kerja JavaScript yang sangat popular yang digunakan secara meluas untuk membina antara muka pengguna. Element Plus ialah perpustakaan UI berdasarkan Vue, yang menyediakan set komponen UI yang kaya untuk membuat antara muka pengguna dengan mudah. Dalam artikel ini, kami akan meneroka cara menggunakan Vue dan Element Plus untuk melaksanakan menu berbilang peringkat dan bar navigasi supaya pengguna boleh menyemak imbas halaman tapak web yang berbeza dengan mudah.

Pertama, kita perlu mencipta projek Vue dan memasang Element Plus. Kita boleh menggunakan alat perancah Vue untuk mencipta projek baharu:

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

Pasang Element Plus:

npm install element-plus --save

Seterusnya, kita perlu mencipta komponen yang mengandungi menu berbilang peringkat dan bar navigasi. Kita boleh menggunakan komponen Menu dan Breadcrumb yang disediakan oleh Element Plus untuk mencapai fungsi ini. Dalam komponen fail tunggal Vue, kita boleh menggunakan komponen ini seperti ini:

<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>

Dalam kod di atas, kami menggunakan komponen el-menu untuk mencipta menu berbilang peringkat Komponen el-menu-item mewakili item menu, el Komponen -submenu mewakili item menu yang mengandungi submenu. Apabila pengguna memilih item menu, kami mengemas kini nilai pembolehubah activeIndex dan mengemas kini kandungan bar serbuk roti berdasarkan nilai activeIndex.

Dalam komponen Vue, kami boleh mentakrifkan data melalui atribut data, dan mentakrifkan kaedah untuk mengendalikan acara pemilihan menu dalam atribut kaedah. Dalam kaedah handleSelect, kami mengemas kini data activeIndex dan serbuk roti berdasarkan nilai indeks item menu yang dipilih.

Akhir sekali, gunakan komponen ini dalam contoh Vue kami:

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

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

Dengan memperkenalkan dan menggunakan komponen Navigasi, kami telah menambah menu berbilang peringkat dan bar navigasi pada aplikasi kami. Pada masa yang sama, kami juga menambah komponen paparan penghala untuk menavigasi antara halaman yang berbeza.

Setakat ini, kami telah menyelesaikan kerja melaksanakan menu berbilang peringkat dan bar navigasi menggunakan Vue dan Element Plus. Melalui reka letak yang teliti dan interaksi yang baik, kami boleh menyediakan pengguna dengan pengalaman navigasi tapak web yang lebih baik. Sudah tentu, perkara di atas hanyalah contoh mudah, anda boleh menyesuaikan dan mengembangkannya mengikut keperluan anda.

Saya harap artikel ini membantu anda, dan selamat mengekod!

Atas ialah kandungan terperinci Cara menggunakan vue dan Element-plus untuk melaksanakan menu berbilang peringkat dan bar navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!