本帖最后由 我是楠楠 于 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>
| 
收藏
淘帖
踩
