elementui门户

ElementUI 门户实现方法

ElementUI 是一个基于 Vue.js 的组件库，适用于构建企业级中后台管理系统。门户（Portal）通常指集成多个模块的统一入口页面，以下是利用 ElementUI 实现门户的关键方法。

布局设计

使用 ElementUI 的 Container 布局组件构建门户框架，包含头部、侧边栏、主内容区和底部。

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Sidebar</el-aside>
    <el-main>Main Content</el-main>
  </el-container>
  <el-footer>Footer</el-footer>
</el-container>

导航菜单

通过 el-menu 实现动态路由导航，支持多级菜单和权限控制。

<el-menu
  :default-active="$route.path"
  router
  background-color="#545c64"
  text-color="#fff">
  <el-submenu v-for="item in menuList" :key="item.path" :index="item.path">
    <template slot="title">{{ item.title }}</template>
    <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
      {{ child.title }}
    </el-menu-item>
  </el-submenu>
</el-menu>

卡片式模块展示

在主页使用 el-card 展示功能模块，支持拖拽排序和响应式布局。

<el-row :gutter="20">
  <el-col v-for="(item, index) in cardList" :key="index" :span="6">
    <el-card :body-style="{ padding: '0px' }">
      <div class="card-content">
        <h3>{{ item.title }}</h3>
        <p>{{ item.desc }}</p>
      </div>
    </el-card>
  </el-col>
</el-row>

数据交互

结合 Axios 从后端获取门户数据，动态渲染菜单和卡片内容。

import axios from 'axios';

export default {
  data() {
    return {
      menuList: [],
      cardList: []
    };
  },
  created() {
    axios.get('/api/portal/menu').then(res => {
      this.menuList = res.data;
    });
    axios.get('/api/portal/cards').then(res => {
      this.cardList = res.data;
    });
  }
};

主题定制

通过覆盖 SCSS 变量实现主题色和组件样式的自定义。

/* 修改主题色 */
$--color-primary: #1890ff;

/* 引入ElementUI默认样式 */
@import "~element-ui/packages/theme-chalk/src/index";

响应式适配

使用 el-row 和 el-col 的栅格系统，结合媒体查询确保多端兼容。

<el-row :gutter="20">
  <el-col :xs="24" :sm="12" :md="8" :lg="6">
    <!-- 内容自适应 -->
  </el-col>
</el-row>

通过以上方法，可快速搭建一个功能完善、风格统一的 ElementUI 门户页面。