主要内容
本章目标：vue+element-ui实现编辑个人资料效果
注意事项：安装element-ui
1.效果展示
2.视图页面：views
space.vue
<template>
<div class="space">
<h2>欢迎来到我的美食空间</h2>
<div class="user-info">
<div class="user-avatar">
<img src="https://wx4.sinaimg.cn/orj360/002DNFeDly1gueniwvu3qj60tp0tiju402.jpg" alt="">
</div>
<div class="user-main">
<h1></h1>
<span class="info">
<em>加入美食杰</em>|
<router-link :to="{name:'edit'}" >编辑个人资料</router-link>
</span>
<div class="tools" >
<a href="javascript:;" class="follow-at">关注</a>
</div>
</div>
<ul class="user-more-info">
<li>
<div>
<span>关注</span>
<strong>77</strong>
</div>
</li>
<li>
<div>
<span>粉丝</span>
<strong>44</strong>
</div>
</li>
<li>
<div>
<span>收藏</span>
<strong>11</strong>
</div>
</li>
<li>
<div>
<span>发布菜谱</span>
<strong>55</strong>
</div>
</li>
</ul>
</div>
<div class="user-info-show">
<router-view ></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'Space',
data(){
return {}
},
watch:{},
methods:{}
}
</script>
<style lang="stylus">
.space
h2
text-align center
margin 20px 0
.user-info
height 210px
background-color #fff
display flex
.user-avatar
width 210px
height 210px
img
width 100%
height 100%
.user-main
width 570px
padding 20px
position relative
h1
font-size 24px
color #333
line-height 44px
.info
font-size 12px
line-height 22px
color #999
a
color #999
.tools
position absolute
right 20px
top 20px
vertical-align top;
a
display inline-block
padding 3px 0
width 50px
color #fff
text-align center
a.follow-at
background-color #ff3232
a.no-follow-at
background-color #999
.user-more-info
width 190px
overflow hidden
padding-top 20px
li
width 81px
height 81px
border-radius 32px
border-bottom-right-radius 0
margin 0px 8px 8px 0px
float left
div
display block
height 81px
width 81px
box-shadow 0px 0px 6px rgba(0,0,0,0.05) inset
border-radius 32px
border-bottom-right-radius 0
span
color #999
line-height 20px
display block
padding-left 14px
padding-top 14px
strong
display block
font-size 18px
color #ff3232
font-family Microsoft Yahei
padding-left 14px
line-height 32px
.user-nav
margin 20px 0 20px 0
.user-info-show
min-height 300px
background #fff
padding-top 20px
.info-empty
width 100%
min-height inherit
display flex
align-items center
justify-content:center;
p
text-align center
font-size 12px
a
text-align center
display block
height 48px
width 200px
line-height 48px
font-size 14px
background #ff3232
color #fff
font-weight bold
margin 0px auto
.el-tabs__item.is-active
color: #ff3232;
.el-tabs__active-bar
background-color: #ff3232;
.el-tabs__nav-wrap::after
background-color: transparent;
</style>
edit.vue
<template>
<div class="edit">
<div class="edit-item">
<span class="label">修改头像</span>
//upload-img此时是个自定义组件
<upload-img
imgMaxWidth="210"
action="/api/upload?type=user" :imageUrl="avatar" @res-url="(data)=>{avatar=data.resImgUrl}"></upload-img>
</div>
<div class="edit-item">
<span class="label">修改名称</span>
<div>
//用v-model来绑定数据
<el-input v-model="name" class="create-input" placeholder="请输入内容"></el-input>
</div>
</div>
<div class="edit-item">
<span class="label">个人简介</span>
<div>
<el-input v-model="sign" type="textarea" class="create-input" placeholder="请输入内容"></el-input>
</div>
</div>
<div>
<el-button class="send" type="primary" size="medium" @click="save"
>保存</el-button>
</div>
</div>
</template>
<script>
import UploadImg from '@/components/upload-img'
import {userEdit} from '@/service/api'
export default {
components: {UploadImg},
data(){
//拿到store中的数据
const userInfo=this.$store.state.userInfo
return {
//先存数据再渲染
avatar:userInfo.avatar,
name:userInfo.name,
sign:userInfo.sign
}
},
methods:{
async save(){//点击事件
let data=await userEdit({
avatar:this.avatar,
name:this.name,
sign:this.sign
});
if(data.code === 0){//判断下如果成功进行跳转
this.$router.push({//向添加数据
name:'space'
})
}
}
}
}
</script>
<style lang="stylus">
.edit
background-color #fff
padding 10px 0 20px 20px
.edit-item
display flex
margin-bottom 20px
.label
margin-right 10px
</style>
3.组件零部件components
upload-img.vue
<template>
<el-upload class="avatar-uploader"
//注意要用':'动态绑定下
:action="action"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<img src="url" />
</el-upload>
</template>
<script>
export default {
props:{
action:String,
maxSize:{//限制类型
type:Number,
default:2
},
imageUrl:{
type:String,
default:''
},
imgMaxWidth:{
type:[Number,String],
default:'auto'
}
},
data(){
return {}
},
methods: {
//图片上传成功之后返回图片地址
handleAvatarSuccess(res, file) {
//存图片地址以参数的形式传递
if(res.code===1){
this.$message({
message:res.mes,
type:'warning',
})
return ;
}
this.imageUrl = URL.createObjectURL(file.raw);
thsi.$emit('res-url',{
resImgUrl:res.data.url
})
},
//图片上传之前
beforeAvatarUpload(file) {
// 限制图片类型
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
},
}
</script>
注意：打开element-ui官网找到Upload上传，点开用户头像上传，拿到想要的效果
4.路由：index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Store from '@/store'
import Space from '@/views/user-space/space.vue'
import Edit from "@/views/user-space/edit.vue"
const router = new Router({
mode:"history",
routes:[
{
path:'/space',
name:"space",
title:"我的",
component:Space,
meta:{
login:true
}
},
{
path:'/edit',
name:"edit",
title:"编辑",
component:Edit,
meta:{
login:true
}
}
]
});
export default router;
总结：
v-model监听 在组件上面是双向绑定的，静态方法此时加 ‘:’ ,变成动态的
今天的内容就先到这里 因为还有一些没完善所以不是很好 后面再继续改进！