vue项目实现更换默认头像功能

大概效果就是这样

<div class="top-wrapper"><div class="top-left">// 显示头像的地方// imageView  这个是我自定义的组件，用 img 标签代替就可以了<div class="circle" @click="showChooseImg"><imageView :src="userImg"></imageView></div></div><div class="top-right"><div class="userinfo"><div class="user-name"><span>{{username}}</span></div><div class="user-word"><span v-if="unique">{{unique}}</span><span v-else style="color: #ccc;">这个人很懒，什么都没有说</span></div></div></div>
</div>
<transitionenter-active-class="fadeInDown"leave-active-class="fadeOutDown"><div class="default-img animated" v-show="showChooseAvatar"><ul><li v-for="item in imgList" :key="item.id"><img :src="item.imgUrl" alt="" width="100px" @click="chooseImg(item.imgUrl)"></li></ul></div>
</transition>

export default {props: {username: {type: String,default: ''},unique: {type: String,default: '这个人很懒，什么都没有说'}},data () {return {userImg: '',// 控制图片列表是否显示showChooseAvatar: false,// 图片列表，可以自己去网上下载几张想要的图片imgList: [{'id': 1,imgUrl: '/static/img/avatar01.jpg'},{'id': 2,imgUrl: '/static/img/avatar02.jpg'},{'id': 3,imgUrl: '/static/img/avatar03.jpg'},{'id': 4,imgUrl: '/static/img/avatar04.jpg'},{'id': 5,imgUrl: '/static/img/avatar05.jpg'},{'id': 6,imgUrl: '/static/img/avatar06.jpg'},{'id': 7,imgUrl: '/static/img/avatar07.jpg'},{'id': 8,imgUrl: '/static/img/avatar08.jpg'},{'id': 9,imgUrl: '/static/img/avatar09.jpg'}]}},components: {imageView},methods: {// 由于没有服务端提供相对应的服务，所以使用本地存储代替，// 当然，既然都是默认头像，也就无所谓了chooseImg (imgUrl) {localStorage.setItem('avatar', imgUrl)this.userImg = localStorage.getItem('avatar')this.showChooseAvatar = false},showChooseImg () {this.showChooseAvatar = true}},// 一定要在 mounted 的时候调用，不然刚刚进入页面的时候，头像就是空白的mounted () {this.userImg = localStorage.getItem('avatar')}
}

可以使用 vue 里面提供的动画，不过我这里使用的是 animate，这个库。只要下载放在你的项目里，之后再 main.js 里面引用即可
关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临

vue项目实现更换默认头像功能相关推荐

【vue】vue项目启动设置默认启动页
当我们在启动vue项目时,默认打开的界面是白色的,需要输入正确的路由才能访问正确的页面.我们应该如何让项目打开的时候默认跳转到想启动的页面呢? 我们需要在router的index.ts(js)文件中设 ...
Vue项目中添加锁屏功能
0. 直接上预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...
vue项目启动设置默认启动页
当我们在启动vue项目时,默认打开的界面是白色的,需要输入正确的路由才能访问正确的页面.我们应该如何让项目打开的时候默认跳转到想启动的页面呢? 我们需要在router的index.ts(js)文件中设 ...
vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能问题: tinymce富文本编辑器的多图片批量上传插件支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...
Vue项目中用户的头像展示
效果展示: element中已经有对应的组件了,直接封装成公用的组件使用即可在@/components/UploadImage/index.vue(注意我们要自定义上传,并上传到第三方服务器中,所以 ...
关于vue项目中的日志管理功能
项目场景: 后端:数据拿去,自己玩个日志管理页面出来 {"curent": {"ub_real_name": "测试账号","op ...
vue项目使用LODOP打印小票功能
毕业后第一份工作是做后台管理系统的,项目中要求有打印小票功能,然而我并不知道,该怎么写,百度了很多.一开始在网上查到很多都在用electron+vue我以为我可以用这个呢,搞了两天,才发现这是做桌面软 ...
Vue项目中个人中心头像的上传方法
我们实现的时点击头像栏这一整行都可以更换头像这个功能. 我们需要使用vant组件库中的Uploader文件上传组件. 即: <van-uploader :after-read="aft ...
vue 项目实现发邮件的功能
本文以QQ为例子, 其他邮箱参考:node_modules/nodemailer/well-known/services.json 新版本vue-cli 生成已经木有server的文件,需要我们手动来 ...
vue项目实现鼠标拖拽功能
<divid="back"@mousedown="draggableFun($event)"></div> //e.clientX和e. ...

vue项目实现更换默认头像功能

vue项目实现更换默认头像功能相关推荐

最新文章

热门文章