Vue头像处理方案小结


Posted in Javascript onJuly 26, 2018

个人思路

获取后台返回头像url,判断图片宽度,高度。

如果宽度>高度, 使其高度填充盒子 两边留白。

如果宽度<高度,使得宽度填充盒子 上下留白。

效果图:

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头像处理方案小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
Jquery $when done then的用法详解
May 20 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 #Javascript
vue router 配置路由的方法
Jul 26 #Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 #Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 #Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 #Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 #Javascript
You might like
js直接编辑当前cookie的脚本
2008/09/14 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
pycharm配置git(图文教程)
2019/08/16 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
策划助理岗位职责
2013/11/18 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
学生安全责任书
2014/04/15 职场文书
初中班主任评语大全
2014/04/24 职场文书
文秘自荐信
2014/06/28 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
MySQL 如何分析查询性能
2021/05/12 MySQL
python开发制作好看的时钟效果
2022/05/02 Python