Vue头像处理方案小结
时间：2021-03-09 10:10:10|栏目：vue|点击： 次
个人思路
获取后台返回头像url，判断图片宽度，高度。
如果宽度>高度， 使其高度填充盒子 两边留白。
如果宽度<高度，使得宽度填充盒子 上下留白。
效果图：
缺陷：懒加载图片 会出现闪烁
代码实现
<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%'
}
}
}
总结
