[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ナビゲーションバー

記事ディレクトリ

参考動画： VUEプロジェクト、VUEプロジェクト実戦、vueバックグラウンド管理システム、フロントエンドインタビュー、フロントエンドインタビュープロジェクト

ケース	リンク
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ナビゲーションバー (ビデオ p1-16)	https://blog.csdn.net/karshey/article/details/127640658
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ヘッダー + ナビゲーションバーの折りたたみ (p17-19)	https://blog.csdn.net/karshey/article/details/127652862
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ホームコンポーネント: カード、フォーム (p20-22)	https://blog.csdn.net/karshey/article/details/127674643
【フロントエンド】Vue+Element UI事例：バックグラウンド管理システム全般・Echartsチャート作成：axiosパッケージ、模擬データシミュレーション実戦（p23-25）	https://blog.csdn.net/karshey/article/details/127735159
[フロントエンド] Vue+Element UIケース：一般的なバックグラウンド管理システム - Echartsチャート：折れ線グラフ、ヒストグラム、円グラフ（p27-30）	https://blog.csdn.net/karshey/article/details/127737979
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ブレッドクラム、タグバー (p31-35)	https://blog.csdn.net/karshey/article/details/127756733
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ユーザー管理: フォーム入力、ダイアログボックスのポップアップ (p36-38)	https://blog.csdn.net/karshey/article/details/127787418
【フロントエンド】Vue+Element UIの場合：一般的なバックグラウンド管理システム - ユーザー管理：テーブルテーブルの追加、削除、変更、ページネーションページング、検索ボックス（p39-42）	https://blog.csdn.net/karshey/article/details/127777962
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ログインページログイン (p44)	https://blog.csdn.net/karshey/article/details/127795302
【フロントエンド】Vue+Element UIケース：一般的なバックグラウンド管理システム - ログインページ機能：ログイン権限ジャンプ、ルートガード、終了（p45-46）	https://blog.csdn.net/karshey/article/details/127849502
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - 異なるユーザーにログインして異なるメニューを表示し、ルートを動的に追加します (p47-48)	https://blog.csdn.net/karshey/article/details/127865621
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - プロジェクトの概要	https://blog.csdn.net/karshey/article/details/127867638

目標

ここに画像の説明を挿入

ホバー効果
クリック効果
その他: クリックして展開したり折りたたんだりできます
「ホームページ」「商品管理」などを動的に表示します。
ルーティングジャンプがあります

実際、これはプロジェクトのナビゲーションバーコンポーネントです。ナビゲーションバーを見るだけの人は、「1. その他の準備」は飛ばしてください。

コード

0.データ

これを別途 MenuData.js に配置し、export defaultそれを使用して公開します。

{
    
    
      path: '/',
      name: 'home',
      label: '首页',
      icon: 's-home',
      url: 'Home/Home'
    },
    {
    
    
      path: '/mall',
      name: 'mall',
      label: '商品管理',
      icon: 'video-play',
      url: 'MallManage/MallManage'
    },
    {
    
    
      path: '/user',
      name: 'user',
      label: '用户管理',
      icon: 'user',
      url: 'UserManage/UserManage'
    },
    {
    
    
      label: '其他',
      icon: 'location',
      children: [
        {
    
    
          path: '/page1',
          name: 'page1',
          label: '页面1',
          icon: 'setting',
          url: 'Other/PageOne'
        },
        {
    
    
          path: '/page2',
          name: 'page2',
          label: '页面2',
          icon: 'setting',
          url: 'Other/PageTwo'
        }
      ]
    }

1. その他の準備

公式ドキュメントを参照する場合の注意:公式ドキュメント

Element UIをグローバルに導入

まず要素 UI をインストールします。

npm i element-ui -S

グローバルの導入: main.js 内

import ElementUI from 'element-ui'

Vue.use(ElementUI)

ルーティング構成

ここでは、まずホームページ (ナビゲーションバーを表示するページ) を設定します。公式ドキュメント: Vue ルーター

インストール: ここでのバージョンは 3.6.5 です。
ps: パッケージのすべてのバージョンはnpm Web サイトで見つけることができます。ここで必要なのは、最新バージョンの 3.xx です。

npm install vue-router@3.6.5

ルーティング構成: 現在、Main コンポーネントのみが構成されています

import Vue from "vue";
import VueRouter from "vue-router";
import Main from '../Views/Main'

Vue.use(VueRouter)

const routes=[
    // 主路由
    {
    
    
        path:'/',
        component:Main
    }
]

const router = new VueRouter({
    
    
    routes
})

export default router

現在の
依存関係現在の package.json ファイルの依存関係は次のとおりです。

"dependencies": {
    
    
    "core-js": "^3.8.3",
    "element-ui": "^2.15.10",
    "vue": "^2.6.14",
    "vue-router": "^3.6.5"
  }

現在の main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/index'

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
    
    
  router,
  render: h => h(App),
}).$mount('#app')

main.vue レイアウト構造には
このレイアウトが必要です。
ここに画像の説明を挿入
対応するコードを見つけてください。

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

Main.vueに入れてください。

App.vue は次のとおりです。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
      
      
}
</script>

<style>

</style>

効果:
ここに画像の説明を挿入
次に、コンポーネント CommonAside.vue を作成し、このコンポーネントにナビゲーションバーを作成して、コンポーネントを Aside に配置します。

したがって、レイアウトを含む Main.vue は次のようになります。

<template>
    <el-container>
        <el-aside width="200px">
            <common-aside/>
        </el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
import CommonAside from '../components/CommonAside.vue'
export default {
      
      
    data(){
      
      
        return{
      
      }
    },
    components:{
      
      
        CommonAside
    }
}
</script>

<style>

</style>

CommonAside コンポーネントは次のとおりです。

<template>
  <!-- 在这里开始写导航栏 -->
</template>

<script>
export default {
      
      

}
</script>

<style>

</style>

次に、この記事のテーマであるナビゲーションバーです。

2. 構造

Element UI ドキュメント
公式の Element UI ドキュメントに同様のナビゲーション構造が見つかりました。それはあなたです!
ここに画像の説明を挿入
コードを読むと、コードが「展開と折りたたみ」の部分と「ナビゲーション」の部分に分かれていることがわかりますが、必要なのはナビゲーションの部分です。目標に合わせてコードを少し調整すると、次のようになります。

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
    :collapse="isCollapse">
    <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航一</span>
    </el-menu-item>
    <el-submenu index="1">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航二</span>
        </template>
        <el-menu-item-group>
            <span slot="title">分组一</span>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
</el-menu>

効果：
ここに画像の説明を挿入

3. データを動的に表示する

ナビゲーションバーは、第 1 レベルのナビゲーションバーと第 2 レベルのナビゲーションバーに分かれています。ターゲット内のその他 - ページ 1 は第 2 レベルのナビゲーションバーです。ホームページ、製品管理、およびユーザー管理はすべて第 1 レベルのナビゲーションバーです。

第 1 レベルと第 2 レベルの違いは、データに Children 属性があるかどうか、および、ある場合はその Children 属性が第 2 レベルのナビゲーションであるということです。したがって、ここでは計算されたプロパティが使用されます。

computed:{
    
    
   noChildren(){
    
    
       // 如果没有children则返回true,会被过滤器留下
       return this.MenuData.filter(item=>!item.children)
   },
   hasChildren(){
    
    
       return this.MenuData.filter(item=>item.children)
   }
}

第 1 レベルのナビゲーションバーの循環表示:

<!-- 观察数据,我们发现name是唯一标识 -->
<!-- 查看文档,index是唯一标识 -->
 <el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name">
     <!-- 这里是字体图标,用模板字符串拼接,注意要动态绑定 -->
     <i :class="`el-icon-${item.icon}`"></i>
     <span slot="title">{
   
   {item.label}}</span>
 </el-menu-item>

効果:
ここに画像の説明を挿入
2 番目のナビゲーションバーも同様です。

<el-submenu v-for="item in hasChildren" :key="item.name" :index="item.name">
        <template slot="title">
            <i :class="`el-icon-${item.icon}`"></i>
            <span slot="title">{
   
   {item.label}}</span>
        </template>
        <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
            <el-menu-item :index="subItem.name">{
   
   {subItem.label}}</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
</el-menu>

効果：
ここに画像の説明を挿入

4. テーマ: 背景色、クリックホバー効果

ドキュメントを再度開き、[カスタムカラー] セクションを見つけます。
ここに画像の説明を挿入
明らかにここにあります。コピーして貼り付けましょう。

その場合、ラベルは次のようになります。

<el-menu default-active="1-4-1" 
class="el-menu-vertical-demo" 
@open="handleOpen" 
@close="handleClose"
:collapse="isCollapse" 
background-color="#545c64" 
text-color="#fff" 
active-text-color="#ffd04b">

効果：それだけです！
ここに画像の説明を挿入

5. パッドを取り除く

ブラウザーで F12 キーを押すと、パディングが body などのタグによって自動的に保持されることがわかります。App.vue でそれらをクリア (リセット) するだけで済みます。

html,
body,
h3,
p {
    
    
  margin: 0;
  padding: 0
}

6. ドロップダウンボックスを削除します

ここでは、最初にインストールするものを少なくします。この方法で CSS を記述するとネストできるため、より便利です。

npm install less less-loader --save

ブラウザ F12、明らかにドロップダウンボックスのあるクラスは el-menu です。el
ここに画像の説明を挿入
-menu を高さ: 100vh に設定するだけです。

7. タイトル

html：

<!-- 要放到导航栏里面 -->
<h3>通用后台管理系统</h3>

css：

<style lang="less" scoped>
.el-menu{
    
    
    height:100vh;
    
    h3{
    
    
        text-align: center;
        line-height: 48px;
        color: #fff;
        font-size: 16px;
        font-weight: 400;
    }
}
</style>

効果：
ここに画像の説明を挿入

8. ルーティングジャンプ

クリックイベントを追加します。

<el-menu-item 
@click="clickItem(item)" 
v-for="item in noChildren" 
:key="item.name" 
:index="item.name">

<el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
    <el-menu-item @click="clickItem(subItem)" :index="subItem.name">{
   
   { subItem.label }}</el-menu-item>
</el-menu-item-group>

js:

clickItem(item){
    
    
   // 防止自己跳自己的报错
   if(this.$route.path!==item.path&&!(this.$route.path==='/home'&&(item.path==='/'))){
    
    
       this.$router.push(item.path)
   }
}

しかし、現時点ではルートは 1 つだけです。

合計コード

ComponentCommonAside.vue

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <!-- 要放到导航栏里面 -->
        <h3>通用后台管理系统</h3>
        <!-- 观察数据,我们发现name是唯一标识 -->
        <!-- 查看文档,index是唯一标识 -->
        <el-menu-item @click="clickItem(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
            <!-- 这里是字体图标,用模板字符串拼接,注意要动态绑定 -->
            <i :class="`el-icon-${item.icon}`"></i>
            <span slot="title">{
   
   { item.label }}</span>
        </el-menu-item>
        <el-submenu v-for="item in hasChildren" :key="item.name" :index="item.name">
            <template slot="title">
                <i :class="`el-icon-${item.icon}`"></i>
                <span slot="title">{
   
   { item.label }}</span>
            </template>
            <el-menu-item-group @click="clickItem(subItem)" v-for="subItem in item.children" :key="subItem.name">
                <el-menu-item :index="subItem.name">{
   
   { subItem.label }}</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
      
      
    width: 200px;
    min-height: 400px;
}

.el-menu{
      
      
    height:100vh;

    h3{
      
      
        text-align: center;
        line-height: 48px;
        color: #fff;
        font-size: 16px;
        font-weight: 400;
    }
}
</style>

<script>
import MenuData from '../data/MenuData'
export default {
      
      
    data() {
      
      
        return {
      
      
            isCollapse: false,
            MenuData
        };
    },
    methods: {
      
      
        handleOpen(key, keyPath) {
      
      
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
      
      
            console.log(key, keyPath);
        },
        clickItem(item){
      
      
            // 防止自己跳自己的报错
            if(this.$route.path!==item.path&&!(this.$route.path==='/home'&&(item.path==='/'))){
      
      
                this.$router.push(item.path)
            }
        }
    },
    computed: {
      
      
        noChildren() {
      
      
            // 如果没有children则返回true,会被过滤器留下
            return this.MenuData.filter(item => !item.children)
        },
        hasChildren() {
      
      
            return this.MenuData.filter(item => item.children)
        }
    }
}
</script>

ファイル構造

ここに画像の説明を挿入

参考

VUEプロジェクト、VUEプロジェクト実戦、VUEバックグラウンド管理システム、フロントエンドインタビュー、フロントエンドインタビュープロジェクト：p1-16