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

JVM调优资料

关注

发布于: 1 小时前

大部分用法是设置 button 的样式，注意 按钮组 的用法；

Link 文字链接

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

Layout 布局

官方文档索引：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 指定分栏偏移的栏数；

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-model 和 label 两个属性；
注意 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 组件

发布于: 1 小时前阅读数: 5

JVM调优资料

关注

VX：Lzzzzzz63 领取资料 2021.07.07 加入

还未添加个人简介

发布

暂无评论

创作场景

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

JVM调优资料

评论