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 相关文章推荐
JSON语法五大要素图文介绍
Dec 04 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
vue实现简单学生信息管理
May 30 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程序
2012/02/04 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
php中错误处理操作实例分析
2019/08/23 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
Python中使用PDB库调试程序
2015/04/05 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
客户接待方案
2014/02/26 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
公司离职证明样本
2014/09/13 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书