详细介绍ElementUI组件库

本篇文章给大家带来了关于vue的相关知识，其中主要介绍了关于elementui组件库的相关问题，elementui组件库是一套基于vue2.0的桌面端组件库，提供了丰富的组件帮助开发人员快速构建页面，下面一起来看一下，希望对大家有帮助。

【相关推荐：vue、vue】

ElementUI介绍

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

官网地址：http://element-cn.eleme.io/#/zh-CN

在页面上引入 js 和 css 文件即可开始使用，如下：

登录后复制

Container 布局容器

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

：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列

：顶栏容器

：侧边栏容器

：主要区域容器

：底栏容器

  
          Header              Aside                  Main          Footer                    
      .el-header, .el-footer {      background-color: #B3C0D1;      color: #333;      text-align: left;      line-height: 60px;    }    .el-aside {      background-color: #D3DCE6;      color: #333;      text-align: center;      line-height: 200px;    }    .el-main {      background-color: #E9EEF3;      color: #333;      text-align: center;      line-height: 590px;    }    new Vue({    el:'#app'  });

登录后复制

Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

  个人中心      退出系统    修改密码    联系管理员  

登录后复制

NavMenu 导航菜单

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

                  导航一        选项1    选项2    选项3                    导航二        选项1    选项2    选项3  

登录后复制

Table 表格

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

                      编辑      删除        new Vue({    el:'#app',    data:{      tableData: [{        date: '2016-05-02',        name: '王小虎',        address: '上海市普陀区金沙江路 1518 弄'      }, {        date: '2016-05-04',        name: '王小虎',        address: '上海市普陀区金沙江路 1517 弄'      }, {        date: '2016-05-01',        name: '王小虎',        address: '上海市普陀区金沙江路 1519 弄'      }]    },    methods:{      handleUpdate(row){        alert(row.date);      },      handleDelete(row){        alert(row.date);      }    }  });

登录后复制

Pagination 分页

当数据量过多时，使用分页分解数据。

  new Vue({    el:'#app',    methods:{      handleCurrentChange(page){        alert(page);      }    }  });

登录后复制

Message 消息提示

常用于主动操作后的反馈提示。

消息成功警告错误  new Vue({    el: '#app',    methods: {      open1() {        this.$message('这是一条消息提示');      },      open2() {        this.$message({          message: '恭喜你，这是一条成功消息',          type: 'success'        });      },      open3() {        this.$message({          message: '警告哦，这是一条警告消息',          type: 'warning'        });      },      open4() {        this.$message.error('错了哦，这是一条错误消息');      }    }  })

登录后复制

Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础的、简洁的标签页
  用户管理  配置管理  角色管理  定时任务补偿
选项卡样式的标签页
  用户管理  配置管理  角色管理  定时任务补偿
卡片化的标签页
  用户管理  配置管理  角色管理  定时任务补偿  new Vue({    el: '#app'  })

登录后复制

Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

                                                      -                                                                                                  立即创建    new Vue({    el: '#app',    data:{      form: {        name: '',        region: '',        date1: '',        date2: '',        delivery: false,        type: [],        resource: '',        desc: ''      },      //定义校验规则      rules: {        name: [          { required: true, message: '请输入活动名称', trigger: 'blur' },          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }        ],        region: [          { required: true, message: '请选择活动区域', trigger: 'change' }        ]      }    },    methods:{      onSubmit() {        console.log(this.form);        //validate：对整个表单进行校验的方法，参数为一个回调函数。        //该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。        this.$refs['form'].validate((valid) => {          if (valid) {            alert('submit!');          } else {            console.log('error submit!!');            return false;          }        });      }    }  })

登录后复制

【相关推荐：vue、vue】

以上就是详细介绍ElementUI组件库的详细内容，更多请关注【创想鸟】其它相关文章！