vue项目实现更换默认头像功能
大概效果就是这样<div class="top-wrapper"><div class="top-left">// 显示头像的地方// imageView这个是我自定义的组件,用 img 标签代替就可以了<div class="circle" @click="showChooseImg"><imageView :src="userImg"></
·
大概效果就是这样
<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>
<transition
enter-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
里面引用即可
关注公众号:大明贵妇,无套路获取前端学习资料,期待各位客官来临
更多推荐
已为社区贡献12条内容
所有评论(0)