热门标签
热门文章
- 1Ubuntu20.04配置Intel SGX_ubuntu20.04 intel-sgx环境配置
- 2python threading和multiprocessing模块基本用法实例分析_python signal multiprocessing
- 3vue2、vue3实现暗黑模式_vue2 element 暗黑主题
- 4整理发布！IDC、Gartner、德勤等7大权威机构2024AI趋势预测合集_全球科技创新空前密集活跃,据 gartner预测,到 2026 年超过 80%的企业将使用人工智
- 5Mysql group_concat的反向应用实现（Mysql列转行）_mysql group_concat相反
- 6【RT-thread】如何将RT-thread系统移植到stm32_rt-thread stdio stm32l151标准库
- 7基于Diffusion Model相关的异常检测文章_time series anomaly detection using diffusion-base
- 8python数据分析之利用多种机器学习方法实现文本分类、情感预测_python进行文本情感分析
- 9linux显示当前进程cpu,Linux上提供top、ps命令查看当前cpu、mem使用情况
- 10Linux 定时关机 crontab 定时执行任务_crontab shutdown
当前位置: article > 正文
Element UI组件的安装及使用
作者：2023面试高手 | 2024-02-17 00:49:15
赞
踩
element ui
一．ElementUI是什么？
简述：
是由国内的饿了么团队开发并且开源的一套基于 Vue 2.0 的桌面端组件库。简单的说ElementUi是一个基于Vue的Ui框架，适用于PC端，与前端著名的Bootstrap框架很相似。
优点：组件丰富，文档齐全，兼容性也很高，支持主流的浏览器和移动端
官网地址：http://element.eleme.io/#/zh-CN
二．安装ElementUI及使用
1. 安装
在终端使用命令进行安装，推荐使用npm安装： npm i element-ui -S
- 1
成功效果： 例如下图，已经成功安装会出现added xx packages，黄色警告可以忽略。
2. 使用
2.1 普通html使用
目前可以通过 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>
- 1
- 2
- 3
- 4
组件示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--1. 引入 element-ui 的样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <!--4. 可以正常使用组件 --> <el-button type="primary" @click="clickBtn(0)">增加</el-button> <el-button type="success" @click="clickBtn(1)">减少</el-button> <el-input-number v-model="num" :min="1" :max="10" /> </div> </body> <!--2. 必须先引入vue，然后才可以使用element-ui--> <script src="https://unpkg.com/vue@2/dist/vue.js"></script> <!-- 3. 引入element-ui的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return {num:1} }, methods:{ clickBtn(res){res?this.num--:this.num++ } } }) </script> </html>
- 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
2.2 vue项目使用
2.2.1 完整引入
-
安装依赖
npm install element-ui -S -
main.js引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
2.2.2 按需引入
按需引入不同于全部引入，不会一上来引入全局的组件和样式，而是看使用了哪些组件，根据使用的组件进行注册，并且只引入这些组件相关的样式
-
安装
借助插件，可以只引入需要的组件，以达到减小项目体积的目的
安装命令： npm install babel-plugin-component -D -
修改babel.config.js文件
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 在main.js中引入需要组件
import Vue from 'vue';
// 按需引入（注意单独引入Select的时候，要同时引入Option,否则会报错）
import { Button } from 'element-ui';
import App from './App.vue';
Vue.use(Button) // 全局使用该组件
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
组件示例：
// 引入后在任意一个vue文件皆可直接使用组件 <template> <div> <el-button type="primary" @click="clickBtn(0)">增加</el-button> <el-button type="success" @click="clickBtn(1)">减少</el-button> <el-input-number v-model="num" :min="1" :max="10" /> </div> </template> <script> export default { data() { return { num:1 } }, methods:{ clickBtn(res){ res?this.num--:this.num++ } } } </script> <style lang="less" scoped> </style>
- 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
三．组件说明
组件库中UI组件丰富，将60多个组件划分了基础类、form类、data类及提示和导航类等，文档描述齐全，使用方便。
1. Input 输入框
说明：
通过鼠标或键盘输入字符
基础用法
<el-input placeholder="请输入内容" v-model="input" clearable/>
- 1
常用属性：
| 参数 | 说明 | 备注 |
|---|---|---|
| type | 类型 | 常用text、textarea类型 |
| maxlength | 最大输入长度 | 文本域常用 |
| show-word-limit | 是否显示输入字数统计 | 只有text、textarea生效 |
| placeholder | 输入框占位文本 | |
| clearable | 是否可清空 | :clearable=‘true’ 等同clearable |
| disabled | 是否禁用 | |
| rows | 输入框行数 | 只对 textarea类型有效 |
| readonly | 是否只读 | 查看详情常用 |
项目常用
// 输入框文本内容颜色修改
.el-input__inner {
color: #000 !important;
}
// 输入框placeholder字体颜色修改
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: red !important;
}
// 回车键触发事件
<el-input v-model="NAME" placeholder="请输入名称" @keyup.enter.native="selectName"/>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
注意点：
- 上方回车事件中.native修饰符是为了触发原生事件，这个自定义事件内部没有该事件事件，需用$emit提供。加.native变为普通HTML对象，触发原生H5的事件。
- 当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 从而刷新页面．可以添加阻止事件修饰符.prevent处理该问题 (@submit.native.prevent)
拓展
- v-model的修饰符（针对input标签）
| 修饰符 | 说明 | 备注 |
|---|---|---|
| lazy | 当光标离开标签时，才会将值赋值给value | |
| trim | 过滤掉两边的空格 | |
| number | 自动输入值转为数值类型 | 无法被parseFloat解析则返回原值 |
- 事件修饰符
| 修饰符 | 说明 | 备注 |
|---|---|---|
| stop | 阻止事件的冒泡 | 相当于调用了event.preventPropagation |
| prevent | 阻止了事件的默认行为 | 相当于调用了event.preventDefault |
| self | 只当在 event.target 是当前元素自身时触发处理函数 | 注意使用的先后顺序，@click.prevent.self 会阻止所有点击事件的默认行为，而 @click.self.prevent 则只会阻止本身的点击事件 |
| once | 只能触发一次 | |
| capture | 事件捕获，从顶层往下触发 | |
| native | 添加原生事件 | |
| passive | 告诉浏览器你要运行事件的默认行为 | 提高性能 |
2．Select 选择器
说明：
当选项过多时，使用下拉菜单展示并选择内容。
基础用法：
<el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> options: [{ value: '选项1',label: '黄金糕', },{ value: '选项2',label: '双皮奶', },{ value: '选项3',label: '蚵仔煎', }]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
常用属性：
| 参数 | 说明 | 备注 |
|---|---|---|
| multiple | 是否多选 | 绑定的value为选中项的数组 |
| clearable | 是否可以清空 | |
| filterable | 是否可搜索 | 只用filterable是在绑定的数据中搜索 |
注意点：
- 我们取值传值的是value,展示的是label.若不设置 label则显示value值
- 如果有特殊需求传值要将label一起传过去的时候，可以使用ref或value值解决
// 通过value值解决 <el-select v-model="value" multiple placeholder="请选择" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="{ label: `${item.label}`, value: `${item.value}` }" /> </el-select> this.value // [{label:'黄金糕'，value:'选项1'}] ------------ // 通过ref解决 <el-select ref="mySelect" v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> this.$refs.mySelect.selected.label // 获取当前选中的label this.$refs.mySelect.selected.value // 获取当前选中的value //注意上面是单选情况，如果是多选情况那this.$refs.mySelect.selected则是个数组。
- 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
3．Form 表单
说明：
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
基础用法：
// 核心元素 // :model用于保存表单的数据对象 // :rules用于对表单数据对象的校验 // prop指定:rules中的属性 <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name" /> </el-form-item> <el-form-item label="活动性质" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="美食/餐厅线上活动" name="type" /> <el-checkbox label="单纯品牌曝光" name="type" /> </el-checkbox-group> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc" /> </el-form-item> <el-form-item> <el-button type="primary" @click="formSubmit">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> <script> export default { data() { return { ruleForm: {name: '',type: [],desc: ''}, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },], type: [ {type: 'array', required: true, message: '请至少选择一个',trigger: 'change',} ], desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }], } } }, methods:{ formSubmit(){ // validate对整个表单进行校验 this.$refs['ruleForm'].validate((isOk) => { if (isOk) {} // 校验成功 else {} // 校验失败 }) }, resetForm() { // resetFields对整个表单重置，将所有字段值重置为初始值并移除校验结果 this.$refs.ruleForm.resetFields()} } } </script>
- 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
常用属性：
| 参数 | 说明 | |
|---|---|---|
| inline | 行内表单模式 |  |
| label-position | 对齐方式，表单域标签的位置.注意如果值为 left 或者 right 时，要设置 label-width！ |  |
| status-icon | 是否在输入框中显示校验结果反馈图标 |  |
| inline-message | 是否以行内形式展示校验信息 | 不加该属性表单会提前预留校验信息的高度，如果添加了则是根据校验结果动态伸缩表单高度 |
项目常用：
活动名称是基础校验内容必填
选择输入是根据单选框结果来校验输入内容必须是数字还是中文
遍历输入根据数组遍历生成输入框，根据对应数据生成不同的校验
<el-form ref="formRef" :rules="rules" :model="form"> <el-form-item label="活动名称" prop="name"> <el-input v-model="form.name"/> </el-form-item> <!-- // 根据选择结果来添加不同的校验规则 --> <el-form-item label="选择输入" prop="num" :rules="!form.radioNum ? [{required: true,type: 'number',message: '请填写数字',trigger: 'blur'}] : [{ required: true, pattern: /^[\u0391-\uFFE5A-Za-z]+$/,message: '请填写中文',trigger: 'blur'}]" > <el-radio-group v-model="form.radioNum"@change="radioChange"> <el-radio :label="0">第一种</el-radio> <!--// 数字类型的验证需要在 v-model 处加上 .number 的修饰符 --> <el-input v-if="form.radioNum == 0" v-model.number="form.num" style="width: 100px" placeholder="数字" /> <el-radio :label="1">第二种</el-radio> <el-input v-if="form.radioNum == 1" v-model="form.num" style="width: 100px" placeholder="中文" /> </el-radio-group> </el-form-item> <!--// 遍历生成input，同时绑定对应的prop --> <div v-for="(item, ind) in form.arr" :key="ind"> <el-form-item :prop="`arr.${ind}.res`" label="遍历输入" > <el-input placeholder="请输入" v-model="item.res" /> </el-form-item> </div> </el-form> <script> import {isExist} from '@/api/activity' export default { data () { return { form: { name: '', resource: '', radioNum:'', num:'', arr: [{ name: '第一个', res: '', num: 7 }, { name: '第二个', res: '', num: 9 } ], }, rules: { name: [{ required: true, message: '请填写活动名称', trigger: 'blur' }, { validator: (rule, value, callback) => { // 传入输入值进行接口传参自定义校验 isExist({name: value }).then(res => { if (res.bean) return callback(new Error('该名称已存在，请重新输入')) callback() }) }, trigger: 'blur' }] }, }; }, created() { // 这里一般是调用接口获取数据，然后进行遍历添加校验规则 this.form.arr.forEach((item, ind) => { this.rules[`arr.${ind}.res`] = [ { required: true, message: '请填写', trigger: 'blur' }, { validator: this.numVali, ind, trigger: 'blur' } ] }) } methods: { // 通过传参来定位数据（rule是存放接收参数的对象） numVali(rule, value, callback) { if (value > this.form.arr[rule.ind].num) return callback(new Error('填写数值大于限制值，请重新输入')) callback() }, radioChange() { // 修改输入类型要清除原有校验 this.$refs.formRef.clearValidate(['num']) } } } </script>
- 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
rules校验多种用法：
- Form-Item里可以使用动态的rules参数来决定使用哪个校验，同样可以使用三目运算符进行判断
- 遍历生成Form-Item时，生成的可以使用prop进行动态绑定
- 自定义校验的时候可以进行传参，参数存放在回调函数rule
4．Progress 进度条
说明：
用于展示操作进度，告知用户当前状态和预期。
基础用法：
<el-progress :percentage="50"></el-progress>
- 1
项目常用：
<el-progress :stroke-width="16" :percentage="percentage" :key="proKey" /> <el-button type="primary" size="mini" @click="proStart">开始</el-button> <script> export default { data() { return { percentage: 0, proKey: new Date().getTime(), } }, methods: { // await 后面必须是一个Promise对象，否则无法阻塞后面的执行 async proStart() { for (let i = 0; i < 4; i++) { // 给每一个进度条添加唯一的key值，否则进度条会产生倒退的效果 this.proKey = new Date().getTime() this.percentage = 0 for (let i = 0; i < 100; i++) { this.percentage++ // 强制等待该进度条每隔80ms增长1 await new Promise((resolve) => setTimeout(resolve, 80)) } // 每一条增长完等待1000ms再进行下一条 await new Promise((resolve) => setTimeout(resolve, 1000)) } }} } </script>
- 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
注意点：
- 进度条值在变小的时候，进度条是倒退的效果
- 遍历生成的时候要注意需求，异步效果是否要改成同步
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/98405
推荐阅读
相关标签
