Vue头像处理方案小结

<template>  // 外面要给一个div并且限制宽度和高度，text-align center，overflow hidden  <div class="head">    // userInfoList.avatar 是后台返回给我的头像URL    <img v-lazy="userInfoList.avatar" id="userhead" alt=""/>    </div>  <div class="fl" v-for="(item, index) in matchList" :key="index">    <div class="heads">      <img v-lazy="item.adatar" class="headitem" alt=""/>    </div>  </div ></template><script>import { head, heads } from '@/assets/js/base'  // 存放head，heads目录引入export default {data(){ return {   listQuery:{     pg: 1,     ps: 10  }},methods:{  //获取用户详情  getUserInfoList(){   getlist('mobile/user/pers/detail', funciton(res) {     if(data.code == ERR_OK){        _this.userInfoList = res.data        // 单个头像处理，$nextTick处理去报 数据加载完成后 在进行图        _this.$nextTick(function () {            head(res.data.avatar, 'userhead')        })        // 下拉加载多个头像处理        res.data.item.forEach((item, index) => {          if(_this.listQuery.pg>1){ // 下拉加载时，头像依然要进行处理             let count = (10*(_this.listQuery.pg -1) + index)             _this.$nextTick(function () {                heads(item.adatar, count, 'headitem')             })          }else{            _this.$nextTick(function () {               heads(item.adatar, index, 'headitem')            })          }        }       _this.listQuery.pg++    }  }) }

// 单个头像处理export function head (objUrl, id) {   let _userhead = document.getElementById(id)   if(_userhead){      if(objUrl){        let img = new Image()        img.src = objUrl        img.onload = function () {            let _width = img.width            let _height = img.height            if(_width >= _height){              _userhead.style.width = '100%'           }else{              _userhead.style.height = '100%'            }        }      }else{         _userhead.style.width = '100%'      }   }}// 多个头像处理export function heads (objUrl, index, className) {    let _heads = document.getElementsByClassName(className)[index]    if(_heads){      if(objUrl){        let img = new Image()        img.src = objUrl        img.onload = function () {           let _width = img.width           let _height = img.height           if(_width >= _height){              _heads.style.width = '100%'           }else{             _heads.style.height = '100%'           }       }     }else{         _heads.style.width = '100%'     }  }}