安徽网站开发与维护专业,个人网站备案取消,理财产品网站开发文档,宿迁东岸网络技术有限公司element ui官网
前言#xff1a; 在当今时代#xff0c;我们在编写计算机程序时#xff0c;不仅仅是写几个增删改查的简单功能#xff0c;为了满足广大用户对页面美观的需求#xff0c;为了让程序员们写一些功能更简便#xff0c;提高团队协作效率#xff0c;所以eleme…element ui官网
前言 在当今时代我们在编写计算机程序时不仅仅是写几个增删改查的简单功能为了满足广大用户对页面美观的需求为了让程序员们写一些功能更简便提高团队协作效率所以element ui孕育而生。Element UI是一个能够显著提升开发效率、保障界面质量及促进团队协作的前端UI框架特别适合构建现代Web应用程序。 element ui 的作用与意义主要体现在以下几点 加速开发进程Element UI 提供了一整套预设的、可复用的 UI 组件如按钮、表单、导航、布局等这些组件都经过精心设计和测试可以直接在项目中使用极大地减少了前端开发者从零开始编写和设计界面元素的时间从而加快了 Web 应用程序的开发速度。 保证界面一致性与美观性Element UI 遵循统一的设计规范其组件拥有高质量的设计和一致的视觉风格有助于构建出既美观又具有一致用户体验的用户界面这对于提升品牌形象和用户满意度至关重要。 提升响应式设计能力由于 Element UI 支持响应式布局开发人员可以轻松创建适应多种屏幕尺寸和设备类型的应用无论是桌面还是移动设备都能确保用户界面的良好展示效果增强了应用的普适性和可用性。 简化维护工作使用统一的组件库当需要更新或修改界面时只需调整相应的组件设置即可全局生效大大降低了后期维护的工作量和复杂度。 提高团队协作效率Element UI 的标准化和模块化特性使得团队成员之间可以共享和复用代码新成员也能更快融入团队开发流程提高了团队的整体协作效率。 增强可定制性和扩展性Element UI 提供了丰富的插件扩展机制和主题定制功能允许开发者根据项目需求进行灵活定制从而满足不同场景和品牌风格的要求。
使用npm方式安装
推荐用npm的方式安装因为他可以更好地和webpack打包工具配合使用
安装命令npm i element-ui -S
引入element ui
在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.Container 布局容器
一般采用三块headerasidemain代码如下
el-containerel-aside width200pxAside/el-asideel-containerel-headerHeader/el-headerel-mainMain/el-main/el-container
/el-container el-container外层容器。当子元素中包含 el-header 或 el-footer 时全部子元素会垂直上下排列否则会水平左右排列。 el-header顶栏容器。 el-aside侧边栏容器。 el-main主要区域容器。 2.Icon 图标
为了美观我们引入element ui 中的图标加以修饰最基础的就是修改图标分享图标删除图标和搜索图标 直接通过设置类名为 el-icon-iconName 来使用即可。
i classel-icon-edit/i
i classel-icon-share/i
i classel-icon-delete/i
el-button typeprimary iconel-icon-search搜索/el-button
3.Button 按钮
有时操作需要用按钮控制下面是一些常用按钮
使用type、plain、round和circle属性来定义 Button 的样式。
type就是默认按钮
plain就是朴素按钮
round就是圆角按钮
circle就是原型按钮
el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button
/el-row
如图所示 4. Radio 单选框
radio单选框一般用于添加功能时的性别选择或者某一选项有且只能有一项
templateel-radio v-modelradio label1备选项/el-radioel-radio v-modelradio label2备选项/el-radio
/template v-model绑定我们要传递的变量而label是显示在页面上的内容来供客户选择 label可以是String、Number或Boolean。
5.Checkbox 多选框
一般用于多项选择例如添加一个用户用户的爱好肯定不止一个此时会用到多选框我们可以给多选框加上一个value进行传递。多选框出现v-model默认绑定布尔值false就是默认不选中代码如下
template!-- checked 为 true 或 false --el-checkbox v-modelchecked备选项/el-checkbox
/template
scriptexport default {data() {return {checked: false};}};
/script
6.Input 输入框
一般用于添加修改搜索功能v-model双向数据绑定用户输入的内容
在定义密码输入框时有一个属性可以控制密码是否显示show-password Input 为受控组件它总会显示 Vue 绑定值。
通常情况下应当处理 input 事件并更新组件的绑定值或使用v-model。否则输入框内显示的值将不会改变。
不支持 v-model 修饰符。
7.Select 选择器
也就是下拉菜单一般用于类型选择当选项过多时使用下拉菜单展示并选择内容。 v-model的值为当前被选中的el-option的 value 属性值
options为我们从后端获取的数组通过v-for循环遍历
key是唯一标识符必须要有否则报错无法渲染
label就是渲染在页面上的内容用户可以选择
value就是代码间传递的内容用户看不到
templateel-select v-modelvalue placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescriptexport default {data() {return {options: [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value: }}}
/script
8.Form 表单
由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据
我在此只解释表单验证
首先需要绑定表单验证规则:rulesrules其次需要用到prop属性表单验证才能起作用
required是此栏不能为空否则会提示信息messagetrigger是点击提交时input框中检测到为空或者失去焦点就会阻止提交功能的触发
9.Table 表格
在此我为大家提供一个带有全选框有操作栏有排序的表格
ref是标识data是要展示的数据
selection-changehandleSelectionChange这个方法有一个参数参数就是被选中的当条数据
:default-sort {prop: date, order: descending}是通过prop绑定date时间这一项descending是倒序的意思默认倒序排序
sortable是排序按钮
通过 Scoped slot 可以获取到 row, column, $index 和 storetable 内部的状态管理的数据
代码如下
templateel-table:default-sort {prop: date, order: descending}refmultipleTable:datatableDatatooltip-effectdarkstylewidth: 100%selection-changehandleSelectionChangeel-table-columntypeselectionwidth55/el-table-columnel-table-columnlabel日期sortablewidth120template slot-scopescope{{ scope.row.date }}/template/el-table-columnel-table-columnpropnamelabel姓名width120/el-table-columnel-table-columnpropaddresslabel地址show-overflow-tooltip/el-table-columnel-table-column label操作template slot-scopescopeel-buttonsizeminiclickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-buttonsizeminitypedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column/el-table
/templatescriptexport default {data() {return {tableData: [],multipleSelection: []}},methods: {handleSelectionChange(val) {this.multipleSelection val;}}}
/script
10.Dialog 对话框
Dialog 组件的内容可以是任意的甚至可以是表格或表单下面是应用了 Form 组件的样例。
如图所示 代码如下 el-button typetext clickdialogFormVisible true打开嵌套表单的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogFormVisibleel-form :modelformel-form-item label活动名称 :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label活动区域 :label-widthformLabelWidthel-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdialogFormVisible false确 定/el-button/div
/el-dialog
当dialogFormVisible设定为布尔值true时才会打开这个对话框相反为false时就会关闭对话框
11.Pagination 分页
对于分页我在此介绍一个完整功能的分页如图所示 代码如下所示
el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[100, 200, 300, 400]:page-size100layouttotal, sizes, prev, pager, next, jumper:total400/el-pagination
scriptexport default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},data() {return {};}}
/script
它里面有两个方法size-changehandleSizeChange控制每页几条数据 current-changehandleCurrentChange控制当前所在的页码
:current-page.sync绑定当前页码
:page-sizes[100, 200, 300, 400]下拉框的选项
:page-size100当前默认显示每页条数
:total1000总数据条数
总结
通过以上几个简单组件我们可以总结出element ui为什么在当今互联网时代如此火爆下面是我总结的一些使用element ui的好处
高效开发提供一系列现成的、高质量的Vue组件加速Web应用程序的开发过程。设计一致性确保应用程序界面元素间的一致性与美观性提升用户体验。易用性组件简单易用文档齐全降低了学习成本便于开发者快速上手。响应式布局支持响应式设计适应不同设备和屏幕尺寸实现多平台兼容。节省维护成本通过统一的组件和样式简化后期的维护和迭代工作。团队协作优化标准化的组件库促进团队成员之间的高效协作和代码复用。高度可定制支持主题定制和插件扩展满足项目的个性化需求。体积优化考量虽然整体引入可能增加项目体积但针对大量使用Element UI的项目其带来的开发效率提升远超体积增加的劣势。成熟生态作为Vue生态系统中的成熟框架Element UI拥有活跃的社区支持和丰富的第三方资源。
