Interfaz de front-end del sistema de gestión de fondo general Ⅶ: componentes comunes (Encabezado+Pie de página+Menú)

Language 2023-04-09 21:22:45 views: null

 Cree una nueva carpeta común en componentes y cree tres nuevos componentes: Header.vue Footer.vue Menu.vue

  Encuentre el componente deseado en el sitio web oficial de element-ui Después de escribirlo aproximadamente, móntelo en la página de inicio Home.vue.

Encabezado.vue:

<template>
    <div class="header">
        <el-header>
            <div class="title">疫起健康后台管理系统</div>
            <div>{
    
    {name}}</div>
        </el-header>
    </div>
</template>
<script>
import { getToken } from '@/utils/setToken.js'
export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
        this.name = getToken('username')
    }
}
</script>
<style lang="scss" scoped>
.header {
    .el-header {
        background: rgb(138, 173, 243);
        color: #fff;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        .title {
            width: 200px;
            font-size: 18px;
        }
    }
}
</style>

 Menú.vue

<template>
    <div class="menu">
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <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-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {};
    },
    methods: {
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
      },
    },
  };
  </script>
  <style lang="scss">
  .menu {
      .el-aside {
          height: 100%;
          .el-menu {
              height: 100%;
          }
          .el-submenu .el-menu-item {
              min-width: 0;
          }
      }
  }
  </style>

footer.view

<template>
    <div class="footer">
        <el-card>
            Frontend 2022 Casey
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

Efecto:

 

Problemas de estilo y ajustes:

        1. Use el contenedor de diseño de contenedores en home.vue, agregue tarjetas para envolver

        2. Deje que la altura del menú llene la pantalla y haga desaparecer la barra de desplazamiento ;

        3. Ajuste el ancho del menú y redúzcalo un poco ;

        4. Ajustar el color del tema: efecto de color degradado


Código ajustado

encabezado.vue

<template>
  <div class="header">
    <el-header>
      <div class="title">疫起健康后台管理系统</div>
      <div>{
   
   { name }}</div>
    </el-header>
  </div>
</template>
<script>
import { getToken } from "@/utils/setToken.js";
export default {
  data() {
    return {
      name: "",
    };
  },
  created() {
    this.name = getToken("username");
  },
};
</script>
<style lang="scss" scoped>
.header {
  .el-header {
    background: #6190e8; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #a7bfe8,
      #6190e8
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #a7bfe8,
      #6190e8
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    color: #fff;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    .title {
      width: 200px;
      font-size: 18px;
    }
  }
}
</style>

menu.vue

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        active-text-color="#C0FAFF"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <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-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menus: []
    };
  },
  created(){
    console.log(this.$router.options.routes)
  },
  methods: {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    },
  },
};
</script>
<style lang="scss">
.menu {
  .el-aside {
    height: 100%;
    .el-menu {
      height: 100%;
      color: "#fff";
      background: #6190e8; /* fallback for old browsers */
      background: -webkit-linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .el-submenu .el-menu-item {
      min-width: 0;
    }
  }
}
</style>

footer.view

<template>
    <div class="footer">
        <el-card>
            ANTI-COVID 2022 BE-HEALTHY
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

 casa.vue

<template>
  <div class="home">
    <Header />
    <el-container class="content">
      <Menu />
      <el-container>
        <el-main>
          <Bread />
          <div class="cont">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "./common/Header.vue";
import Footer from "./common/Footer.vue";
import Menu from "./common/Menu.vue";
export default {
  name: "home",
  components: {
    Header,
    Footer,
    Menu,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss">
.home {
  // background-color: aquamarine;
  width: 100%;
  height: 100%;
  .content {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
    .cont {
      margin: 3px 0px;
    }
  }
}
</style>

Efecto del código actual:

Mejorar los puntos de función y los módulos del proyecto. 

 Cree uno nuevo en el archivo de componentes de la siguiente manera:

Visualización de datos: Gestión de usuarios: Centro de usuarios:

Vista de datos Lista de licencias, Gestión de licencias Mi

Información del usuario del mapa de datos, gestión de la información.

Lista de información del mapa de puntuación

Mapa turístico Lista de vacunas, Gestión de vacunas

 

 configurar el enrutamiento

import Vue from 'vue'
import Router from 'vue-router'
//import Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            // component: Home
            redirect:'/login',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/login',
            name:'Login',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/home',
            name: '用户管理',
            iconClass: 'fa fa-users',
            redirect: '/home/user',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/user',
                    name: '用户列表',
                    iconClass: 'fa fa-list',
                    component: () => import('@/components/users/UserList')
                },
                {
                    path: '/home/info',
                    name: '信息列表',
                    iconClass: 'fa fa-alt',
                    component: () => import('@/components/users/InfoList')
                },
                {
                    path: '/home/infos',
                    name: '信息管理',
                    iconClass: 'fa fa-alt',
                    component: () => import('@/components/users/InfoLists')
                },
                {
                    path: '/home/AbsenceList',
                    name: '请假列表',
                    iconClass: 'fa fa-list-ul',
                    component: () => import('@/components/users/AbsenceList')
                },
                {
                    path: '/home/AbsenceListsManage',
                    name: '请假管理',
                    iconClass: 'fa fa-th-list',
                    component: () => import('@/components/users/AbsenceListsManage')
                }
            ]
        },
        {
            path: '/home',
            name: '数据可视化',
            iconClass: 'fa fa-bar-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/dataview',
                    name: '数据概览',
                    iconClass: 'fa fa-fa-chart',
                    component: () => import('@/components/dataAnalysis/DataView')
                },
                {
                    path: '/home/mapView',
                    name: '地图概览',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/MapView')
                },
                {
                    path: '/home/travelMap',
                    name: '旅游地图',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/TravelMap')
                },
                {
                    path: '/home/scoreMap',
                    name: '分数图',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/ScoreMap')
                }
            ]
        },
        {
            path: '/home',
            name: '用户中心',
            iconClass: 'fa fa-bar-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/Mine',
                    name: '我的',
                    iconClass: 'fa fa-fa-chart',
                    component: () => import('@/components/mine/Mine')
                }
            ]
        },
        {
            path: '*',
            component: () => import('@/components/NotFound') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        }
    ],
    mode: 'history'
})

El archivo que definirá la ruta y renderizará el menú.

Pero algunos no necesitan renderizar, por ejemplo: inicio de sesión, página 404, página de inicio, así que:

        1. Control de autoridad de enrutamiento

        2. Front-end v-if (utilizado actualmente)

​​​​​​​

 Ajusta el estilo del ícono del menú, establece la distancia, pero encontrarás que el directorio no tiene un orden jerárquico, es decir, la página no ha sido abierta y la ruta está ligada, por lo que la ruta cambiará, pero el contenido a la derecha no ha cambiado === "Establecer la ruta de salida

Menú.vue 

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-menu
        router
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        active-text-color="#C2FB91"
      >
        <template v-for="(item, index) in menus">
          <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i :class="item.iconClass"></i>
              <span>{
   
   { item.name }}</span>
            </template>
            <el-menu-item-group v-for="(child, index) in item.children" :key="index">
              <el-menu-item :index="child.path">
                <i :class="child.iconClass"></i>
                {
   
   {child.name}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menus: [],
    };
  },
  created() {
    console.log(this.$router.options.routes);
    this.menus = [...this.$router.options.routes];
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="scss">
.menu {
  .el-aside {
    height: 100%;
    .el-menu {
      height: 100%;
      .fa {
        margin: 10px;
      }
      color: "#fff";
      background: #6190e8; /* fallback for old browsers */
      background: -webkit-linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .el-submenu .el-menu-item {
      min-width: 0;
    }
  }
}
</style>

 index.js en el enrutador

import Vue from 'vue'
import Router from 'vue-router'
//import Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            // component: Home
            redirect:'/login',
            hidden: 'true',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/login',
            name:'Login',
            hidden: 'true',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/home',
            name: '用户管理',
            iconClass: 'fa fa-users',
            redirect: '/home/user',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/user',
                    name: '用户列表',
                    iconClass: 'fa fa-list',
                    component: () => import('@/components/users/UserList')
                },
                {
                    path: '/home/info',
                    name: '信息列表',
                    iconClass: 'fa fa-list-alt',
                    component: () => import('@/components/users/InfoList')
                },
                {
                    path: '/home/infos',
                    name: '信息管理',
                    iconClass: 'fa fa-list-alt',
                    component: () => import('@/components/users/InfoLists')
                },
                {
                    path: '/home/AbsenceList',
                    name: '请假列表',
                    iconClass: 'fa fa-list-ul',
                    component: () => import('@/components/users/AbsenceList')
                },
                {
                    path: '/home/AbsenceListsManage',
                    name: '请假管理',
                    iconClass: 'fa fa-th-list',
                    component: () => import('@/components/users/AbsenceListsManage')
                }
            ]
        },
        {
            path: '/home',
            name: '数据可视化',
            iconClass: 'fa fa-line-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/dataview',
                    name: '数据概览',
                    iconClass: 'fa fa-bar-chart',
                    component: () => import('@/components/dataAnalysis/DataView')
                },
                {
                    path: '/home/mapView',
                    name: '地图概览',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/MapView')
                },
                {
                    path: '/home/travelMap',
                    name: '旅游地图',
                    iconClass: 'fa fa-area-chart',
                    component: () => import('@/components/dataAnalysis/TravelMap')
                },
                {
                    path: '/home/scoreMap',
                    name: '分数图',
                    iconClass: 'fa fa-pie-chart',
                    component: () => import('@/components/dataAnalysis/ScoreMap')
                }
            ]
        },
        {
            path: '/home',
            name: '用户中心',
            iconClass: 'fa fa-bar-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/Mine',
                    name: '我的',
                    iconClass: 'fa fa-fa-chart',
                    component: () => import('@/components/mine/Mine')
                }
            ]
        },
        {
            path: '*',
            name: 'NotFound',
            hidden: 'true',
            component: () => import('@/components/NotFound') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        }
    ],
    mode: 'history'
})

Inicio.vue

<template>
  <div class="home">
    <Header />
    <el-container class="content">
      <Menu />
      <el-container>
        <el-main>
          <Bread />
          <div class="cont">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "./common/Header.vue";
import Footer from "./common/Footer.vue";
import Menu from "./common/Menu.vue";
export default {
  name: "home",
  components: {
    Header,
    Footer,
    Menu,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss">
.home {
  // background-color: aquamarine;
  width: 100%;
  height: 100%;
  .content {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
    .cont {
      margin: 3px 0px;
    }
  }
}
</style>

Encabezado.vue

<template>
    <div class="header">
        <el-header>
            <div class="title">疫起健康后台管理系统</div>
            <div>{
   
   {name}}</div>
        </el-header>
    </div>
</template>
<script>
import { getToken } from '@/utils/setToken.js'
export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
        this.name = getToken('username')
    }
}
</script>
<style lang="scss" scoped>
.header {
    .el-header {
        background: rgb(138, 173, 243);
        color: #fff;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        .title {
            width: 200px;
            font-size: 18px;
        }
    }
}
</style>

Supongo que te gusta

Origin blog.csdn.net/qq_45947664/article/details/127931360
Recomendado
Clasificación
Diario
Más
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)

Code World

© 2018 codetd.com