ElementUi组件使用（一）

一、概念

官网解释是：Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

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

二、组件

• layout布局组件。通过基础的 24 分栏，迅速简便地创建布局。类似于bootstrap的12分栏

<el-row>
    //占24栏
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
    //占12栏,平分
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
    //占12栏,平分
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
    //平均分为3份，每份占8栏
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>

layout布局组件

• container布局容器。用于布局的容器组件，方便快速搭建页面的基本结构
  <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
  <el-header>：顶栏容器。
  <el-aside>：侧边栏容器。
  <el-main>：主要区域容器。
  <el-footer>：底栏容器。

---

• 表单验证，拿一个登录框来举例

  
  

        //model:表单数据对象
        //rules:表单校验规则
        //hide-required-asterisk:是否显示必填字段的标签旁边的红色星号
     <el-form :model="user" :rules="rules" :hide-required-asterisk="true">
        <h2>WELCOME</h2>
        <!-- <p>{{message}}</p> -->
        //prop:表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
        <el-form-item label="用户名" prop="name">
          <el-input v-model="user.name" prefix-icon="el-icon-user-solid" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" prefix-icon="el-icon-s-goods" clearable show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <el-checkbox v-model="checked">自动登录</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="success" @click="register">注册</el-button>
        </el-form-item>
      </el-form>

注意：prop必须和表单域 model 字段一样，否则会验证错误

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

this.$message({
        message: '请输入帐号或密码',
        type: 'error',
        showClose: true,
        duration: 2000
      })

image.png