本文是ElementUI的基础教程，介绍了如何安装和使用这个基于Vue2.0的桌面端组件库。ElementUI提供丰富的组件如按钮、表单，以及布局工具如Container和Row/Col，帮助开发者快速搭建页面结构。此外，还详细讲解了表单验证的实现方法，包括规则定义和验证触发。
Element UI
Element UI简介
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
https://element.eleme.cn/#/zh-CN
特点：
- 丰富的组件
- 优秀的文档
- 强大的团队支持
Elemnet UI安装
创建vue-cli项目，并安装element-ui。
npm install element-ui vue-router --save
在main.js中引入Elelment-ui。
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
在App.vue中添加，并运行查看效果。
<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>
容器
Container 布局容器，用于布局的容器组件，方便快速搭建页面的基本结构(1父+4子)：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
练习1-上中下
<template>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</template>
<script>
export default {
name:'container'
}
</script>
<style>
.el-container{
height: 35rem;
}
.el-header{
background-color: #00E0E0;
}
.el-main{
background-color: #4EC9B0;
}
.el-footer{
background-color: #61AEEE;
}
</style>
注意：如果想给el元素设置样式，直接使用元素名作为类样式的名字即可。
练习2-上左右
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside>Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name:'container'
}
</script>
<style>
.el-container{
height: 35rem;
}
.el-header{
background-color: #00E0E0;
}
.el-main{
background-color: #4EC9B0;
}
.el-aside{
width: 10rem;
background-color: #61AEEE;
}
</style>
布局
通过布局我们可以将一块区域快速的分成多行(el-row)，每行可以分成24列(el-col分栏)来迅速的创建页面布局。
基础布局
<template>
<div>
<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>
</template>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.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>
分栏间隔
分栏之间存在间隔。
<hr>
<el-row :gutter="40">
<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>
分栏偏移
支持偏移指定的栏数。
<hr>
<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>
对齐方式
通过 flex 布局来对分栏进行灵活的对齐。将 type 属性赋值为 ‘flex’，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
<el-row type="flex" class="row-bg">
<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>
按钮
基础用法
使用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>
按钮组
以按钮组的方式出现，常用于多项类似操作。
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
<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-group>
表单
普通表单
el-form代表表单，el-form-item代表一个表单域(默认独立一行)，每个表单域中可以各种表单控件。
<template>
<div>
<el-form ref="form" :model="user" label-width="80px">
<el-form-item label="账号:">
<el-input v-model="user.name"></el-input>
</el-form-item>
<el-form-item label="密码:">
<el-input v-model="user.pass" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button>登录</el-button>
<el-button>注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default{
name:'form',
data:function(){
return {
user:{}
};
}
}
</script>
<style>
</style>
行内表单
:inline=“true”
<el-form :inline="true" :model="user">
<el-form-item label="审批人">
<el-input v-model="user.name" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-input v-model="user.area" placeholder="活动区域"></el-input>
</el-form-item>
<el-form-item>
<el-button >查询</el-button>
</el-form-item>
</el-form>
注意：运行时会报错。
是因为组件名不能和html标签重复，所以只要修改Form.vue组件中的name属性为其他即可。
Input 输入框
通过鼠标或键盘输入字符。
<template>
<div>
<el-form :model="u" label-width="80px">
<el-form-item label="姓名:">
<el-input v-model="u.name" placeholder="普通输入框"></el-input>
</el-form-item>
<el-form-item label="邮箱:">
<el-input v-model="u.email" placeholder="可清除输入框" clearable></el-input>
</el-form-item>
<el-form-item label="生日:">
<el-input v-model="u.birthday" placeholder="带图标" suffix-icon="el-icon-user" prefix-icon="el-icon-search"></el-input>
</el-form-item>
<el-form-item label="简介1:">
<el-input type="textarea" :rows="2" placeholder="文本域" v-model="u.info"></el-input>
</el-form-item>
<el-form-item label="简介2:">
<el-input type="textarea" :rows="2" placeholder="文本域" v-model="u.info" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'input',
data: function() {
return {
u: {
name: "张三"
}
};
}
}
</script>
<style>
</style>
单选和复选
<template>
<div>
<el-form :model="u" label-width="80px">
<el-form-item label="性别:">
<el-radio v-model="u.sex" label="0">男</el-radio>
<el-radio v-model="u.sex" label="1">女</el-radio>
</el-form-item>
<el-form-item label="会员:">
<el-radio-group v-model="u.vip">
<el-radio :label="3" border>普通会员</el-radio>
<el-radio :label="6" border>黄金会员</el-radio>
<el-radio :label="9" >砖石会员</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="爱好:">
<el-checkbox v-model="u.hobby" :label="1">娜娜</el-checkbox>
<el-checkbox v-model="u.hobby" :label="2">倩倩</el-checkbox>
<el-checkbox v-model="u.hobby" :label="3">芳芳</el-checkbox>
<el-checkbox v-model="u.hobby" :label="4">玲玲</el-checkbox>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'rc',
data: function() {
return {
u: {
sex: "1",
vip:6,
hobby:[1,3]
}
};
}
}
</script>
<style>
</style>
select
<template>
<el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
<style>
</style>
DatePicker
<template>
<div>
<el-date-picker v-model="value" placeholder="请选择日期" @change="m1"></el-date-picker>
<el-date-picker v-model="value" placeholder="请选择日期" @change="m1" type="datetime"></el-date-picker>
</div>
</template>
<script>
export default {
name:'datePicker',
data:function(){
return {
value:''
};
},
methods:{
m1(value){
console.log(value);
console.log(this.value);
}
}
}
</script>
<style>
</style>
表单验证
表单验证步骤：
- 编写验证规则，注意验证规则属性名要和数据属性名相同。
- 通过表单的:rules使用对应的验证规则。
- 将Form-Item 的 prop 属性设置为需校验规则的属性名。
<template>
<el-form ref="userForm" :model="user" label-width="80px" :rules="userRules">
<el-form-item label="账号:" prop="account">
<el-input v-model="user.account"></el-input>
</el-form-item>
<el-form-item label="密码:" prop="password">
<el-input v-model="user.password" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button @click="login">登录</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'FormValidator',
data: function() {
return {
user: {
account: "",
password: ""
},
userRules: {
account: [{
required: true,
message: '账号',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
],
password: [{
required: true,
message: '密码',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
]
}
};
},
methods:{
login(){
console.log("登录操作。。。");
},
reset(){
console.log("重置表单。。。");
}
}
}
</script>
<style>
</style>
这种情况下，用户仍然可以通过点击按钮完成登录操作。所以我们需要的是在用户登录时再次执行所有的验证规则。
methods: {
login() {
console.log("登录操作。。。");
this.$refs['userForm'].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
reset() {
console.log("重置表单。。。");
this.$refs['userForm'].resetFields();
}
}
表单常用验证规则：
是否必须： required:true|| fasle
根据正则表达式验证： pattern:
最大长度和最小长度： min和max
数据转换：transform（value）{return}
自定义校验功能：validador:fn(rule, value, callback);
自带验证类型： type:
string：必须是类型string。This is the default * type.
number：必须是类型number。
boolean：必须是类型boolean。
method：必须是类型function。
regexp：必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp。
integer：必须是类型number和整数。
float：必须是类型number和浮点数。
array：必须是由…确定的数组Array.isArray。
object：必须是类型object而不是Array.isArray。
enum：价值必须存在于enum。
date：值必须有效，由确定 Date
url：必须是类型url。
hex：必须是类型hex。
email：必须是类型email。
扫一扫
2288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
