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>