Element UI

Element UI引言

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

官方定义

网站快速成型工具 和桌面端组件库

定义

​ element ui就是基于vue的一个ui框架，该框架基于vue开发了很多相关组件，方便我们快速开发页面。

由来

​ 饿了么前端团队基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好的组件

Element UI 安装

1. 通过vue脚手架创建项目

   vue init webpack element
   

2. 在Vue脚手架项目中安装elementui

   # 1.下载element相关依赖
    npm i element-ui -S
    
   # 2.指定当前项目中使用elementui(main.js中加入)
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    //在vue脚手架中使用element ui
    Vue.use(ElementUI);
   

按钮组件(示例)

# 1.默认样式按钮

    默认按钮
    主要按钮
    成功按钮
    信息按钮
    警告按钮
    危险按钮


# 2.简洁按钮 鼠标移动上去才会显示颜色

朴素按钮
主要按钮
成功按钮
信息按钮
警告按钮
危险按钮


# 3.圆角按钮
 
     圆角按钮
     主要按钮
     成功按钮
     信息按钮
     警告按钮
     危险按钮
 
 
# 4.图标按钮

    
    
    
    
    
    

按钮组件的详细使用

总结：日后使用element ui 的相关组件时需要注意的是 所有的组件都是el-组建名称开头

1. 创建按钮

   默认按钮
   

2. 按钮属性使用

   默认按钮
   
   
   

   总结：在elementui中所有组件的阻性全部写在组件标签上

3. 按钮组的使用

   
       上一页
       下一页
   
   

   注意:

   • 在element ui中所有组件都是el-组件名称 方式进行命名
   • 在element ui中组件的属性使用都是直接将属性名=属性值写在对应的组件标签上

---

Link文字链接组件

1. 文字链接组件的创建

   默认链接
   

2. 文字链接属性的使用

Layout(栅格)布局组件的使用

通过基础的 24 分栏，迅速简便地创建布局。

在element ui中布局组件将页面划分为多个行row，每行最多分为24栏(列)

使用Layout组件

    占用8份
    占用8份
    占用8份

​ 注意:

    - 在一个布局组件中是由row和col组合而成
    - 在使用时要区分row属性和col属性

属性的使用

• 行属性的使用

  
      
  占用8份
      
  占用8份
      
  占用8份
      
  占用8份
  
  

• 列属性的使用

  Layout组件中使用偏移
  
      
  我是占用12份
      
  我是占用6份
  
  

Container 布局容器组件

创建布局容器

容器中的子元素

：顶栏容器。
：侧边栏容器。
：主要区域容器。 
：底栏容器。

容器的嵌套使用

    
    
        
我是标题
    
    
        
        
            
我是菜单
        
        
        
            
我是中心内容
        
    
    
        
我是页脚
    

水平容器

    
    
        
我是标题
    
    
        
        
            
我是菜单
        
        
        
            
我是中心内容
        
    
    
        
我是页脚
    

注意：默认值-> 子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal

垂直容器

    
    
        
我是标题
    
    
        
        
            
我是菜单
        
        
        
            
我是中心内容
        
    
    
        
我是页脚
    

From相关组件

Radio单选按钮

1. 创建按钮

   男
   女
   
   
   

   ​ 注意：在使用radio单选按钮时至少加入v-model和label两个属性

2. Radio按钮属性的使用

   男
   女
   女
   

   ​ 总结：属性的使用还是直接卸载对应的组件标签上 属性名=属性值 方式使用

3. Radio事件的使用

   男
   女
   
   
   

   ​ 总结:

   • 事件的使用也是和属性使用时一致都是直接写在对应的组件标签上
   • 事件在使用时必须使用Vue中绑定事件方式进行使用 如 @事件名= 事件处理函数(绑定在Vue组件中的函数)

4. Radio按钮组

   
       备选项3
       备选项6
       备选项9
   
   
   
   

Checkbox 多选框组件

1. 创建checkbox组件

   北京
   上海
   天津
   

2. 属性的使用

   北京
   上海
   天津
   

3. 事件使用

   上海
   天津
   
   
   

4. 复选框组的使用

   Input组件

   1. input的使用

   2. 常用属性

   3. 事件使用

      blur  在 Input 失去焦点时触发
      focus 在 Input 获得焦点时触发
      change    仅在输入框失去焦点或用户按下回车时触发
      input 在 Input 值改变时触发
      clear 在点击由 clearable 属性生成的清空按钮时触发
      

   4. 方法使用

       
      focus方法
      blur方法
      
      
      

      ​ 总结

      • 在使用组件的方法时需要在对应的组件中加入ref=组件别名
      • 在调用方法时直接使用this.$refs.组件别名.方法名()

      注意：在elementui中所有组件都存在 属性 事件和方法

      属性:直接写在对应的组件标签上 使用方式 属性名=属性值方式

      事件:直接使用vue绑定事件方式写在对应的组件标签上 使用方式 @事件名=vue中事件处理函数

      方法:1.在对应组件标签上使用ref=组件别名 2.通过使用this.$refs.组件别名.方法名()进行调用

Select选择器

1. 组件创建

   # 1.数据写死在页面上
   
       北京
       天津
   
   注意：1. 要求下拉列表中必须存在option的value属性值 2.要求select必须使用v-model进行数据绑定
   
   # 2.如何动态获取数据
   
    
    
   
   
   # 3.获取下拉列表选中数据
    
      
      
    
    
   

2. 属性使用

3. 事件的使用

4. 方法的使用

   1.给组件起别名
    
       ....
    
   
   2.调用方法
    this.$refs.selects.focus();
   

switch组件的使用

1. Switch组件的创建

2. 属性的使用

   >
   
   

3. 事件使用

4. 方法的使用

   
   调用方法
   
   
   

DatePicker组件

1. 创建

2. 属性的使用

Form组件

1. 创建

    
        
    
    
        
            
            
        
    
    
        
            
        
        -
        
            
        
    
    
        
    
    
        
            
            
            
            
        
    
    
        
            
            
        
    
    
        
    
    
        立即创建
        取消
    

2. 内联表单(行内表单)

通过设置inline=true设置为内联表单