ElementUI教程
介绍
elementUi 一个为Vue而生的UI框架
官网 https://element.eleme.cn/#/zh-CN
需要引入的cdn
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
入门演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.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>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
data:{
visible: false
}
})
</script>
</body>
</html>
过渡动画
https://element.eleme.cn/#/zh-CN/component/transition
淡入淡出
el-fade-in-linear 和 el-fade-in 两种。 效果感觉都一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="app">
<el-button @click="show = !show">Click Me</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-fade-in-linear">
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
</transition>
<transition name="el-fade-in">
<div v-show="show" class="transition-box">.el-fade-in</div>
</transition>
</div>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
data:{
show: true
}
})
</script>
</body>
</html>
缩放
el-zoom-in-center(中间缩放)，el-zoom-in-top (向上缩放)和 el-zoom-in-bottom (向下缩放)三种效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="app">
<el-button @click="show2 = !show2">Click Me</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-zoom-in-center">
<div v-show="show2" class="transition-box">.el-zoom-in-center</div>
</transition>
<transition name="el-zoom-in-top">
<div v-show="show2" class="transition-box">.el-zoom-in-top</div>
</transition>
<transition name="el-zoom-in-bottom">
<div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
</transition>
</div>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
data:{
show2: true
}
})
</script>
</body>
</html>
折叠展开
使用 el-collapse-transition 组件实现折叠展开效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="app">
<el-button @click="show3 = !show3">Click Me</el-button>
<div style="margin-top: 20px; height: 200px;">
<el-collapse-transition>
<div v-show="show3">
<div class="transition-box">el-collapse-transition</div>
<div class="transition-box">el-collapse-transition</div>
</div>
</el-collapse-transition>
</div>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
data:{
show3: true
}
})
</script>
</body>
</html>
Layout 布局
https://element.eleme.cn/#/zh-CN/component/layout
分栏
通过基础的 24 分栏，迅速简便地创建布局 而 bootstrap是12分栏注意别搞混了
通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<style>
.el-row {
margin-bottom: 20px;
}.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
Row的属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| gutter | 栅格间隔 | number | — | 0 |
| type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
| tag | 自定义元素标签 | string | * | div |
Col的属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| span | 栅格占据的列数 | number | — | 24 |
| offset | 栅格左侧的间隔格数 | number | — | 0 |
| push | 栅格向右移动格数 | number | — | 0 |
| pull | 栅格向左移动格数 | number | — | 0 |
| tag | 自定义元素标签 | string | * | div |
分栏间隔
Row 组件 提供 gutter 属性来指定每一栏(列)之间的间隔，默认间隔为 0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<style>
.el-row {
margin-bottom: 20px;
}.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
</head>
<body>
<div id="app">
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
混合布局
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
根据上面学习的布局方式进行打乱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<style>
.el-row {
margin-bottom: 20px;
}.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
</head>
<body>
<div id="app">
<el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
分栏偏移
支持偏移指定的栏数。
通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<style>
.el-row {
margin-bottom: 20px;
}.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
</head>
<body>
<div id="app">
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
对齐方式
通过 flex 布局来对分栏进行灵活的对齐。
将 type 属性赋值为 ‘flex’，可以启用 flex 布局，并可通过 justify 属性来指定
start(做), center(居中), end(右),
space-between(两端对齐-子元素之间的间隔都相等),
space-around(每个子元素两侧的间隔都相等)
以上其中的值来定义子元素的排版方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<style>
.el-row {
margin-bottom: 20px;
}.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f0f6f6;
}
</style>
</head>
<body>
<div id="app">
<el-row type="flex" class="row-bg" justify="start">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light">左</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light">中</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light">右</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light">两端对齐-子元素之间的间隔都相等</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light">每个子元素两侧的间隔都相等</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
响应式布局
参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<style>
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
</head>
<body>
<div id="app">
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
基于断点的隐藏类
Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。
但是需要用到一个css 名称display.css
内容如下:
@media only screen and (max-width:767px){.hidden-xs-only{display:none!important}}@media only screen and (min-width:768px){.hidden-sm-and-up{display:none!important}}@media only screen and (min-width:768px) and (max-width:991px){.hidden-sm-only{display:none!important}}@media only screen and (max-width:991px){.hidden-sm-and-down{display:none!important}}@media only screen and (min-width:992px){.hidden-md-and-up{display:none!important}}@media only screen and (min-width:992px) and (max-width:1199px){.hidden-md-only{display:none!important}}@media only screen and (max-width:1199px){.hidden-md-and-down{display:none!important}}@media only screen and (min-width:1200px){.hidden-lg-and-up{display:none!important}}@media only screen and (min-width:1200px) and (max-width:1919px){.hidden-lg-only{display:none!important}}@media only screen and (max-width:1919px){.hidden-lg-and-down{display:none!important}}@media only screen and (min-width:1920px){.hidden-xl-only{display:none!important}}
在指定区间显示 其余尺寸隐藏
| class | xs | sm | md | lg | xl |
|---|---|---|---|---|---|
| hidden-sm-and-up | 显示 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
| hidden-md-and-up | 显示 | 显示 | 隐藏 | 隐藏 | 隐藏 |
| hidden-lg-and-up | 显示 | 显示 | 显示 | 隐藏 | 隐藏 |
在指定区间隐藏 其余尺寸显示
| class | xs | sm | md | lg | xl |
|---|---|---|---|---|---|
| hidden-xs-only | 隐藏 | 显示 | 显示 | 显示 | 显示 |
| hidden-sm-and-down | 隐藏 | 隐藏 | 显示 | 显示 | 显示 |
| hidden-md-and-down | 隐藏 | 隐藏 | 隐藏 | 显示 | 显示 |
| hidden-lg-and-down | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 显示 |
在某一个尺寸隐藏 其余尺寸显示
| class | xs | sm | md | lg |
|---|---|---|---|---|
| hidden-sm-only | 显示 | 隐藏 | 显示 | 显示 |
| hidden-md-only | 显示 | 显示 | 隐藏 | 显示 |
| hidden-lg-only | 显示 | 显示 | 显示 | 隐藏 |
| hidden-xl-only | 显示 | 显示 | 显示 | 显示 |
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<link rel="stylesheet" href="css/display.css">
<style>
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
</head>
<body>
<div id="app">
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" class="hidden-sm-and-down" ><div class="grid-content bg-purple "></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11" class="hidden-sm-and-down"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11" :class="'hidden-sm-and-down'"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
Container 布局容器
https://element.eleme.cn/#/zh-CN/component/container
用于布局的容器组件，方便快速搭建页面的基本结构： 比如导航-内容-脚页侧边栏…
<el-container>：外层容器。 类似 boostrap 的 container(容器)
当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，
<el-container>的子元素只能是后四者，后四者的父元素也只能是<el-container>。
Container 的属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| direction | 子元素的排列方向 | string | horizontal(水平) / vertical(垂直) | 子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal |
Header Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| height | 顶栏高度 | string | — | 60px |
Aside Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| width | 侧边栏宽度 | string | — | 300px |
Footer Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| height | 底栏高度 | string | — | 60px |
常见页面布局
头部-内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<link rel="stylesheet" href="css/display.css">
<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>
</head>
<body>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
头部-内容-脚部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<link rel="stylesheet" href="css/display.css">
<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>
</head>
<body>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
侧边-内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<link rel="stylesheet" href="css/display.css">
<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>
</head>
<body>
<div id="app">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
头部-侧边-内容-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<link rel="stylesheet" href="css/display.css">
<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>
</head>
<body>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
头部-侧边-内容-2
这种一般应用手机端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<link rel="stylesheet" href="css/display.css">
<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>
</head>
<body>
<div id="app">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
头部-侧边-内容-脚部-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<link rel="stylesheet" href="css/display.css">
<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>
</head>
<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>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
头部-侧边-内容-脚部-2
这种一般应用手机端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<link rel="stylesheet" href="css/display.css">
<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>
</head>
<body>
<div id="app">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
<link rel="stylesheet" href="css/display.css">
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
</head>
<body>
<div id="app">
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<!--中文-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/locale/zh-CN.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
//填充20个
tableData: Array(20).fill(item)
}
}
})
</script>
</body>
</html>
基本组件
Color 色彩
https://element.eleme.cn/#/zh-CN/component/color
Typography 字体
https://element.eleme.cn/#/zh-CN/component/typography
Border 边框
https://element.eleme.cn/#/zh-CN/component/border
Icon 图标
https://element.eleme.cn/#/zh-CN/component/icon
列:
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
Button 按钮
https://element.eleme.cn/#/zh-CN/component/button
使用type、plain、round和circle属性来定义 Button 的样式。
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
Link 文字链接
https://element.eleme.cn/#/zh-CN/component/link
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>
表单组件
Radio 单选框
https://element.eleme.cn/#/zh-CN/component/radio
<div id="app">
<el-radio v-model="radio" label="1" @change="change_vue()">备选项</el-radio>
<el-radio v-model="radio" label="2" @change="change_vue()">备选项</el-radio>
</div>
<script>
new Vue({
el: '#app',
data:{
radio: '1'
},
methods:{
change_vue:function () {
alert(this.radio)
}
}
})
</script>
Checkbox 多选框
https://element.eleme.cn/#/zh-CN/component/checkbox
<div id="app">
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked" @change="change_vue()">备选项</el-checkbox>
</div>
<script>
new Vue({
el: '#app',
data:{
checked: true
},
methods:{
change_vue:function () {
alert(this.checked)
}
}
})
</script>
indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
<div id="app">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</div>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
new Vue({
el: '#app',
data:{
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
console.log( this.checkedCities)
},
handleCheckedCitiesChange(value) {
console.log(value)
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
})
</script>
Input 输入框
https://element.eleme.cn/#/zh-CN/component/input
<div id="app">
<el-input v-model="input" placeholder="请输入内容" @input="input_vue(input)"></el-input>
</div>
<script>
new Vue({
el: '#app',
data:{
input: ''
},
methods: {
input_vue:function (data) {
console.log( data)
}
}
})
</script>
InputNumber 计数器
https://element.eleme.cn/#/zh-CN/component/input-number
<div id="app">
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</div>
<script>
new Vue({
el: '#app',
data:{
num: 1
},
methods: {
handleChange(value) {
console.log(value);
}
}
})
</script>
Select 选择器
https://element.eleme.cn/#/zh-CN/component/select
<div id="app">
<el-select v-model="value" placeholder="请选择" @change="change_vue">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<script>
new Vue({
el: '#app',
data:{
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
Cascader 级联选择器
https://element.eleme.cn/#/zh-CN/component/cascader
<div id="app">
<div class="block">
<span class="demonstration">默认 click 触发子菜单</span>
<el-cascader
v-model="value"
:options="options"
@change="handleChange"></el-cascader>
</div>
<div class="block">
<span class="demonstration">hover 触发子菜单</span>
<el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"></el-cascader>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
value: [],
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}, {
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字体'
}, {
value: 'icon',
label: 'Icon 图标'
}, {
value: 'button',
label: 'Button 按钮'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 单选框'
}, {
value: 'checkbox',
label: 'Checkbox 多选框'
}, {
value: 'input',
label: 'Input 输入框'
}, {
value: 'input-number',
label: 'InputNumber 计数器'
}, {
value: 'select',
label: 'Select 选择器'
}, {
value: 'cascader',
label: 'Cascader 级联选择器'
}, {
value: 'switch',
label: 'Switch 开关'
}, {
value: 'slider',
label: 'Slider 滑块'
}, {
value: 'time-picker',
label: 'TimePicker 时间选择器'
}, {
value: 'date-picker',
label: 'DatePicker 日期选择器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期时间选择器'
}, {
value: 'upload',
label: 'Upload 上传'
}, {
value: 'rate',
label: 'Rate 评分'
}, {
value: 'form',
label: 'Form 表单'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table 表格'
}, {
value: 'tag',
label: 'Tag 标签'
}, {
value: 'progress',
label: 'Progress 进度条'
}, {
value: 'tree',
label: 'Tree 树形控件'
}, {
value: 'pagination',
label: 'Pagination 分页'
}, {
value: 'badge',
label: 'Badge 标记'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert 警告'
}, {
value: 'loading',
label: 'Loading 加载'
}, {
value: 'message',
label: 'Message 消息提示'
}, {
value: 'message-box',
label: 'MessageBox 弹框'
}, {
value: 'notification',
label: 'Notification 通知'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu 导航菜单'
}, {
value: 'tabs',
label: 'Tabs 标签页'
}, {
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉菜单'
}, {
value: 'steps',
label: 'Steps 步骤条'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog 对话框'
}, {
value: 'tooltip',
label: 'Tooltip 文字提示'
}, {
value: 'popover',
label: 'Popover 弹出框'
}, {
value: 'card',
label: 'Card 卡片'
}, {
value: 'carousel',
label: 'Carousel 走马灯'
}, {
value: 'collapse',
label: 'Collapse 折叠面板'
}]
}]
}, {
value: 'ziyuan',
label: '资源',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'jiaohu',
label: '组件交互文档'
}]
}]
},
methods: {
handleChange(value) {
console.log(value);
}
}
})
</script>
Switch 开关
https://element.eleme.cn/#/zh-CN/component/switch
<div id="app">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
@change="change_vue">
</el-switch>
</div>
<script>
new Vue({
el: '#app',
data:{
value: true
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
Slider 滑块
https://element.eleme.cn/#/zh-CN/component/slider
<div id="app">
<div class="block">
<span class="demonstration">默认</span>
<el-slider v-model="value1" @change="change_vue"></el-slider>
</div>
<div class="block">
<span class="demonstration">自定义初始值</span>
<el-slider v-model="value2"></el-slider>
</div>
<div class="block">
<span class="demonstration">隐藏 Tooltip</span>
<el-slider v-model="value3" :show-tooltip="false"></el-slider>
</div>
<div class="block">
<span class="demonstration">格式化 Tooltip</span>
<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
</div>
<div class="block">
<span class="demonstration">禁用</span>
<el-slider v-model="value5" disabled></el-slider>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
value1: 0,
value2: 50,
value3: 36,
value4: 48,
value5: 42
},
methods: {
formatTooltip(val) {
return val / 100;
},
change_vue:function (data) {
console.log(data)
}
}
})
</script>
TimePicker 时间选择器
https://element.eleme.cn/#/zh-CN/component/time-picker
<div id="app">
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="选择时间" @change="change_vue">
</el-time-select>
</div>
<script>
new Vue({
el: '#app',
data:{
value: ''
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
DatePicker 日期选择器
https://element.eleme.cn/#/zh-CN/component/date-picker
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="date"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
placeholder="选择日期" @change="change_vue()">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
align="right"
type="date"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
<script>
new Vue({
el: '#app',
data:{
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
DateTimePicker 日期时间选择器
https://element.eleme.cn/#/zh-CN/component/datetime-picker
<div id="app">
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间" @change="change_vue">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
align="right"
:picker-options="pickerOptions" @change="change_vue">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">设置默认时间</span>
<el-date-picker
v-model="value3"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
default-time="12:00:00" @change="change_vue">
</el-date-picker>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
value3: ''
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
Upload 上传
https://element.eleme.cn/#/zh-CN/component/upload
以下代码是需要的后端提供上传文件服务的代码 (springmvc模式)
链接：https://pan.baidu.com/s/1xu4OEjs6fddXIcQXcqGvag
提取码：1234
文件上传
样式1
在选择文件的时候可以按住shift+鼠标左键进行多选
<div id="app">
<el-upload
class="upload-demo"
action="http://localhost:8080/up/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="10"
:on-exceed="handleExceed"
:file-list="fileList"
name="uploadFile"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传文件/图片，且不超过10mb</div>
</el-upload>
</div>
<script>
new Vue({
el: '#app',
data:{
fileList: []
},
methods: {
handleRemove(file, fileList) {
$.get("http://localhost:8080/de/delete?nameFile="+file.name)
console.log(file, fileList);
},
handlePreview(file) {
alert(
"文件名称:"+file.name+"\n"+
"文件大小: "+file.size+" Byte \n"+
"文件类型:"+file.raw.type+"\n"+
"文件上传时间:"+file.raw.lastModifiedDate
)
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
}
}
})
</script>
样式2
<div id="app">
<el-upload
class="upload-demo"
action="http://localhost:8080/up/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="10"
:on-exceed="handleExceed"
:file-list="fileList"
list-type="picture"
name="uploadFile"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
<script>
new Vue({
el: '#app',
data:{
fileList: []
},
methods: {
handleRemove(file, fileList) {
$.get("http://localhost:8080/de/delete?nameFile="+file.name)
console.log(file, fileList);
},
handlePreview(file) {
alert(
"文件名称:"+file.name+"\n"+
"文件大小: "+file.size+" Byte \n"+
"文件类型:"+file.raw.type+"\n"+
"文件上传时间:"+file.raw.lastModifiedDate
)
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
}
}
})
</script>
样式3
文件可拖拽上传
<div id="app">
<el-upload
class="upload-demo"
drag
action="http://localhost:8080/up/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="10"
:on-exceed="handleExceed"
:file-list="fileList"
name="uploadFile"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
<script>
new Vue({
el: '#app',
data:{
fileList: []
},
methods: {
handleRemove(file, fileList) {
$.get("http://localhost:8080/de/delete?nameFile="+file.name)
console.log(file, fileList);
},
handlePreview(file) {
alert(
"文件名称:"+file.name+"\n"+
"文件大小: "+file.size+" Byte \n"+
"文件类型:"+file.raw.type+"\n"+
"文件上传时间:"+file.raw.lastModifiedDate
)
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
}
}
})
</script>
用户头像上传
<div id="app">
<el-upload
class="avatar-uploader"
action="http://localhost:8080/up/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
name="uploadFile"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" >
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<script>
new Vue({
el: '#app',
data:{
imageUrl: '',
imageSec:''
},
methods: {
handleAvatarSuccess(res, file) {
//删除之前的头像
if(this.imageSec!==""){
$.get("http://localhost:8080/de/delete?nameFile="+this.imageSec)
}
this.imageSec=file.name
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
}
})
</script>
照片墙
<div id="app">
<el-upload
action="http://localhost:8080/up/upload"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
name="uploadFile"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
<script>
new Vue({
el: '#app',
data:{
dialogImageUrl: '',
dialogVisible: false
},
methods: {
handleRemove(file, fileList) {
$.get("http://localhost:8080/de/delete?nameFile="+file.name)
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
})
</script>
更多上传文件的方式请自行查看官方文档
Rate 评分
https://element.eleme.cn/#/zh-CN/component/rate
<div id="app">
<el-rate
v-model="value"
show-score
text-color="#ff9900"
score-template="{value}" @change="change_vue">
</el-rate>
</div>
<script>
new Vue({
el: '#app',
data:{
value: 3.7
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
<div id="app">
<el-rate
v-model="value"
show-text @change="change_vue">
</el-rate>
</div>
<script>
new Vue({
el: '#app',
data:{
value: null
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
ColorPicker 颜色选择器
https://element.eleme.cn/#/zh-CN/component/color-picker
有默认值
<div id="app">
<div class="block">
<span class="demonstration">有默认值</span>
<el-color-picker v-model="color1" @change="change_vue"></el-color-picker>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
color1: '#409EFF',
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
选择透明度
<div id="app">
<div class="block">
<span class="demonstration">透明度</span>
<el-color-picker v-model="color" show-alpha @change="change_vue"></el-color-picker>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
color: 'rgba(19, 206, 102, 0.8)'
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
预定义颜色
<div id="app">
<div class="block">
<span class="demonstration">预定义颜色</span>
<el-color-picker
v-model="color"
show-alpha
:predefine="predefineColors" @change="change_vue">
</el-color-picker>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
color: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
不同尺寸
<div id="app">
<div class="block">
<span class="demonstration">不同尺寸</span>
<el-color-picker v-model="color1" @change="change_vue"></el-color-picker>
<el-color-picker v-model="color2" size="medium" @change="change_vue"></el-color-picker>
<el-color-picker v-model="color3" size="small" @change="change_vue"></el-color-picker>
<el-color-picker v-model="color4" size="mini" @change="change_vue"></el-color-picker>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
color1: '#409EFF',
color2: '#409EFF',
color3: '#409EFF',
color4: '#409EFF',
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
Transfer 穿梭框
https://element.eleme.cn/#/zh-CN/component/transfer
<div id="app">
<el-transfer v-model="value" :data="data"
:button-texts="['到左边', '到右边']"
:left-default-checked="[2,3]"
></el-transfer>
</div>
<script>
new Vue({
el: '#app',
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `备选项 ${ i }`,
});
}
return data;
};
return {
data: generateData(),
value: [1, 4]
};
},
methods: {
change_vue:function (data) {
console.log(data)
}
}
})
</script>
Form 表单组件组合
https://element.eleme.cn/#/zh-CN/component/form
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等
注意提交表单的话 需要通过ajax 的方式
典型表单
<div id="app">
<el-form ref="form" :model="form" label-width="80px" >
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
};
},
methods: {
onSubmit() {
console.log('submit!');
console.log(this.form);
}
}
})
</script>
数据展示组件
Table 表格
https://element.eleme.cn/#/zh-CN/component/table
数据展示表
<div id="app">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
};
},
methods: {
}
})
</script>
数据管理表
<div id="app">
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%">
<el-table-column
label="Date"
prop="date">
</el-table-column>
<el-table-column
label="Name"
prop="name">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入Name关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '张三',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '胡晓明',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '李四',
address: '上海市普陀区金沙江路 1516 弄'
}],
search: ''
};
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
})
</script>
注意查询指定查询的内容 在上面代码中是Name 如果需要修改那么 请自行理解:data中的代码
Tag 标签
https://element.eleme.cn/#/zh-CN/component/tag
<style>
.el-tag + .el-tag {
margin-left: 10px;
}
</style>
<div id="app">
<el-tag size="mini"
v-for="tag in tags"
:key="tag.name"
closable
:type="tag.type"
@close="handleClose(tag)">
{{tag.name}}
</el-tag>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
tags: [
{ name: '标签一', type: '' },
{ name: '标签二', type: 'success' },
{ name: '标签三', type: 'info' },
{ name: '标签四', type: 'warning' },
{ name: '标签五', type: 'danger' }
]
};
},
methods: {
handleClose(tag) {
this.tags.splice(this.tags.indexOf(tag), 1);
console.log(tag)
},
}
})
</script>
Progress 进度条
https://element.eleme.cn/#/zh-CN/component/progress
<div id="app">
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
methods: {
format(percentage) {
return percentage === 100 ? '满' : `${percentage}%`;
}
}
})
</script>
Tree 树形控件
https://element.eleme.cn/#/zh-CN/component/tree
用清晰的层级结构展示信息，可展开或折叠。
<div id="app">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
})
</script>
Pagination 分页
当数据量过多时，使用分页分解数据。
https://element.eleme.cn/#/zh-CN/component/pagination
基础分页
<div id="app">
<div class="block">
<span class="demonstration">页数较少时的效果</span>
<el-pagination
layout="prev, pager, next"
:total="50"
:page-size="10"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<div class="block">
<span class="demonstration">大于 7 页时的效果</span>
<el-pagination
layout="prev, pager, next"
:total="total"
:page-size="page_size"
:current-page="current_page"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
total:1000,
page_size:10,
current_page:2
};
},
methods: {
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
})
</script>
Badge 标记
https://element.eleme.cn/#/zh-CN/component/badge
出现在按钮、图标旁的数字或状态标记。
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
<div id="app">
<el-badge :value="100" :max="99" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">回复</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">回复</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="clearfix">
评论
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
回复
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
methods: {
}
})
</script>
Avatar 头像
https://element.eleme.cn/#/zh-CN/component/avatar
用图标、图片或者字符的形式展示用户或事物信息。
通知
Alert 警告
https://element.eleme.cn/#/zh-CN/component/alert
<div id="app">
<el-alert
title="成功提示的文案"
type="success"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon
@close="alsertClose('success')"
>
</el-alert>
<el-alert
title="消息提示的文案"
type="info"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon
@close="alsertClose('info')"
>
</el-alert>
<el-alert
title="警告提示的文案"
type="warning"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon
@close="alsertClose('warning')"
>
</el-alert>
<el-alert
title="错误提示的文案"
type="error"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon
@close="alsertClose('error')"
>
</el-alert>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
methods: {
alsertClose:function (data) {
console.log(data)
}
}
})
</script>
Loading 加载
https://element.eleme.cn/#/zh-CN/component/loading
加载数据时显示动效。
区域加载
在表格等容器中加载数据时显示。
<div id="app">
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-button
type="primary"
@click="open">
指令方式关闭|打开
</el-button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
loading: true
};
},
methods: {
open:function () {
this.loading=!this.loading;
}
}
})
</script>
Message 消息提示
https://element.eleme.cn/#/zh-CN/component/message
常用于主动操作后的反馈提示。
Message与 Notification 的区别是Notification更多用于系统级通知的被动提醒。
默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用showClose字段。此外，和 Notification 一样，Message 拥有可控的duration，设置0为不会被自动关闭，默认为 3000 毫秒。
<div id="app">
<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
methods: {
open1() {
this.$message({
showClose: true,
message: '这是一条消息提示'
});
},
open2() {
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
showClose: true,
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
}
}
})
</script>
MessageBox 弹框
https://element.eleme.cn/#/zh-CN/component/message-box
模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。
消息提示
<div id="app">
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
methods: {
open() {
this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: function (data) {
if("confirm"===data){
console.log("你点击了确认按钮")
}
if("cancel"===data){
console.log("你点击了关闭按钮")
}
}
});
}
}
})
</script>
确认消息
<div id="app">
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function (data) {
if("confirm"===data){
console.log("你点击了确认按钮")
}
}).catch(function (data) {
if("cancel"===data){
console.log("你点击了取消按钮")
}else{
console.log("你点击了关闭按钮")
}
})
}
}
})
</script>
Notification 通知
https://element.eleme.cn/#/zh-CN/component/notification
悬浮出现在页面角落，显示全局的通知提醒消息
<div id="app">
<el-button
plain
@click="open1">
可自动关闭
</el-button>
<el-button
plain
@click="open2">
不会自动关闭
</el-button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
methods: {
open1() {
const h = this.$createElement;
this.$notify({
title: '标题名称',
message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
});
},
open2() {
this.$notify({
title: '提示',
message: '这是一条不会自动关闭的消息',
duration: 0
});
}
}
})
</script>
导航
NavMenu 导航菜单
https://element.eleme.cn/#/zh-CN/component/menu
为网站提供导航功能的菜单
<div id="app">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</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-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="#" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<div style="height: 100px">
</div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</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-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
至于其他的导航样式 自行查询官方文档
Tabs 标签页
https://element.eleme.cn/#/zh-CN/component/tabs
分隔内容上有关联但属于不同类别的数据集合。
<div id="app">
<el-tabs type="border-card">
<el-tab-pane label="用户管理" v-text="tab1" ></el-tab-pane>
<el-tab-pane label="配置管理" v-text="tab2"></el-tab-pane>
<el-tab-pane label="角色管理" v-text="tab3"></el-tab-pane>
<el-tab-pane label="定时任务补偿" v-text="tab4"></el-tab-pane>
</el-tabs>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
tab1:"",
tab2:"",
tab3:"",
tab4:"",
};
},
created(){
this.tab1="用户管理"
this.tab2="配置管理"
this.tab3="角色管理"
this.tab4="定时任务补偿"
},
methods: {
}
})
</script>
Breadcrumb 面包屑
https://element.eleme.cn/#/zh-CN/component/breadcrumb
显示当前页面的路径，快速返回之前的任意页面。
<div id="app">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
}
})
</script>
PageHeader 页头
https://element.eleme.cn/#/zh-CN/component/page-header
如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
<div id="app">
<el-page-header @back="goBack" content="详情页面"></el-page-header>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
goBack() {
console.log('go back');
}
}
})
</script>
Dropdown 下拉菜单
https://element.eleme.cn/#/zh-CN/component/dropdown
将动作或菜单折叠到下拉菜单中。
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<div id="app">
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus" command="a">黄金糕</el-dropdown-item>
<el-dropdown-item command="b">狮子头</el-dropdown-item>
<el-dropdown-item command="c" >螺蛳粉</el-dropdown-item>
<el-dropdown-item icon="el-icon-check" command="d">双皮奶</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check" command="e">蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
handleCommand(command) {
console.log(command)
}
}
})
</script>
Steps 步骤条
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
<div id="app">
<el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
active: 0
};
},
created(){
},
methods: {
next() {
this.active++
if ( this.active> 3) {
this.active = 0;
}
}
}
})
</script>
弹窗
Dialog 对话框
https://element.eleme.cn/#/zh-CN/component/dialog
在保留当前页面状态的情况下，告知用户并承载相关操作。
<div id="app">
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
dialogVisible: false
};
},
created(){
},
methods: {
dialog_affirm:function () {
this.dialogVisible = false
console.log("确认")
},
dialog_cancel:function () {
this.dialogVisible = false
console.log("取消")
}
}
})
</script>
Tooltip 文字提示
https://element.eleme.cn/#/zh-CN/component/tooltip
常用于展示鼠标 hover 时的提示信息。
<style>
.box {
margin: 100px auto;
width: 400px;
}
.top {
text-align: center;
}
.left {
float: left;
width: 60px;
}
.right {
float: right;
width: 60px;
}
.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
</style>
<div id="app">
<div class="box">
<div class="top">
<el-tooltip class="item" effect="light" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
<el-tooltip class="item" effect="light" content="Top Center 提示文字" placement="top">
<el-button>上边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="light" content="Top Right 提示文字" placement="top-end">
<el-button>上右</el-button>
</el-tooltip>
</div>
<div class="left">
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
<el-button>左上</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
<el-button>左边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
<el-button>左下</el-button>
</el-tooltip>
</div>
<div class="right">
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
<el-button>右上</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
<el-button>右边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
<el-button>右下</el-button>
</el-tooltip>
</div>
<div class="bottom">
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
<el-button>下左</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
<el-button>下边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
<el-button>下右</el-button>
</el-tooltip>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
}
})
</script>
Popover 弹出框
https://element.eleme.cn/#/zh-CN/component/popover
<style>
.box {
margin: 200px auto;
width: 500px;
}
</style>
<div id="app">
<div class="box">
<el-popover
placement="top"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">hover 激活</el-button>
</el-popover>
<el-popover
placement="bottom"
title="标题"
width="200"
trigger="click"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">click 激活</el-button>
</el-popover>
<el-popover
ref="popover"
placement="right"
title="标题"
width="200"
trigger="focus"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
</el-popover>
<el-button v-popover:popover>focus 激活</el-button>
<el-popover
placement="bottom"
title="标题"
width="200"
trigger="manual"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
v-model="visible">
<el-button slot="reference" @click="visible = !visible">手动激活</el-button>
</el-popover>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
visible: false
};
},
created(){
},
methods: {
}
})
</script>
Popconfirm 气泡确认框
点击元素，弹出气泡确认框。
<div id="app">
<el-popconfirm
title="这是一段内容确定删除吗？"
@confirm="confirm_vue"
>
<el-button slot="reference">删除</el-button>
</el-popconfirm>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
visible: false
};
},
created(){
},
methods: {
confirm_vue:function () {
console.log("确认删除")
}
}
})
</script>
其他
Card 卡片
https://element.eleme.cn/#/zh-CN/component/card
将信息聚合在卡片容器中展示。
<style>
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<div id="app">
<el-row>
<el-col :span="6" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 1 : 0">
<el-card :body-style="{ padding: '0px' }">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>好吃的汉堡</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">操作按钮</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
currentDate: new Date()
};
},
created(){
},
methods: {
}
})
</script>
轮播图
https://element.eleme.cn/#/zh-CN/component/carousel
在有限空间内，循环播放同一类型的图片、文字等内容
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
}
.carousel1 .el-carousel__item:nth-of-type(1){
background-color: #99a9bf;
}
.carousel1 .el-carousel__item:nth-of-type(2){
background-color: #b1cd95;
}
.carousel1 .el-carousel__item:nth-of-type(3){
background-color: #79aa84;
}
.carousel1 .el-carousel__item:nth-of-type(4){
background-color: #70a79a;
}
</style>
<div id="app">
<div class="block carousel1">
<span class="demonstration">Click 指示器触发</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
}
})
</script>
Collapse 折叠面板
通过折叠面板收纳内容区域
https://element.eleme.cn/#/zh-CN/component/collapse
<div id="app">
<el-collapse v-model="activeNames" >
<el-collapse-item title="一致性 Consistency" name="1">
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
<el-collapse-item title="反馈 Feedback" name="2">
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
</el-collapse-item>
<el-collapse-item title="效率 Efficiency" name="3">
<div>简化流程：设计简洁直观的操作流程；</div>
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
</el-collapse-item>
<el-collapse-item title="可控 Controllability" name="4">
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
</el-collapse-item>
</el-collapse>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
activeNames: ['1','2']
};
},
created(){
},
methods: {
}
})
</script>
Timeline 时间线
可视化地呈现时间流信息。
<div id="app">
<div class="block">
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/2 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
}
})
</script>
分割线
区隔内容的分割线。
https://element.eleme.cn/#/zh-CN/component/divider
<div id="app">
<div>
<span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
<el-divider></el-divider>
<span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
}
})
</script>
<div id="app">
<div>
<span>头上一片晴天，心中一个想念</span>
<el-divider content-position="left">少年包青天</el-divider>
<span>饿了别叫妈, 叫饿了么</span>
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
<span>为了无法计算的价值</span>
<el-divider content-position="right">阿里云</el-divider>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
}
})
</script>
<div id="app">
<div>
<span>雨纷纷</span>
<el-divider direction="vertical"></el-divider>
<span>旧故里</span>
<el-divider direction="vertical"></el-divider>
<span>草木深</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
}
})
</script>
日历
https://element.eleme.cn/#/zh-CN/component/calendar
显示日期
<div id="app">
<el-calendar v-model="value">
</el-calendar>
<el-button @click="click_vue">默认按钮</el-button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
value: new Date()
};
},
created(){
},
methods: {
click_vue:function () {
var c= this.$data.value
var riqi=(c.getFullYear()+"-"+(c.getMonth()+1)+"-"+c.getDate()) //获取年月日
var shij=(c.getHours()+":"+c.getMinutes()+":"+c.getSeconds()) //获取时分秒
var ti=riqi+" "+shij
this.$alert("选中的时间: "+ ti)
}
}
})
</script>
Image 图片
https://element.eleme.cn/#/zh-CN/component/image
图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等
基础用法
<div id="app">
<el-row >
<div class="demo-image">
<div class="block" v-for="fit in fits" :key="fit">
<el-col :span="4">
<el-image
style="width: 100px; height: 100px"
:src="url"
:fit="fit"></el-image>
<br>
<span class="demonstration">{{ fit }}</span>
</el-col>
</div>
</div>
</el-row>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
};
},
created(){
},
methods: {
}
})
</script>
占位内容
就是当图片还没加载成功时候显示的内容
可通过slot = placeholder可自定义占位内容
<div id="app">
<el-row>
<div class="demo-image__placeholder">
<el-col :span="6">
<div class="block">
<el-image :src="src">
<div slot="placeholder" class="image-slot">
图片加载中<span class="dot">...</span>
</div>
</el-image>
</div>
</el-col>
</div>
</el-row>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
};
},
created(){
},
methods: {
}
})
</script>
加载失败
<div id="app">
<div class="demo-image__error">
<div class="block">
<el-image :src="url"
></el-image>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
url: '#'
};
},
created(){
},
methods: {
}
})
</script>
懒加载
可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。可通过scroll-container来设置滚动容器，若未定义，则为最近一个overflow值为auto或scroll的父元素。
<div id="app">
<div class="demo-image__lazy" style="width: 300px;height: 400px;overflow: auto;margin: 0 auto">
<el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
urls: [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
};
},
created(){
},
methods: {
}
})
</script>
大图预览
可通过 previewSrcList 开启预览大图的功能。
<style>
.el-image{
width: 100px; height: 100px;
margin-right: 10px;
}
</style>
<div id="app">
<div class="demo-image__preview">
<el-image v-for="(item,index) in srcList"
:src="item"
:preview-src-list="srcList" :z-index="index">
</el-image>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
]
};
},
created(){
},
methods: {
}
})
</script>
回到顶部
返回页面顶部的操作按钮
https://element.eleme.cn/#/zh-CN/component/backtop
<style>
.backtop {
height: 100vh;
/* 这里给app一个滚动效果 */
overflow-y: auto;
}
body{
overflow:hidden;
}
html{
overflow:hidden;
}
.backtop::-webkit-scrollbar {/*滚动条整体样式*/
width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.backtop::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #8b8a8a;
}
.backtop::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
/* 希望所有的滚动条样式是一样的，那么伪元素前面不需要加上class、id、标签名等之类的任何东西。 比如: ::-webkit*/
</style>
<div id="app">
<div class="backtop" >
<div style="height: 1000px">
</div>
</div>
<!-- 返回顶部 -->
<!-- 样式1 默认样式-->
<el-backtop target=".backtop"></el-backtop>
<!-- 样式2 自定义样式-->
<el-backtop target=".backtop" :bottom="300">
<div
style="{
height: 100%;
width: 100%;
background-color: #ffffff;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
top
</div>
</el-backtop>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
};
},
created(){
},
methods: {
}
})
</script>
滚动
https://element.eleme.cn/#/zh-CN/component/infiniteScroll
无限滚动
<style>
::-webkit-scrollbar {/*滚动条整体样式*/
width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #8b8a8a;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
.infinite-list{
overflow:auto;
height: 400px;
width: 300px;
list-style-type:none;
text-align: center;
}
.infinite-list li{
background: #EDEDED;
margin-bottom: 10px;
}
/* 希望所有的滚动条样式是一样的，那么伪元素前面不需要加上class、id、标签名等之类的任何东西。 比如: ::-webkit*/
</style>
<div id="app">
<ul class="infinite-list" v-infinite-scroll="load" >
<li v-for="i in count" class="infinite-list-item">{{ i }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
count: 0
};
},
created(){
},
methods: {
//每次滚动条到头了 就会调用load
load () {
this.count += 2
}
}
})
</script>
加载滚动
Drawer 抽屉
https://element.eleme.cn/#/zh-CN/component/drawer
有些时候, Dialog(对话框) 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.
像很多网页都用于手机端的导航 或者 嵌套表单
<div id="app">
<el-radio-group v-model="direction">
<el-radio label="ltr">从左往右开</el-radio>
<el-radio label="rtl">从右往左开</el-radio>
<el-radio label="ttb">从上往下开</el-radio>
<el-radio label="btt">从下往上开</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
点我打开
</el-button>
<el-drawer
title="我是标题"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<span>我来啦!</span>
</el-drawer>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
drawer: false,
direction: 'rtl',
};
},
created(){
},
methods: {
handleClose(done) {
this.$data.drawer=false;
}
}
})
</script>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
