【编程鹿】害 学element-ui 看这篇就够了

环境搭建

npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

CDN

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




我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免将来 Element 升级时受到非兼容性更新的影响。

Hello world

通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。




  
  
  


  
Button

Try Element

Layout 布局

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

基础布局

使用单一分栏创建基础的栅格布局。

通过 row 和 col 组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。


  

分栏间隔

分栏之间存在间隔。

Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。


  

分栏偏移

支持偏移指定的栏数。

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。


  

对齐方式

通过 flex 布局来对分栏进行灵活的对齐。

type 属性赋值为 'flex',可以启用 flex 布局,并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。


  

Container 布局容器

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

el-container:外层容器。当子元素中包含 el-header 或者 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。

el-header:顶栏容器。

el-aside:侧边栏容器。

el-main:主要区域容器。

el-footer:底栏容器。

以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外,el-container的子元素只能是后四者,后四者的父元素也只能是 el-container。

案例:


  
    
      
        
        
          
          选项1
          选项2
        
        
          选项3
        
        
          
          选项4-1
        
      
      
        
        
          
          选项1
          选项2
        
        
          选项3
        
        
          
          选项4-1
        
      
      
        
        
          
          选项1
          选项2
        
        
          选项3
        
        
          
          选项4-1
        
      
    
  
  
  
    
      
        
        
          查看
          新增
          删除
        
      
      王小虎
    
    
    
      
        
        
        
        
        
        
      
    
  




button按钮

使用typeplainroundcircle属性来定义 Button 的样式。


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



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



  圆角按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮



  
  
  
  
  
  

Form 表单

由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据

常见的表单元素

  1. 单选框
  2. 复选框
  3. 输入框
  4. 下拉列表框
  5. 日期选择器
  6. 文件上传组件

典型表单

包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。

行内表单

当垂直方向空间受限且表单较简单时,可以在一行内放置表单。

表单验证

在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。

自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

通知

  1. 警告框

    用于页面中展示重要的提示信息。

    
    
    
  2. 加载框

    在表格等容器中加载数据时显示.

    
    
    
    
    
  3. 消息提示框

    从顶部出现,3 秒后自动消失。

    
    
    
  4. 弹框

    模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。

  5. 通知

    悬浮出现在页面角落,显示全局的通知提醒消息。

Table 表格

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

基础表格

基础的表格展示用法。

日期 姓名 地址
2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄
2016-05-04 王小虎 上海市普陀区金沙江路 1517 弄
2016-05-01 王小虎 上海市普陀区金沙江路 1519 弄
2016-05-03 王小虎 上海市普陀区金沙江路 1516 弄

el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。

  

  

带斑马纹表格

使用带斑马纹的表格,可以更容易区分出不同行的数据。

日期 姓名 地址
2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄
2016-05-04 王小虎 上海市普陀区金沙江路 1517 弄
2016-05-01 王小虎 上海市普陀区金沙江路 1519 弄
2016-05-03 王小虎 上海市普陀区金沙江路 1516 弄

stripe属性可以创建带斑马纹的表格。它接受一个Boolean,默认为false,设置为true即为启用。



带边框表格

日期 姓名 地址
2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄
2016-05-04 王小虎 上海市普陀区金沙江路 1517 弄
2016-05-01 王小虎 上海市普陀区金沙江路 1519 弄
2016-05-03 王小虎 上海市普陀区金沙江路 1516 弄

默认情况下,Table 组件是不具有竖直方向的边框的,如果需要,可以使用border属性,它接受一个Boolean,设置为true即可启用。



带状态表格

可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容。

Tree 树形控件

用清晰的层级结构展示信息,可展开或折叠。



NavMenu 导航菜单

为网站提供导航功能的菜单。

侧栏

垂直菜单,可内嵌子菜单。

通过el-menu-item-group组件可以实现菜单进行分组,分组名可以通过title属性直接设定,也可以通过具名 slot 来设定。


  
    
默认颜色
选项1 选项2 选项3 选项1 导航二 导航三 导航四
自定义颜色
选项1 选项2 选项3 选项1 导航二 导航三 导航四

Tag标签

用于标记和选择。


  {{tag.name}}


综合案例




    
    
    学生列表
    
    
    
    


处理中心 选项1 选项2 选项3 首页
在校学生管理 学生升级/留级 学生就业情况 意向学生管理 未报名学生管理 已报名学生管理 已有课程管理 正在研发课程管理 新技术课程管理 学生列表
添加学生
编辑 删除

❤️ 帅气的你又来看了我

如果你觉得这篇内容对你挺有有帮助的话:

  1. 点赞支持下吧,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
  2. 欢迎在留言区与我分享你的想法,也欢迎你在留言区记录你的思考过程。

你可能感兴趣的:(前端,vue.js,element-ui)