Vue项目实现编辑个人资料效果

主要内容

本章目标：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">
.spaceh2text-align centermargin 20px 0.user-infoheight 210pxbackground-color #fffdisplay flex.user-avatarwidth 210pxheight 210pximg width 100%height 100% .user-mainwidth 570pxpadding 20pxposition relativeh1font-size 24pxcolor #333line-height 44px.info  font-size 12pxline-height 22pxcolor #999acolor #999.tools position absoluteright 20pxtop 20pxvertical-align top;adisplay inline-blockpadding 3px 0width 50pxcolor #ffftext-align centera.follow-atbackground-color  #ff3232a.no-follow-at background-color #999.user-more-infowidth 190pxoverflow hiddenpadding-top 20pxliwidth 81pxheight 81pxborder-radius 32pxborder-bottom-right-radius 0margin 0px 8px 8px 0pxfloat leftdivdisplay blockheight 81pxwidth 81pxbox-shadow 0px 0px 6px rgba(0,0,0,0.05) insetborder-radius 32pxborder-bottom-right-radius 0span color #999line-height 20pxdisplay blockpadding-left 14pxpadding-top 14pxstrong display blockfont-size 18pxcolor #ff3232font-family Microsoft Yaheipadding-left 14pxline-height 32px.user-navmargin 20px 0 20px 0.user-info-showmin-height 300pxbackground #fffpadding-top 20px.info-emptywidth 100% min-height inheritdisplay flexalign-items centerjustify-content:center;p text-align centerfont-size 12pxa text-align centerdisplay blockheight 48pxwidth 200pxline-height 48pxfont-size 14pxbackground #ff3232color #ffffont-weight boldmargin 0px auto.el-tabs__item.is-active color: #ff3232;.el-tabs__active-barbackground-color: #ff3232;.el-tabs__nav-wrap::afterbackground-color: transparent;
</style>

edit.vue

<template><div class="edit"><div class="edit-item"><span class="label">修改头像</span>//upload-img此时是个自定义组件<upload-imgimgMaxWidth="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.userInforeturn {//先存数据再渲染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">
.editbackground-color #fffpadding 10px 0 20px 20px.edit-item display flexmargin-bottom 20px.labelmargin-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="data: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监听在组件上面是双向绑定的，静态方法此时加 ‘:’ ,变成动态的
今天的内容就先到这里因为还有一些没完善所以不是很好后面再继续改进！

Vue项目实现编辑个人资料效果相关推荐

Vue项目中用vue-video-player实现直播效果（m3u8格式）
项目中有一个需求,需要实现直播功能.后端接口返回的是m3u8数据流,于是引入vue-video-player插件播放m3u8数据流实时视频. 1.安装 npm install vue-video-pl ...
vue项目实现多张图片轮番效果
vue中轮播图的实现轮播图中html结构一般由主体图片.下方小圆圈.上一张和下一张组成. 主体图片能够实现两秒切换一次,并且对应的小圆圈被选中点击上一张和下一张按钮切换相应图片,同时小圆圈产生变化 ...
美食杰项目 -- 编辑个人资料（六）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰编辑个人资料效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现编辑个人资料页的效果,和具体代码. ...
VUE项目实践1：设置编辑按钮，可保存，双向绑定
VUE项目实践:设置编辑按钮,可保存,双向绑定目录结构: 实现效果: 所有代码: 实现页面:ipobtion.vue 引用页面:index.vue 目录结构: 实现效果: ...
在vue项目中使用gsap，实现极佳的2d动画效果
在vue项目中使用gsap,实现极佳的2d动画效果一.GSAP是什么? 二.使用步骤 1.引入库 2.在vue中使用 3.vue组件使用gsap完整代码总结一.GSAP是什么? GSAP全称是G ...
vue项目下拉框内容过长做一个滚动条的效果
vue项目下拉框内容过长做一个滚动条的效果如下图: 关键代码如下:
VUE项目开发，使用canvas实现图片签名编辑手写板功能
vue项目使用canvas实现手写板功能完整的效果图如下: 直接上代码,下面代码可以当做组件直接引用,根据自己的需求传对应的图片即可,操作图标需要自己替换,保存功能也需要自己实现. CanvasDi ...
vue项目开发实现自定义Transfer穿梭框效果(结合el-tree)
vue项目开发实现自定义Transfer穿梭框效果(结合el-tree) 效果图: 直接上代码: // An highlighted block <template><el-dia ...
vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中在el-table标签中添加v-load ...

Vue项目实现编辑个人资料效果

主要内容

总结：

Vue项目实现编辑个人资料效果相关推荐

最新文章

热门文章