黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第一章之ElementUI 一 [打印本页]

作者: 我是楠楠 时间: 2019-10-23 14:45
标题: 【郑州校区】传智健康项目讲义第一章之ElementUI 一
本帖最后由我是楠楠于 2019-10-23 15:21 编辑

【郑州校区】传智健康项目讲义第一章之ElementUI 一

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

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

<!‐‐ 引入ElementUI样式 ‐‐>

<link rel="stylesheet" href="https://unpkg.com/element‐ui/lib/theme‐

chalk/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> ：底栏容器

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

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

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

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

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

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

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2