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

你的名字 2023-03-13 12:15 3阅读 0赞

![在这里插入图片描述][2020051316034383.gif_pic_center]  
大概效果就是这样

<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` 里面引用即可  
关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临  
![在这里插入图片描述][202011301114021.jpg_pic_center]

[2020051316034383.gif_pic_center]: /images/20230312/9a272a0e31e54a728f2f1e9140893e53.png
[animate]: https://animate.style/
[202011301114021.jpg_pic_center]: https://img-blog.csdnimg.cn/202011301114021.jpg#pic_center