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>
<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 里面引用即可
关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临