ElementUI概述
定义
- ElementUI是一套开发者、设计师产品经理准备的基于Vue2.0桌面端组件库，是基于Vue的一个UI框架，该框架基于Vue开发了很多相关组件方便快速开发页面
由来
- ElementUI前端团队基于Vue进行开发并开源，提供封装好的组件
安装ElementUI
方式一：CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<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>
建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响.参考：unpkg.com
<!-- 引入 elementUI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme- chalk/index.css">
<!-- 引入elementUI 组件库 -->
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
方式二：本地资源
<!-- 引入 elementUI 样式 -->
<link rel="stylesheet" href="./element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 引入 vue 的js文件: elementUI基于Vue开发，必须在elementUI的js文件之前引入 -->
<script src="./vue-v2.6.10.js"></script>
<!-- 引入elementUI 组件库 -->
<script src="./element-ui-2.13.0/lib/index.js"></script>
简单使用
使用步骤
- 创建html页面
- 引入本地资源
- 创建div
- 创建vue对象
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
},
methods: {
},
})
</script>
</html>
Layout布局
单一分栏基础布局
分栏间隔
响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
<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: #f9fafc;
}
</style>
</head>
<body>
<div id="app">
<!-- 单一分栏基础布局 elementui代码，一定放在vue操作的范围中 -->
<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>
<!--分栏间隔:gutter="50":设置每列直接的间隔为50px -->
<el-row :gutter="50">
<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>
<!-- 响应式布局
xs: 超小屏幕 手机 (<768px)
sm: 小屏幕 平板 (≥768px)
md: 中等屏幕 桌面显示器 (≥992px)
lg: 大屏幕 大桌面显示器 (≥1200px)
xl:超大桌面显示器（≥1920px）
-->
<el-row :gutter="10">
<el-col :xs="10" :sm="6" :md="1" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="2" :sm="6" :md="11" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="2" :sm="6" :md="11" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="10" :sm="6" :md="1" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
},
methods: {
},
})
</script>
</html>
属性
xs: 超小屏幕 手机 (<768px) sm: 小屏幕 平板 (≥768px) md: 中等屏幕 桌面显示器 (≥992px) lg: 大屏幕 大桌面显示器 (≥1200px) xl:超大桌面显示器（≥1920px）
Container布局容器
用于布局的容器组件，方便快速搭建页面的基本结构。
常见标签：
注意：
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，
常见页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
<style>
.el-header{
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
height: 600px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
height: 600px;
}
body > .el-container {
margin-bottom: 40px;
}
</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>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
},
methods: {
},
})
</script>
</html>
导航菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
<style>
.el-header{
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color:#545c64;
color: #333;
line-height: 200px;
height: 600px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
height: 600px;
}
body > .el-container {
margin-bottom: 40px;
}
a{
text-decoration: none;
display: block;
}
.el-menu-item a{
color: #fff;
}
/* .el-menu-item下的a标签被点击的时候字体颜色为： #ffd04b */
.el-menu-item.is-active a{
color: #ffd04b;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<!-- 导航菜单
default-active=2 页面刷新自动选中index=2的菜单
background-color 菜单的背景色
active-text-color 当前激活菜单的文字颜色
text-color:菜单的文字颜色
active-text-color 当前激活菜单的文字颜色
@open="handleOpen"和@close="handleClose"适用于el-submenu（折叠菜单）获取的是折叠菜单的index值
-->
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">
<a href="07.Dialog 对话框.html" target="main">对话框</a>
</el-menu-item>
<el-menu-item index="1-2">
<a href="08.标签页.html" target="main">标签页</a>
</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">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<a href="02.Layout 布局.html" target="main">
<i class="el-icon-menu"></i>
<span slot="title">Layout 布局</span>
</a>
</el-menu-item>
<el-menu-item index="3">
<a href="06.消息提示.html" target="main">
<i class="el-icon-document"></i>
<span slot="title">消息提示</span>
</a>
</el-menu-item>
<el-menu-item index="4">
<a href="05.按钮.html" target="main">
<i class="el-icon-setting"></i>
<span slot="title">按钮</span>
</a>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<iframe height="100%" width="100%" frameborder="0" name="main">
</iframe>
</el-main>
</el-container>
</el-container>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
})
</script>
</html>
按钮
常见按钮
<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>
相关属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 尺寸 | string | medium / small / mini | — |
| type | 类型 | string | primary / success / warning / danger / info / text | — |
| plain | 是否朴素按钮 | boolean | — | false |
| round | 是否圆角按钮 | boolean | — | false |
| circle | 是否圆形按钮 | boolean | — | false |
| loading | 是否加载中状态 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标类名 | string | — | — |
| autofocus | 是否默认聚焦 | boolean | — | false |
| native-type | 原生 type 属性 | string | button / submit / reset | button |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<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>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
},
methods: {
},
})
</script>
</html>
消息提示
常见消息提示
<template>
<el-button type="primary" @click="open1">消息</el-button>
<el-button type="success" @click="open2">成功</el-button>
<el-button type="warning" @click="open3">警告</el-button>
<el-button type="danger" @click="open4">错误</el-button>
</template>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<el-button type="primary" @click="open1">消息</el-button>
<el-button type="success" @click="open2">成功</el-button>
<el-button type="warning" @click="open3">警告</el-button>
<el-button type="danger" @click="open4">错误</el-button>
</template>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
},
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.error("错了哦，这是一条错误消息");
}
},
})
</script>
</html>
对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<!--dialogTableVisible:的值为true会展示对话框，为false就隐藏 -->
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<!--
gridData：要遍历的数组，跟data中定义的属性对应
label：表格表头
property：gridData数组中对象中的属性名
-->
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<!--
:model="form";绑定了定义在vue对象中data中的属性
v-model="form.name"：vue对象中的from.name进行双向数据绑定
-->
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<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>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
gridData: [{
date: ‘2016-05-02‘,
name: ‘王小虎‘,
address: ‘上海市普陀区金沙江路 1518 弄‘
}, {
date: ‘2016-05-04‘,
name: ‘王小虎‘,
address: ‘上海市普陀区金沙江路 1518 弄‘
}, {
date: ‘2016-05-01‘,
name: ‘王小虎‘,
address: ‘上海市普陀区金沙江路 1518 弄‘
}, {
date: ‘2016-05-03‘,
name: ‘王小虎‘,
address: ‘上海市普陀区金沙江路 1518 弄‘
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: ‘‘,
region: ‘‘,
date1: ‘‘,
date2: ‘‘,
delivery: false,
type: [],
resource: ‘‘,
desc: ‘‘
},
formLabelWidth: ‘120px‘
},
methods: {
},
})
</script>
</html>
标签页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">
<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-tab-pane>
</el-tabs>
</template>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
activeName: ‘first‘
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
},
})
</script>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">
<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-tab-pane>
</el-tabs>
</template>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
activeName: ‘first‘
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
},
})
</script>
</html>
分页
相关属性
@size-change="handleSizeChange"：当每页显示的数据条数发生变化的时候调用handleSizeChange
@current-change="handleCurrentChange"：当前页发生变化的时候调用handleCurrentChange
:current-page:当前页码
page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[10, 20, 30, 40]
表示四个选项，每页显示 10 个，20个，30 个或者 40 个。
page-size：每页显示多少条数据，支持 .sync 修饰符
total:总数据量
layout：对分页导航的布局顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">
<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-tab-pane>
</el-tabs>
</template>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
activeName: ‘first‘
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
},
})
</script>
</html>
表单
相关属性
model：表单数据对象
rules:表单验证规则
ref:ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
label-width:表单域标签的宽度，例如 ‘50px‘。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
status-icon:是否在输入框中显示校验结果反馈图标
hide-required-asterisk:是否显示必填字段的标签旁边的红色星号,为false就是显示
prop:表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的,进行表单校验的时候，就是根据prop的值找到表单项进行校验。
validate:对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用， 并传入两个参数：是否校验成功和未通过校验的字段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
.demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<el-row class="block-col-2">
<el-col :span="12">
<span class="demonstration">hover 激活</span>
<el-dropdown>
<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">黄金糕</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="12">
<span class="demonstration">click 激活</span>
<el-dropdown trigger="click">
<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">黄金糕</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
},
methods: {
},
})
</script>
</html>
下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.加入ElementUI样式库 -->
<link rel="stylesheet" href="js/element-ui-2.13.0/lib/theme-chalk/index.css">
<!-- 2.加入vue.js -->
<script src="js/vue.js"></script>
<!-- 3.加入Element的依赖js文件 -->
<script src="js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<!--
el-form:表单组件
:model="ruleForm":表单组件和data中的ruleForm对象的绑定
:rules="rules"：绑定表单的校验规则，:rules属性值存在于data中
ref="ruleForm"：指定子组件的唯一名称
-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<!--
label="活动名称"：表单项的提示信息
prop="name"：prop的值是存在于ruleForm中的属性名称
-->
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.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="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.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="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(‘ruleForm‘)">立即创建</el-button>
<el-button @click="resetForm(‘ruleForm‘)">重置</el-button>
</el-form-item>
</el-form>
</div>
</body>
<script>
let vu=new Vue({
el:"#app",
data:{
ruleForm: {
username:"",
name: ‘‘,
region: ‘‘,
date1: ‘‘,
date2: ‘‘,
delivery: false,
type: [],
resource: ‘‘,
desc: ‘‘
},
rules: {
//用户名需要满足：字母数字下划线组成，输入6-10位
username:[
{validator: (rule, value, callback) => {
//alert(JSON.stringify(rule))
let unameReg=/^[0-9a-zA-Z_]{6,10}$/;
if (value === ‘‘) {
callback(new Error(‘用户名不能为空‘));
} else if(!unameReg.test(value)){
callback(new Error(‘用户名需要字母数字下划线组成，输入6-10位‘));
}else{
//满足要求的回调函数
callback();
}
},
trigger: ‘blur‘ }
],
name: [
// required: true：输入不能为空；message：不满足要求的提示信息
//trigger:鼠标离开文本框开始校验
{ required: true, message: ‘请输入活动名称‘, trigger: ‘blur‘ },
{ min: 3, max: 5, message: ‘长度在 3 到 5 个字符‘, trigger: ‘blur‘ }
],
region: [
{ required: true, message: ‘请选择活动区域‘, trigger: ‘change‘ }
],
date1: [
{ type: ‘date‘, required: true, message: ‘请选择日期‘, trigger: ‘change‘ }
],
date2: [
{ type: ‘date‘, required: true, message: ‘请选择时间‘, trigger: ‘change‘ }
],
type: [
{ type: ‘array‘, required: true, message: ‘请至少选择一个活动性质‘, trigger: ‘change‘ }
],
resource: [
{ required: true, message: ‘请选择活动资源‘, trigger: ‘change‘ }
],
desc: [
{ required: true, message: ‘请填写活动形式‘, trigger: ‘blur‘ }
]
}
},
methods: {
submitForm(formName) {
//this.$refs[formName]:获取到的是表单组件
//验证表单中的所有表单项是否满足rules中的校验规则，如果都满足valid的值会是true
//如果表单中的表单项有一个不满足要求的那么，valid的值就是false
this.$refs[formName].validate((valid) => {
//alert(valid)
if (valid) {
//提交表单
alert(‘submit!‘);
} else {
console.log(‘error submit!!‘);
return false;
}
});
},
resetForm(formName) {
//重置表单
this.$refs[formName].resetFields();
}
},
})
</script>
</html>