ElementUI 實現頭部組件和左側組件效果

本文轉載自查看原文 2021-03-03 09:43 303 vue/ python 運維開發

一、概述

在上一篇文章中，我們已經搭建好了首頁的一個大概樣式，參考鏈接：

https://www.cnblogs.com/xiao987334176/p/14434383.html

現在我們就來使用ElementUI搭建頭部組件，最終效果如下：

二、頭部組件

注意：項目代碼參考上一篇的，修改 views/Layout/components/AppHeader.vue

<template>
  <!-- logo和文字 -->
  <div class="header">
    <a href="#/">   <!-- 點擊進入首頁 -->
      <img class="logo" src="@/assets/logo.png" width="25px" />
      <span class="company">后台管理系統</span>
    </a>
    <!-- logo和文字結束 -->


    <!--  下拉菜單-->
    <el-dropdown @command="handleCommand"><!--  綁定指令,在methods里定義-->
      <span class="el-dropdown-link">
      您好
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
      <el-dropdown-menu slot="dropdown">
        <!-- icon是修改圖標 ，command是點擊后傳給方法的值-->
        <el-dropdown-item icon="el-icon-edit" command="edit">>修改密碼</el-dropdown-item>

        <el-dropdown-item icon="el-icon-s-operation" command="quit">>退出登錄</el-dropdown-item>

      </el-dropdown-menu>
    </el-dropdown>
    <!--  下拉菜單結束-->


  </div>

</template>

<script>
  export default {
    methods: {
      handleCommand(command){
        this.$message(`點擊了${command}`)
      }
    },
  }
</script>

<style scoped>
  /* logo */
  .logo {
    vertical-align: middle; /* 居中 */
    padding: 0px 10px 0px 40px; /* 上右下左 */
  }

  /* 文字 */
  .company {
    position: absolute;
    color: white;
  }

  /* 下拉菜單 */
  .el-dropdown{
    float: right; /* 浮動在右邊 */
    margin-right: 40px; /* 靠右40px */
  }
  /* 系統管理 */
  .el-dropdown-link{
    color: white;
    cursor: pointer; /* 鼠標放上去是手的形狀 */
  }
</style>

View Code

刷新頁面，效果如下：

三、左側區域

修改 views/Layout/components/Appnavbar.vue

<template>  <!-- 使用element的導航菜單 -->
  <div class="navbar">
    <!--default-active默認選中的菜單，選中后顏色是 active-text-color  -->
    <!--  :router='true',true表示開啟路由模式，開啟之后，index值代表的就是路由地址-->
    <!--  :router='true'開啟之后點擊就會跳轉到對應的路由，默認為false -->
    <!-- text-color 文字的顏色 -->
    <el-menu :router='true' default-active="/home" class="el-menu-vertical-demo" background-color="#545c64"
             text-color="#fff" active-text-color="#ffd04b">

      <!-- 首頁  class就是對應的icon -->
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首頁</span>
      </el-menu-item>

      <!-- 會員管理 index下的左右 / 別忘記-->
      <el-menu-item index="/member/">
        <i class="el-icon-s-custom"></i>
        <span slot="title">會員管理</span>
      </el-menu-item>

<!--      &lt;!&ndash; 供應商管理 &ndash;&gt;-->
<!--      <el-menu-item index="/supplier/">-->
<!--        <i class="el-icon-menu"></i>-->
<!--        <span slot="title">供應商管理</span>-->
<!--      </el-menu-item>-->

<!--      &lt;!&ndash; 商品管理 &ndash;&gt;-->
<!--      <el-menu-item index="/goods/">-->
<!--        <i class="el-icon-suitcase-1"></i>-->
<!--        <span slot="title">商品管理</span>-->
<!--      </el-menu-item>-->

<!--      &lt;!&ndash; 員工管理 &ndash;&gt;-->
<!--      <el-menu-item index="/staff/">-->
<!--        <i class="el-icon-user"></i>-->
<!--        <span slot="title">員工管理</span>-->
<!--      </el-menu-item>-->

    </el-menu>
  </div>
</template>


<style scoped>
  /* 去掉右邊框 */
  .el-menu {
    border-right: none;
  }
</style>

View Code

刷新頁面，左邊的菜單欄就出來了，效果如下：

這樣左側我們也做好了，但是點擊左邊的菜單會進入一個空白頁面，因為我們開啟了路由但是沒有配置

四、其他組件

上面我們已經寫好了左側導航，並且點擊能跳轉到對應的路由，接下來我們來寫對應的組件，我們把組件都放在src下的views下面。

分別是首頁，會員管理。如果還有其他的，請根據實際情況修改。

在src/views目錄下創建2個文件夾，分別是Home，Member。並在新目錄下創建index.vue

最終src目錄結構如下：

./
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
├── router
│   └── index.js
└── views
    ├── Home
    │   └── index.vue
    ├── Layout
    │   ├── components
    │   │   ├── AppHeader.vue
    │   │   ├── Appmain.vue
    │   │   └── Appnavbar.vue
    │   └── index.vue
    └── Member
        └── index.vue

修改 views/Home/index.vue

<template>
    <div>
      首頁
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

View Code

修改 views/Member/index.vue

<template>
    <div>
      會員管理
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

View Code

五、首頁路由配置

上面我們點擊左側的首頁會跳轉到空白頁面，我們已經寫好了首頁，會員的組件（views下的）。我們期望的是當我們點擊左側對應的導航，對應的組件渲染在Layout的中間區域。

首頁，會員的組件都是Layout的一個子組件，我們可以放在children下面，在 router/index.js 里配置首頁的路由，代碼如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/views/Layout'  // 默認加載index.vue
import Home from '@/views/home'
import Member from '@/views/member'

Vue.use(Router)

export default new Router({
  mode: 'history',  //去掉url中的#
  routes: [
    {
      path: '/',
      name: 'layout', // 路由名稱
      redirect: '/home', // 當訪問 / 時重定向到 home
      component: Layout , // 組件對象
      // 因為首頁，會員都是 Layout 下的 main 里的，所以要將這些組件作為 Layout 組件的子組件，使用children，里面是一個數組，接收一個個對象
      // meta 是
      children: [
        {
          path: '/home',
          component: Home,
          meta: {title: '首頁'}
        }
      ]
    },
  ]
})

View Code

修改 views/Layout/components/Appmain.vue，增加組件出口

<template>
  <div class="main">
    <router-view> </router-view> <!-- 組件的出口 -->
  </div>
</template>

<script>
    export default {
        name: "AppMain"
    }
</script>

<style scoped>

</style>

View Code

這樣當我們點擊首頁的時候會把views/home/index.vue里的內容渲染到views/Layout/components/Appmain.vue

六、走通所有導航

上面我們已經寫了個首頁的導航，我們是在 Layout組件下寫了個children，還有一種其他的方法，是和Layout組件同級

修改 router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/views/Layout'  // 默認加載index.vue
import Home from '@/views/home'
import Member from '@/views/member'

Vue.use(Router)

export default new Router({
  mode: 'history',  //去掉url中的#
  routes: [
    {
      path: '/',
      name: 'layout', // 路由名稱
      redirect: '/home', // 當訪問 / 時重定向到 home
      component: Layout , // 組件對象
      // 因為首頁，會員都是 Layout 下的 main 里的，所以要將這些組件作為 Layout 組件的子組件，使用children，里面是一個數組，接收一個個對象
      // meta 是
      children: [
        {
          path: '/home',
          component: Home,
          meta: {title: '首頁'}
        },
        // {
        //   path: '/member',
        //   component: Member,
        //   meta: {title: '會員管理'}
        // },
      ]
    },
    // 上面的是一種寫法，可以放在children下面，還有一種方法是下面的這種
    // 當訪問 /member 時，渲染的是 Layout 組件，
    {
      path: '/member',
      component: Layout,
      children: [
        {
          path: '/', // 等價於 /member/,請求 /member 時會在后面拼接個 / 因為AppNavbar下的index.vue寫的是/member/
          component: Member,
          meta: {title: '會員管理'}
        }
      ]
    },
  ]
})

View Code

這樣當我們點擊左側導航欄的時候，右邊都會加載對應的組件

七、登錄頁面

登錄頁面是獨立的，不需要加載Layout，怎么做到呢？

其實在路由上面，處理一下即可。

在views下面創建Login，並創建index.vue，此時src目錄結構如下：

./
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
├── router
│   └── index.js
└── views
    ├── Home
    │   └── index.vue
    ├── Layout
    │   ├── components
    │   │   ├── AppHeader.vue
    │   │   ├── Appmain.vue
    │   │   └── Appnavbar.vue
    │   └── index.vue
    ├── Login
    │   └── index.vue
    └── Member
        └── index.vue

View Code

修改views/Login/index.vue

<template>
    <div>這是登錄頁面</div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

View Code

修改 router/index.js 增加登錄路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/views/Layout'  // 默認加載index.vue
import Home from '@/views/home'
import Member from '@/views/member'
import Login from '@/views/login'

Vue.use(Router)

export default new Router({
  mode: 'history',  //去掉url中的#
  routes: [
    {
      path: '/login',
      name: 'login', // 路由名稱
      component: Login // 組件對象
    },
    {
      path: '/',
      name: 'layout', // 路由名稱
      redirect: '/home', // 當訪問 / 時重定向到 home
      component: Layout , // 組件對象
      // 因為首頁，會員都是 Layout 下的 main 里的，所以要將這些組件作為 Layout 組件的子組件，使用children，里面是一個數組，接收一個個對象
      // meta 是
      children: [
        {
          path: '/home',
          component: Home,
          meta: {title: '首頁'}
        },
        // {
        //   path: '/member',
        //   component: Member,
        //   meta: {title: '會員管理'}
        // },
      ]
    },
    // 上面的是一種寫法，可以放在children下面，還有一種方法是下面的這種
    // 當訪問 /member 時，渲染的是 Layout 組件，
    {
      path: '/member',
      component: Layout,
      children: [
        {
          path: '/', // 等價於 /member/,請求 /member 時會在后面拼接個 / 因為AppNavbar下的index.vue寫的是/member/
          component: Member,
          meta: {title: '會員管理'}
        }
      ]
    },
  ]
})

View Code

訪問登錄url

http://localhost:8080/login/

效果如下：

本文參考鏈接：

https://www.cnblogs.com/zouzou-busy/p/13081281.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue--ElementUI實現頭部組件和左側組件效果 elementUI Table組件實現拖拽效果 elementUI的table組件實現setCurrentRow的滾動條定位效果 elementUI 彈窗組件全局和局部彈入彈出動畫效果實現 react使用antd組件遞歸實現左側菜單導航樹 uniapp實現小程序自定義頭部組件 vue組件（將頁面公用的頭部組件化） js實現左側彈出效果 Vue創建頭部組件示例基於vue封裝的header 頭部組件