这篇文章主要介绍了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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
关于“Vue如何实现头像处理功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue如何实现头像处理功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
