ElementUI的使用

ElementUI的链接

https://element.eleme.io/#/zh-CN/component/button

一、安装ElementUI

npm install element-ui --save

二、ElementUI引用到vue项目

在 main.js 中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

三、使用ElementUI提供的表单

<el-form label-width="80px" style="350px;margin:0px auto;">
    <el-form-item label="用户名">
       <el-input v-model="username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码">
       <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item label="验证码">
       <el-col :span="12">
         <el-input v-model="code" placeholder="请输入验证码"></el-input>
       </el-col>
       <el-col :span="11" :offset="offset">
         <img src="/static/dog.jpg" style="100%;height:40px">
       </el-col>
    </el-form-item>
    <el-form-item label="">
       <el-button type="primary" @click="register">注册</el-button>
       <el-button>登录</el-button>
    </el-form-item>
</el-form>

四、ElementUI的布局

ElementUI 默认把一行分为24个分栏，可以指定哪些站几个分栏
<el-row>表示一行 类似于div
<el-col>表示一个单元格 提供span属性，标识一个单元格占据几列

可以给单元格之间添加间隔
借助于<el-row>属性的gutter来实现等分
样式不要加到<el-col>上  要加到<el-col>包裹的div上

<el-row :gutter="5">
    <el-col :span="6" ><div class="col1">香蕉</div></el-col>
    <el-col :span="6" ><div class="col">鸭梨</div></el-col>
    <el-col :span="6" ><div class="col1">苹果</div></el-col>
    <el-col :span="6" ><div class="col">西瓜</div></el-col>
</el-row>

五、使用ElementUI提供的消息提示（成功，错误）

         if(res.data.status==200){
            this.$message({
              "message":res.data.msg,
              "type":"success"
            })
          }else{
            this.$message.error(res.data.msg)
          }