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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
原生js实现商品筛选功能
Oct 28 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
PHP中函数内引用全局变量的方法
2008/10/20 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
关于PHP开发的9条建议
2015/07/27 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
新手学python应该下哪个版本
2020/06/11 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
文明餐桌活动方案
2014/02/11 职场文书
体育节口号
2014/06/19 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
立案决定书范文
2015/06/24 职场文书
Python读写yaml文件
2022/03/20 Python
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
CSS的calc函数用法小结
2022/06/25 HTML / CSS