写点什么

Element-UI 要怎么学?官方文档,阿里架构师深入讲解 Java 开发

发布于: 1 小时前
  • 大部分用法是设置 button 的样式,注意 按钮组 的用法;


Link 文字链接




官方文档索引:https://element.eleme.cn/#/zh-CN/component/link


Layout 布局




官方文档索引:https://element.eleme.cn/#/zh-CN/component/layout


  • Element UI 中是 24 分栏,迅速简便地创建布局。

  • 一个布局组件由 el-rowel-col 组合构成,使用属性时要区分 行属性列属性

  • <el-row :gutter="20"> 指定每一栏之间的间隔,默认间隔为 0;

  • <el-col :span="24"> 用来组合一栏的布局,一栏是分为 24 部分;

  • <el-col :span="6" :offset="6"> 中利用 offset 指定分栏偏移的栏数;


Container 布局容器




官方文档索引:https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi


  • Container 是用于布局的容器组件,方便快速搭建页面的基本结构;

  • 容器包含 <el-container><el-header><el-aside><el-main><el-footer>


Form 组件


==========================================================================


Radio 单选框




官方文档索引:https://element.eleme.cn/#/zh-CN/component/radio


  • 在使用 Radio 时至少加入 v-modellabel 两个属性;

  • 注意 Radio 按钮组;


Checkbox 多选框




官方文档索引:https://element.eleme.cn/#/zh-CN/component/checkbox


Input 输入框




官方文档索引:https://element.eleme.cn/#/zh-CN/component/input


  • Input 为受控组件,它总会显示 Vue 绑定值。

  • autocomplete 是一个带 输入建议 的输入框组件,也可以自定义输入建议显示模板;

  • 事件的使用:



<el-input v-model="username" @blur="aaa" @focus="bbb"
@clear="clears" clearable @input="ccc">
</el-input>


<script> export default {
name: "Input",
data() {
return {
restaurants: [],
state1: '',
state2: '',
name:'xiaochen',
price:0.0,
username:"",
password:"",
};
},
methods:{
aaa(){
console.log('失去焦点');
;
},
bbb(){
console.log("获取焦点");
},
ccc(value){
console.log("改变:"+value);
},
clears(){
console.log("清楚");
}


}
} </script>
复制代码


  • 方法的使用:



<h1>方法的使用</h1>
<el-input v-model="username" ref="inputs"></el-input>
<el-button @click="focusInputs">focus方法</el-button>
<el-button @click="blurInputs">blur方法</el-button>


<script> export default {
name: "Input",
data() {
return{}
},
methods:{
// 调用focus方法
focusInputs(){
this.$refs.inputs.focus();
},
// 调用失去焦点方法
blurInputs(){
this.$refs.inputs.blur();
}
}
} </script>
复制代码


Select 选择器




官方文档索引:https://element.eleme.cn/#/zh-CN/component/select


  • 事件的使用:



<el-select v-model="cityId" @change="aaa" multiple clearable>
<el-option v-for="option in options" :label="option.name"
:value="option.id" :key="option.id">
</el-option>
</el-select>


<script> export default {
name: "Select",
data(){
return{
options:[
{id:'1',name:"研发部"},
{id:'2',name:"小卖部"},
{id:'3',name:"小米部"},
],
cityId:'',
cityName:''
}
},
methods:{
aaa(value){
console.log(value);
}
}
} </script>
复制代码


  • 方法的使用:



1.给组件通过ref起别名并绑定到vue实例中
<el-select ref="selects" v-model="cityId" @change="aaa" multiple clearable>
....
</el-select>


2.调用方法
this.$refs.selects.focus(); //方法调用
复制代码


Switch 开关




官方文档索引:https://element.eleme.cn/#/zh-CN/component/switch


  • 事件的使用:



<el-switch v-model="value" @change="aaa"></el-switch>


<script> export default {
name: "Switchs",
data(){
return{
value:true
}
},
methods:{
aaa(value){
console.log(value);
}
}
} </script>
复制代码


  • 方法的使用:



<el-switch v-model="value" ref="sw"></el-switch>
<el-button @click="bbb">调用方法</el-button>


<script> export default {
name: "Switchs",
data() {
return {
value: true
}
},
methods: {
bbb() {
alert();
this.$refs.sw.focus(); //方法调用
}
}
} </script>
复制代码


DatePicker 日期选择器




官方文档索引:https://element.eleme.cn/#/zh-CN/component/date-picker


  • Picker Options:用来对日期控件做自定义配置;

  • Shortcuts:用来增加日期组件的快捷面板;

  • Picker Options 用来对日期的选择进行控制;


Upload 上传




官方文档索引:https://element.eleme.cn/#/zh-CN/component/upload


  • 使用 Upload 组件 必须设置 action 属性,action 属性为必要参数不能省略;

  • Upload 组件 没有 Event 事件,所有事件都是 Attribute 属性

  • 方法的使用:



<el-upload ref="uploads" ....>........</el-upload>


// 方法调用:
this.$refs.uploads.clearFiles();
this.$refs.uploads.abort();
this.$refs.uploads.submit();
复制代码


Form 表单




官方文档索引:https://element.eleme.cn/#/zh-CN/component/form


  • Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可;

  • 表单验证自定义表单验证,详情参照官方文档;


Notice 组件

用户头像

VX:Lzzzzzz63 领取资料 2021.07.07 加入

还未添加个人简介

评论

发布
暂无评论
Element-UI 要怎么学?官方文档,阿里架构师深入讲解Java开发