1、概述
- ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件，帮助开发人员快速构建功能强大、风格统一的页面
- 官网地址：http://element-cn.eleme.io/#/zh-CN
1.1、入门案例
- 引入Element - UI ：
- npm 引入：（推荐：能更好地和 webpack 打包工具配合使用）
- CDN 引入：需联网
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
- 编辑网页代码：一旦点击按钮，显示 警告框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
2、组件
2.1、Container 布局容器
-
用于布局的容器组件，方便快速搭建页面
-
布局容器 的基本结构：
<el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列<el-header>：顶栏容器<el-aside>：侧边栏容器<el-main>：主要区域容器<el-footer>：底栏容器
-
效果代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
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: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</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>
</html>
<script>
new Vue({
el:"#app"
})
</script>
2.2、DropDown 下拉菜单
-
效果图：
-
点击按钮实现下拉菜单展开：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title></title>
<style>
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-dropdown split-button type="primary" >
下拉菜单
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>退出系统</el-dropdown-item>
<el-dropdown-item disabled>修改密码</el-dropdown-item>
<el-dropdown-item divided>关于我们</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
</html>
- 鼠标滑动展开：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title></title>
<style>
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-dropdown>
<el-button type="primary">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>退出系统</el-dropdown-item>
<el-dropdown-item disabled>修改密码</el-dropdown-item>
<el-dropdown-item divided>关于我们</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
</html>
2.3、 NavMenu 导航菜单
- 效果图：
- 实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title></title>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-row class="tac">
<el-col :span="12">
<h5>默认颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-menu-item index="1-3">选项3</el-menu-item>
<el-menu-item index="1-4">选项4</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>
<span>导航二</span>
</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-menu-item index="2-4">选项4</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
handleOpen(key, keyPath) {
onsole.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
</html>