【郑州校区】Java的新项目传智健康笔记（九）

4. ElementUI

4.1 ElementUI介绍

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

[HTML] 纯文本查看 复制代码

 
<!‐‐ 引入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>

4.2 常用组件

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

[HTML] 纯文本查看 复制代码

 

<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>   
    <div id="app">     
        <el‐container>       
            <el‐header>Header</el‐header>       
            <el‐container>         
                <el‐aside width="200px">Aside</el‐aside>
                <el‐container>
                    <el‐main>Main</el‐main>
                    <el‐footer>Footer</el‐footer>
                </el‐container>       
            </el‐container>     
        </el‐container>
    </div>   
</body>
<script>
    new Vue({
        el: '#app'
    });
</script>

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

[HTML] 纯文本查看 复制代码

 
<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>

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

[HTML] 纯文本查看 复制代码

 
<el‐menu>
    <el‐submenu index="1">
        <template slot="title">
            <i class="el‐icon‐location"></i>
            <span slot="title">导航一</span>
        </template>
        <el‐menu‐item>选项1</el‐menu‐item>
        <el‐menu‐item>选项2</el‐menu‐item>
        <el‐menu‐item>选项3</el‐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>选项1</el‐menu‐item>
        <el‐menu‐item>选项2</el‐menu‐item>
        <el‐menu‐item>选项3</el‐menu‐item>
    </el‐submenu>
</el‐menu>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】Java的新项目传智健康笔记（九）

0 个回复