Element-UI 要怎么学?官方文档,阿里架构师深入讲解 Java 开发
大部分用法是设置 button 的样式,注意 按钮组 的用法;
官方文档索引:https://element.eleme.cn/#/zh-CN/component/link
官方文档索引:https://element.eleme.cn/#/zh-CN/component/layout
Element UI 中是 24 分栏,迅速简便地创建布局。
一个布局组件由
el-row
和el-col
组合构成,使用属性时要区分 行属性 与 列属性;<el-row :gutter="20">
指定每一栏之间的间隔,默认间隔为 0;<el-col :span="24">
用来组合一栏的布局,一栏是分为 24 部分;<el-col :span="6" :offset="6">
中利用offset
指定分栏偏移的栏数;
官方文档索引:https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi
Container 是用于布局的容器组件,方便快速搭建页面的基本结构;
容器包含
<el-container>
、<el-header>
、<el-aside>
、<el-main>
、<el-footer>
;
==========================================================================
官方文档索引:https://element.eleme.cn/#/zh-CN/component/radio
在使用 Radio 时至少加入
v-model
和label
两个属性;注意 Radio 按钮组;
官方文档索引:https://element.eleme.cn/#/zh-CN/component/checkbox
官方文档索引:https://element.eleme.cn/#/zh-CN/component/input
Input 为受控组件,它总会显示 Vue 绑定值。
autocomplete 是一个带 输入建议 的输入框组件,也可以自定义输入建议显示模板;
事件的使用:
方法的使用:
官方文档索引:https://element.eleme.cn/#/zh-CN/component/select
事件的使用:
方法的使用:
官方文档索引:https://element.eleme.cn/#/zh-CN/component/switch
事件的使用:
方法的使用:
官方文档索引:https://element.eleme.cn/#/zh-CN/component/date-picker
Picker Options:用来对日期控件做自定义配置;
Shortcuts:用来增加日期组件的快捷面板;
Picker Options 用来对日期的选择进行控制;
官方文档索引:https://element.eleme.cn/#/zh-CN/component/upload
使用 Upload 组件 必须设置
action
属性,action
属性为必要参数不能省略;Upload 组件 没有 Event 事件,所有事件都是 Attribute 属性;
方法的使用:
官方文档索引:https://element.eleme.cn/#/zh-CN/component/form
Form 组件提供了表单验证的功能,只需要通过
rules
属性传入约定的验证规则,并将 Form-Item 的prop
属性设置为需校验的字段名即可;表单验证 和 自定义表单验证,详情参照官方文档;
评论