嘿嘿嘿1212
嘿嘿嘿1212

ElementUI:常用组件

1. ElementUI

1.1 ElementUI介绍

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网地址：http://element-cn.eleme.io/#/zh-CN
XX健康项目后台系统就是使用ElementUI来构建页面，在页面上引入 js 和 css 文件即可开始使用，如下：

 <!‐‐ 引入ElementUI样式 ‐‐>
<link rel="stylesheet" href="https://unpkg.com/element‐ui/lib/themechalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js">script>
<!‐‐ 引入ElementUI组件库 ‐‐>
<script src="https://unpkg.com/element‐ui/lib/index.js">script>

1.2 常用组件

1.2.1 Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：
：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列
：顶栏容器
：侧边栏容器
：主要区域容器
：底栏容器

<body>
<div id="app">
    <el-container>
        <el-header>Headerel-header>
        <el-container>
            <el-aside width="200px">Asideel-aside>
            <el-container>
                <el-main>Mainel-main>
                <el-footer>Footerel-footer>
            el-container>
        el-container>
    el-container>
div>
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: left;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 590px;
    }
style>
body>
<script>
    new Vue({
        el: '#app'
    });
script>

1.2.2 Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

<el-dropdown split-button size="small" trigger="click">
    个人中心
    <el-dropdown-menu>
        <el-dropdown-item>退出系统el-dropdown-item>
        <el-dropdown-item divided>修改密码el-dropdown-item>
        <el-dropdown-item divided>联系管理员el-dropdown-item>
    el-dropdown-menu>
el-dropdown>
  • :下拉按钮
  • 下拉菜单
  • 下拉项
    • divided分隔

1.2.3 NavMenu 导航菜单

为网站提供导航功能的菜单。

<el-menu>
    <el-submenu index="1">
        <template slot="title">
            <i class="el-icon-location">i>
            <span slot="title">导航一span>
        template>
        <el-menu-item>选项1el-menu-item>
        <el-menu-item>选项2el-menu-item>
        <el-menu-item>选项3el-menu-item>
    el-submenu>
    <el-submenu index="2">
        <template slot="title">
            <i class="el-icon-menu">i>
            <span slot="title">导航二span>
        template>
        <el-menu-item>选项1el-menu-item>
        <el-menu-item>选项2el-menu-item>
        <el-menu-item>选项3el-menu-item>
    el-submenu>
el-menu>
  • :导航菜单
  • :导航按钮