Element UI

简介

基于 Vue 2.0 的桌面端组件库，可在官网查看中文文档。

安装

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

使用

1. 在 中引入elementUI样式

2. 引入Vue

   Vue引入要在 elementUI 组件引入之前

3. 引入 elementUI 组件库

4. 新建 Vue 对象进行挂载

   不挂载不会生效

标准示例：

    
    
    
    
    
    



    

        Button
        
            
Try Element
        
    

常用组件

Icon 图标

提供了一套常用的图标集合，直接使用 i 标签结合 class 来使用：

el-icon-iconName 为官网定义的图标名称，直接取官网查找对应的图标，修改 class 属性即可。

Button 按钮

是 Element UI 提供的一组常用的操作按钮组件，直接使 用封装好的 el-button ,比如：

按钮

基于 el-button 按钮，可以使用 type、plain、round、 circle 、disabled等属性对按钮进行修饰。

• type 设置按钮的样式
• plain 可以减弱按钮的背景颜色效果
• round 用来给按钮设置圆角
• circle 将按钮设置为圆形
• disabled 设置按钮的可用状态
• loading 属性可用给按钮设置“加载中”的效果
• size 属性可用设置按钮的大小，medium，small，mini

Link 超链接

文字超链接，使用 el-link 标签来实现

默认链接