🍂引言

Element UI是一个基于Vue.js的组件库，提供了一系列的可复用的UI组件，帮助开发者快速构建漂亮的用户界面。在本篇博客中，我们将逐步介绍如何开始使用Element UI，并展示一些常用的组件和功能。

🍂安装并引入Element UI

首先，我们需要安装Element UI库。可以通过npm或yarn来进行安装：

npm install element-ui

安装完成后，我们需要在Vue应用中引入Element UI库。在项目的入口文件（通常是 main.js 或类似的文件）中添加以下代码：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
这段代码会将Element UI注册为Vue的插件，使其成为全局可用的组件。

🍂使用Element UI组件

现在我们已经成功引入了Element UI，我们可以开始使用其中的组件了。以下是一个示例，展示如何使用Element UI中的 el-button 组件：

<template><div><el-button type="primary">点击我</el-button></div>
</template><script>
export default {// 组件的其他选项
}
</script>

在这个示例中，我们在Vue组件中使用了 el-button 组件，指定了按钮的类型，并在按钮内部添加了文本。

🍂更多常用组件

Element UI提供了众多常用的UI组件，例如表单、表格、对话框、菜单等。下面是一些常用组件的示例：

🍁Button 按钮

<template><div><el-button type="primary">Primary Button</el-button><el-button type="success">Success Button</el-button><el-button type="warning">Warning Button</el-button><el-button type="danger">Danger Button</el-button></div>
</template><script>
import { ElButton } from 'element-ui';export default {components: {ElButton}
}
</script>

🍁Input 输入框

<el-input v-model="inputValue" placeholder="请输入内容"></el-input>

🍁Radio 单选框

<template><div><el-radio-group v-model="selected"><el-radio :label="1">选项1</el-radio><el-radio :label="2">选项2</el-radio><el-radio :label="3">选项3</el-radio></el-radio-group></div>
</template><script>
import { ElRadio, ElRadioGroup } from 'element-ui';export default {data() {return {selected: 1};},components: {ElRadio,ElRadioGroup}
}
</script>

🍁Checkbox 多选框

<template><div><el-checkbox-group v-model="checked"><el-checkbox label="选项1">选项1</el-checkbox><el-checkbox label="选项2">选项2</el-checkbox><el-checkbox label="选项3">选项3</el-checkbox></el-checkbox-group></div>
</template><script>
import { ElCheckbox, ElCheckboxGroup } from 'element-ui';export default {data() {return {checked: ['选项1']};},components: {ElCheckbox,ElCheckboxGroup}
}
</script>

🍁Select 选择器

<template><div><el-select v-model="selected" placeholder="请选择"><el-optionv-for="option in options":key="option.value":label="option.label":value="option.value"></el-option></el-select></div>
</template><script>
import { ElSelect, ElOption } from 'element-ui';export default {data() {return {selected: '',options: [{ label: '选项1', value: 'option1' },{ label: '选项2', value: 'option2' },{ label: '选项3', value: 'option3' },]};},components: {ElSelect,ElOption}
}
</script>

🍁Switch 开关

<template><div><el-switch v-model="switchValue" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch></div>
</template><script>
import { ElSwitch } from 'element-ui';export default {data() {return {switchValue: 1};},components: {ElSwitch}
}
</script>

🍁Slider 滑块

<template><div><el-slider v-model="sliderValue" :min="0" :max="100" show-input></el-slider><span>{{sliderValue}}</span></div>
</template><script>
import { ElSlider } from 'element-ui';export default {data() {return {sliderValue: 50};},components: {ElSlider}
}
</script>

这个示例中使用了 组件来创建一个滑动条。通过 v-model 指令和 sliderValue 数据属性进行双向绑定，以便获取用户的选择值。此处的 sliderValue 属性的初始值为 50。我们使用 :min 和 :max 属性分别设置滑块的最小值和最大值为 0 和 100。同时，我们将 show-input 属性设置为 true，以显示一个数值输入框，允许用户手动输入数值。

在模板中我们将 sliderValue 属性绑定到 组件上，同时使用 v-model 指令使其支持双向数据绑定。我们还在组件外使用了一个 标签来显示用户当前选择的值。

🍁DatePicker 日期选择器

<template><div><el-date-picker v-model="dateValue" type="date" placeholder="选择日期"></el-date-picker></div>
</template><script>
import { ElDatePicker } from 'element-ui';export default {data() {return {dateValue: ''};},components: {ElDatePicker}
}
</script>

这个示例中使用了 组件来创建一个日期选择器。我们将 v-model 指令和 dateValue 数据属性进行双向绑定，以便获取用户选择的日期。

在 组件中，我们使用 type 属性来指定选择器的类型为日期选择器。我们还设置了 placeholder 属性来显示一个占位符文本，以提示用户选择日期。

🍁Table 表格

<template><div><el-table :data="tableData" style="width: 100%"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-column prop="gender" label="性别"></el-table-column></el-table></div>
</template><script>
import { ElTable, ElTableColumn } from 'element-ui';export default {data() {return {tableData: [{ name: '张三', age: 20, gender: '男' },{ name: '李四', age: 25, gender: '女' },{ name: '王五', age: 30, gender: '男' },]};},components: {ElTable,ElTableColumn}
}
</script>

这个示例中使用了 组件来创建一个数据表格。我们使用 :data 属性来将数据绑定到表格中。这里的 tableData 数据数组包含了三个对象，每个对象表示表格中的一行数据。

在 组件中，我们使用 组件来创建列头。我们在每个 组件中使用 prop 属性来指定要显示的数据对象中的属性，使用 label 属性来指定表头的标题。例如，在第一个 组件中，我们指定要显示 name 属性的值，同时将列头标题设置为“姓名”。

🍁Pagination 分页

<template><div><el-pagination:total="total":current-page="currentPage":page-size="pageSize"@current-change="handleCurrentChange"layout="prev, pager, next"></el-pagination></div>
</template><script>
import { ElPagination } from 'element-ui';export default {data() {return {total: 100, // 总记录数currentPage: 1, // 当前页码pageSize: 10 // 每页显示的记录数};},components: {ElPagination},methods: {handleCurrentChange(newPage) {// 处理页码改变的逻辑this.currentPage = newPage;// 从后端加载对应页码的数据this.loadData();},loadData() {// 请求后端接口加载数据// 根据 this.currentPage 和 this.pageSize 来获取相应页码的数据}}
};
</script>

这个示例中使用了 组件来创建一个分页器。我们使用 :total 属性指定总记录数，使用 :current-page 属性指定当前页码，使用 :page-size 属性指定每页显示的记录数。

在 组件中，我们使用 @current-change 事件监听页码改变的事件，并根据新的页码执行相应的逻辑。其中，我们在 handleCurrentChange 方法中更新 currentPage 的值，并调用 loadData 方法来加载对应页码的数据。

🍁Dialog 对话框

<template><div><el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button><el-dialogtitle="提示":visible="dialogVisible":before-close="handleClose"width="30%"><span>确定要进行此操作吗？</span><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="handleSubmit">确定</el-button></div></el-dialog></div>
</template><script>
import { ElButton, ElDialog } from 'element-ui';export default {data() {return {dialogVisible: false // 控制弹窗的显示隐藏};},components: {ElButton,ElDialog},methods: {handleClose(done) {// 在关闭弹窗前执行一些逻辑if(confirm('确定要关闭弹窗吗？')) {done();}},handleSubmit() {// 执行操作的逻辑// 关闭弹窗this.dialogVisible = false;}}
};
</script>

🍁Form 表单

<template><el-form :model="formData" :rules="formRules" ref="form" label-width="100px" class="demo-form"><el-form-item label="用户名" prop="username"><el-input v-model="formData.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="formData.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form>
</template><script>
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-ui';export default {data() {return {formData: {username: '',password: ''},formRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 20, message: '密码长度为6至20个字符', trigger: 'blur' }]}};},components: {ElForm,ElFormItem,ElInput,ElButton},methods: {submitForm() {this.$refs.form.validate(valid => {if (valid) {// 表单验证通过，执行提交逻辑console.log('表单提交成功');} else {// 表单验证不通过，做出相应处理console.log('表单提交失败');return false;}});},resetForm() {this.$refs.form.resetFields();}}
};
</script>

在这个示例中，我们使用 组件来创建一个表单，并使用 :model 属性将表单数据绑定到 formData 对象上。使用 :rules 属性来设置表单验证规则，label-width 属性来设置标签的宽度。

在 组件中，我们使用 组件来创建表单项。每个表单项包含一个标签和相应的控件，我们使用 label 属性来设置标签的文本，prop 属性来指定对应的数据字段。在本例中，分别创建了一个用户名（username）和密码（password）的表单项，我们使用 组件作为输入控件，并使用 v-model 来与 formData 对象中的相应字段进行双向绑定。

🍁Menu 菜单

<template><el-menu :default-active="$route.path" class="demo-menu" router><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item index="/home">首页</el-menu-item><el-menu-item index="/about">关于我们</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span>导航二</span></template><el-menu-item index="/products">产品</el-menu-item><el-menu-item index="/services">服务</el-menu-item></el-submenu><el-menu-item index="/contact"><i class="el-icon-phone"></i><span>联系我们</span></el-menu-item></el-menu>
</template><script>
import { ElMenu, ElSubmenu, ElMenuItem } from 'element-ui';export default {components: {ElMenu,ElSubmenu,ElMenuItem}
};
</script><style scoped>
.demo-menu {height: 100%;
}
</style>

🍁Tabs 标签页

<template><el-tabs v-model="activeTab" @tab-click="handleTabClick"><el-tab-pane label="标签一" name="tab1"><p>标签一的内容...</p></el-tab-pane><el-tab-pane label="标签二" name="tab2"><p>标签二的内容...</p></el-tab-pane><el-tab-pane label="标签三" name="tab3"><p>标签三的内容...</p></el-tab-pane></el-tabs>
</template><script>
import { ElTabs, ElTabPane } from 'element-ui';export default {components: {ElTabs,ElTabPane},data() {return {activeTab: 'tab1'};},methods: {handleTabClick(tab) {console.log('点击了标签', tab.name);}}
};
</script>

🍁Tooltip 提示

<template><div class="container"><el-tooltip content="这是一个提示信息" placement="top-start"><span>悬停在我上面显示提示</span></el-tooltip></div>
</template><script>
import { ElTooltip } from 'element-ui';export default {components: {ElTooltip}
};
</script><style scoped>
.container {width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;
}
</style>

🍁Popover 弹出框

<template><div class="container"><el-popovertrigger="hover"placement="top"title="提示标题"content="这是一个弹出框内容"><button>悬停在我上面显示弹出框</button></el-popover></div>
</template><script>
import { ElPopover } from 'element-ui';export default {components: {ElPopover}
};
</script><style scoped>
.container {width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;
}
</style>

🍁Message 消息提示

// 在 Vue 组件中的某个方法中使用 $message 方法
methods: {showMessage() {this.$message({message: '这是一条消息提示',type: 'success'});}
}

🍁Notification 通知

// 在 Vue 组件中的某个方法中使用 $notify 方法
methods: {showNotification() {this.$notify({title: '重要通知',message: '您的账户余额已不足，请尽快充值！',type: 'warning',duration: 6000});}
}

🍁Loading 加载

// 在 Vue 组件中的某个方法中使用 $loading 方法
methods: {startLoading() {this.$loading({text: '加载中...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});},endLoading() {this.$loading().close();}
}

🍁Carousel 走马灯

<template><el-carousel :interval="3000"><el-carousel-item v-for="item in carouselItems" :key="item.id"><img :src="item.imageUrl" alt="carousel-item"></el-carousel-item></el-carousel>
</template><script>
export default {data() {return {carouselItems: [{ id: 1, imageUrl: 'path-to-image-1' },{ id: 2, imageUrl: 'path-to-image-2' },{ id: 3, imageUrl: 'path-to-image-3' }]};}
};
</script>

这只是Element UI提供的一小部分组件，更多组件请参考Element UI官方文档。

🍂结语

在本篇博客中，我们简要了解了如何开始使用Element UI，并展示了其中一些常用的组件和功能。Element UI不仅提供了现成的UI组件，还支持可自定义主题和扩展，为开发者提供了更灵活的选择。

---

🏫博客主页：魔王-T

🥝大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️

---