Vue中如何实现头像处理

今天小编给大家分享一下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++     }   })  }

assets文件js下的base.js

// 单个头像处理 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%'      }   } }

以上就是“Vue中如何实现头像处理”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。