Vue如何实现头像处理功能

这篇文章主要介绍了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的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

关于“Vue如何实现头像处理功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue如何实现头像处理功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。