0%

Element UI-随笔

Element UI

一、简介

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

ElementUI官网

ps:类似的前端框架还有很多如iview

二、基本使用

1.初始化项目

1
vue create element-test

2.安装element-ui 依赖

1
npm i element-ui -S || cnpm i element-ui -S
2.1.查看package.json确认是否安装成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "element-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"vue-template-compiler": "^2.6.11"
}
}

3.引入element-ui

3.1.main.js
1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './App.vue'
//引入ElementUI
import ElementUI from 'element-ui'
//将ElementUI注册/挂载到当前的应用程序当中
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
3.2.全局引入element-ui 样式
1
2
//全局引入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css'
3.3.简单测试
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div id="app">
<el-button @click="show">按钮</el-button>
</div>
</template>

<script>
export default {
name: 'App',
components: {},
methods: {
show() {
this.$message.success('这是element-ui提示');
}
}
}
</script>

<style>

</style>

简单test

4.按需加载

4.1对项目打包
1
npm run build

发现vendors库高达789KB,这是由于我们未能使用按需加载,所以对element-ui进行了全量打包的结果,按需加载的用法如下:

4.1.1安装babel-plugin-component
1
npm i babel-plugin-component -D
4.1.2.修改babel.config.js文件
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
["component", {
"libraryName": "element-ui", //指定按需加载库名称
"styleLibraryName": "theme-chalk" //指定按需加载的样式库
}]
]
}
4.1.3.修改引入的方式main.js
1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'
import App from './App.vue'
import {Button,Message} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.component(Button.name, Button); //组件方式引用
Vue.prototype.$message = Message; //原型方式引用

Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')

按需加载

三、插件引用(推荐)

1.安装插件

1
vue add element

2.安装选项讲解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
?How do you want to import Element? //你打算如何引入Element
Fully import //整体引入
Import on demand //按需加载

?Do you wish to overwrite Elements SCSS varibles?(y/n) //是否需要覆盖Element中的某些样式的变量,因为当你改变样式变量,整体的颜色将会随着变更

?Choose the locale you want to load (Use arrow keys) //选择语言版本
zh-CN
zh-TW
af-ZA
ar
bg
ca
cs-CZ
(Move up and down to reveal more choices)

2.1安装成功后的文件

main.js

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

element.js

1
2
3
4
5
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

四、表单基本用法

  1. el-form容器,通过model绑定数据
  2. el-form-item容器,通过lablel绑定标签
  3. 表单组件通过v-model绑定model中的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
<div id="app">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>

<script>

export default {
name: 'app',
components: {

},
data(){
return{
formInline: {
user: '',
region: ''
}
}
},
methods:{
onSubmit() {
console.log('submit!');
}
}
}
</script>

<style>

</style>

五、表单校验基本用法

5.1.定义校验规则,可以绑定到el-form或el-form-item

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
<div id="app">
<el-form :inline="true" :model="data" class="demo-form-inline" :rules="rules">
<el-form-item label="审批人" prop="user">
<el-input v-model="data.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="data.region" placeholder="活动区域">
<el-option label="区域一" value="上海"></el-option>
<el-option label="区域二" value="北京"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>

<script>

export default {
name: 'app',
components: {

},
data(){
const userValidator = (rule,value,callback)=>{//声明一个校验规则
if (value.length > 3) {
callback() //放行
}else {
callback(new Error('用户名长度必须大于3')) //抛出校验提示
}
}
return{
data: {
user: '',
region: ''
},
rules:{
user:[
{required:true,trigger:'change',message:'用户名必须录入'}, //常规校验
{validator:userValidator,trigger:'change'} //自定义校验规则
]
}
}
},
methods:{
onSubmit() {
console.log(this.data);
//点击时主动给校验,此处调用会对所有校验规则进行统一处理
this.$refs.form.validate((isValid, errors) => {
console.log(isValid);
console.log(errors);
})
}
}
}
</script>

<style>
</style>
5.1.1.需要给el-form绑定rules和model这两个属性,rules代表你的自定义表单验证规则,model代表你需要验证的数据。
5.1.2.在表单里绑定的值一定是model绑定的数据里的某个值,我们需要验证哪个字段,就在哪个el-form-item标签上绑定prop属性,值为你自定义规则里对应的值(自定义规则的值名称应和你model绑定的数据里的值的名称对应)
5.1.3.trigger可以取’change’值发生改变时,’blur’失去焦点时
5.1.4.通过给el-form绑定ref属性来实现主动调用校验规则

六、表单校验高级用法

6.1动态添加校验规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<template>
<div id="app">
<!-- validate-on-rule-change属性当rules发生改变时会立即校验一次默认值为true-->
<el-form :inline="true" :model="data" class="demo-form-inline" :rules="rules" ref="form">
<el-form-item label="审批人" prop="user">
<el-input v-model="data.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="data.region" placeholder="活动区域">
<el-option label="区域一" value="上海"></el-option>
<el-option label="区域二" value="北京"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button type="primary" @click="addRule">添加校验规则</el-button>
</el-form-item>
</el-form>
</div>
</template>

<script>

export default {
name: 'app',
components: {},
data() {
return {
data: {
user: '',
region: ''
},
rules: {
user: [
{required: true, trigger: 'change', message: '用户名必须录入'},

]
}
}
},
methods: {
onSubmit() {
console.log(this.data);
//点击时主动给校验,此处调用会对所有校验规则进行统一处理
this.$refs.form.validate((isValid, errors) => {
console.log(isValid);
console.log(errors);
})
},
addRule() {
const userValidator = (rule, value, callback) => {
if (value.length > 3) {
callback()
} else {
callback(new Error('用户名长度必须大于3'))
}
}
const newRule=[
...this.rules.user, //解构将数组中的所有属性依次遍历出来
{validator:userValidator,trigger:'change'}
]
//合并之前的所有规则并生成一个新的规则赋值给this.rules
this.rules=Object.assign({},this.rules,{user:newRule})
}
}
}
</script>

<style>
</style>
6.1.1.Object函数提供了一个叫做assign的函数,用来合并多个对象, 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
语法:
Object.assign(target, ...sources)
  target:
    目标对象
  sources:
    源对象
1
2
3
4
5
6
7
   const one = {a: 1, b: 2}
        const two = {c: '3', d: '4'}
        var three = Object.assign({e: 5}, one, two)
        打印结果:
            three.a => 1
            three.c => 3
            three.e => 5

6.2.手动控制校验状态(官网是没有相关文档只有通过解读源码才能发现)

  • valdate-status 验证状态,枚举值,共四种:
    • success:验证成功
    • error:验证失败
    • validatin:验证中
    • (空):未验证
  • error:自定义错误提示
6.2.1el-form-item属性
1
2
3
4
5
6
7
<el-form-item
label="审批人"
prop="user"
:error="error"
:validate-status="status"
status-icon
>
6.2.2. status-icon属性作用是为了给校验过程中添加一下图标提示

6.3.自定义状态(实际开发中不常用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<template>
<div id="app">
<!-- validate-on-rule-change属性当rules发生改变时会立即校验一次默认值为true-->
<el-form
:inline="true"
:model="data"
class="demo-form-inline"
:rules="rules" ref="form"
validate-on-rule-change
status-icon>
<el-form-item
label="审批人"
prop="user"
:error="error"
:validate-status="status"
>
<el-input v-model="data.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="data.region" placeholder="活动区域">
<el-option label="区域一" value="上海"></el-option>
<el-option label="区域二" value="北京"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button type="primary" @click="addRule">添加校验规则</el-button>
<el-button type="primary" @click="showError">校验错误</el-button>
<el-button type="primary" @click="showSuccess">校验成功</el-button>
<el-button type="primary" @click="showValidating">检验中</el-button>
</el-form-item>
</el-form>
</div>
</template>

<script>

export default {
name: 'app',
components: {},
data() {
return {
error: '',
status: '',
data: {
user: '',
region: '',
},
rules: {
user: [
{required: true, trigger: 'change', message: '用户名必须录入'},

]
}
}
},
methods: {
onSubmit() {
console.log(this.data);
//点击时主动给校验,此处调用会对所有校验规则进行统一处理
this.$refs.form.validate((isValid, errors) => {
console.log(isValid);
console.log(errors);
})
},
addRule() {
const userValidator = (rule, value, callback) => {
if (value.length > 3) {
callback()
} else {
callback(new Error('用户名长度必须大于3'))
}
}
const newRule = [
...this.rules.user, //解构将数组中的所有属性依次遍历出来
{validator: userValidator, trigger: 'change'}
]
//合并之前的所有规则并生成一个新的规则赋值给this.rules
this.rules = Object.assign({}, this.rules, {user: newRule})
},
showError() {
this.status = 'error',
this.error = '用户名输入有误'
},
showSuccess() {
this.status = 'success',
this.error = '用户名输入有误'
},
showValidating() {
this.status = 'validating',
this.error = ''
}
}
}
</script>

<style>
</style>

效果:

自定义校验状态

七、表单属性解析

  • lable-position:标签位置,枚举值,left和top
  • lable-width:标签宽度
  • label-suffix:标签后缀
  • inline:行内表单
  • disabled:设置整个form中的表单组件全部disabled,优先级低于表单自身的disabled
1
2
3
4
input.vue源码
inputDisabled() { //当elform存在时input就会绑定到form表单中disabled
return this.disabled || (this.elForm || {}).disabled;
},
  • size:设置表单组件尺寸
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
input.vue源码
inputSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},

form-item源码
_formSize() {
return this.elForm.size;
},
elFormItemSize() {
return this.size || this._formSize;
},

案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
<el-form
style="width: 500px"
:inline="false"
:model="data"
class="demo-form-inline"
:rules="rules" ref="form"
validate-on-rule-change
label-width="100px"
label-position="left"
label-suffix=":"
status-icon
size="small"
>

provide(提供)inject(注入)常被用在高阶插件/组件库中使用,element的源码里大量使用到这两个函数组件与后代组件之间的通讯

普通的应用程序开发当中不推荐使用

谢谢老板