ElementUI的使用

前言

elementui的官方地址：http://element-cn.eleme.io/#/zh-CN
文档很容易理解，左侧是它集成的组件列表，右侧则是实例的样子和源码。
pc端可以使用elementui，移动端可以使用vant。

UI组件

在官方文档（https://element.eleme.cn/#/zh-CN/component/installation）中，我们可以看到Element UI提供了种类丰富的组件，其中分为基础组件（Basic）、表单组件（From）、数据处理组件（Data）、提示组件（Notice）、导航组件（Navigation）、其他组件（Others）:

常用组件

el-form 表单
el-button 按钮
el-form-item 行内表单
el-input 输入框
el-container 布局容器
el-header 顶栏容器
el-aside 侧边栏容器
el-main 主要区域容器
el-footer 底栏容器
el-menu 导航菜单
el-menu-item 菜单项目
el-submenu 生成二级菜单

基础组件

Layout 布局实现混合布局

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
Row 组件提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

代码：

<template>
  <div id="ElementUI">
    <h1>{{ msg }}</h1>
    <el-row :gutter="20">
      <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ElementUI",
  data() {
    return { msg: "Element-UI" };
  },
};
</script>

Form表单

输入框

基础用法: 需要设置v-model(双向绑定), 输入值才会显示在输入框中。

<el-input v-model="input" placeholder="请输入内容"></el-input>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
};
</script>

禁用 :disabled="true"
可清空： clearable

表单验证

表单数据对象属性为 model, 使用时候不能用 v-model
表单验证的 prop 属性要和双向绑定元素的名字一样

单个字段验证

在el-form-item标签中加入 :rules=’’直接是验证的条件 ‘’

验证用户名不能为空：

<el-form-item
  label="用户名"
  :prop="userName"
  :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]"
>
    <el-input v-model="userName" :maxlength="16" placeholder clearable></el-input>
</el-form-item>

前言

UI组件

常用组件

基础组件

Layout 布局实现混合布局

Form表单

输入框

表单验证

单个字段验证

数字校验