个人设置 (二)-基础布局——layout布局组件-12栅格布局模式 & input输入框组件-文本域模式 & upload上传组件-用户上传模式

02-个人设置-基础布局

layout布局组件-基础栅格布局模式：
https://element.eleme.cn/#/zh-CN/component/layout

input输入框组件-文本域模式：
https://element.eleme.cn/#/zh-CN/component/input

button按钮组件-主要按钮模式：
https://element.eleme.cn/#/zh-CN/component/button

upload上传组件-用户头像上传模式：
https://element.eleme.cn/#/zh-CN/component/upload

src/views/setting/index.vue 中的div盒子里

<template>
  <div class='container'>
    <el-card>
      <div slot="header">
        <my-bread>个人设置</my-bread>
      </div>
      <!-- 栅格 -->
      <el-row>
        <el-col :span="12">
          <!-- 表单 -->
          <el-form label-width="120px">
            <el-form-item label="编号：">1</el-form-item>
            <el-form-item label="手机号：">13200002222</el-form-item>
            <el-form-item label="媒体名称：">
              <el-input v-model="userInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="媒体介绍：">
              //输入框-文本域模式
              <el-input v-model="userInfo.intro" type="textarea" :rows="3"></el-input>
            </el-form-item>
             <el-form-item label="邮箱：">
              <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item>
                //主要按钮组件
              <el-button type="primary">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <!-- 上传组件 -->
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p style="text-align:center;font-size:14px">修改头像</p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userInfo: {
        name: '',
        intro: '',
        email: ''
      },
      imageUrl: null
    }
  }
}
</script>

<style scoped lang='less'></style>