Element UI

Element UI 介绍

官网：https://element.eleme.io/#/zh-CN

官方定义：网站快速成型工具 和 桌面端组件库；

简介：Element UI 是 基于 Vue 的一个 UI框架，该框架基于 Vue 开发了很多相关组件，方便我们快速开发页面。（也就是说你必须先学习 Vue）

由 饿了么前端团队 基于 Vue 进行开发并且进行了开源；Element UI 中提供的全部都是封装好组件。

安装 Element UI

Element UI 的使用一切以官方文档为准，这里简单记录个人笔记。

  • 首先通过 Vue脚手架 创建项目：
vue create hello-element
  • 在 Vue 脚手架项目中安装 Element UI：
npm i element-ui -S
  • 指定项目中使用 Element UI，在 index.js 中添加以下代码：`
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI); // 在vue脚手架中使用elementui

Element UI 组件使用

官方文档 是最好的参考教程！

难得有官方中文的参考文档，上面写的已经很详细了，例子也很多，基本的开发完全没有问题！

每个组件都有 属性、事件、方法。事件和方法的区别在于：事件是去调用自己写的函数，方法相当于它给你写好的函数，你去调用；

掌握 属性、事件、方法 的用法后，所有组件的使用基本都一样。

  • 大部分组件都是以 el-组件名 开头，比如 el-button 是按钮；
<el-button>默认按钮</el-button>
  • Element UI 中所有组件的 属性(Attributes) 全部写在组件标签上；
<el-button type="primary" 属性名=属性值>默认按钮</el-button>
  • 事件(Events) 也是直接写在对应的组件标签上，使用 Vue 中绑定事件方式 @change="aa"；
<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
<el-radio v-model="label" @change="aa" name="sex" border size="small" label="女">女</el-radio>

<script>
    export default {
        name: "Radio",
        data(){
            return{
                label:'男'
            }
        },
        methods:{
            aa(){ //定义的事件处理函数
                console.log(this.label);
            }
        }
    }
</script>
  • 组件的 方法(Methods)：
    在对应的组件中加入 ref="组件别名"；
    通过 this.$refs.组件别名.方法名() 调用方法；
<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>

Basic 组件

Button 按钮

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

  • 大部分用法是设置 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 组件

Alert 警告

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

  • 这个主要就是对描述和样式的控制，比较简单，拿来用即可；

Message 消息提示

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

  • 这个组件的创建无须在页面中书写任何标签，他是一个 JavaScript插件，在需要展示消息提示的位置直接调用提供的 Js插件方法即可；

Data 组件

Table 表格

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

  • 详见官方文档，写的很详细！
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign