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出生日期 年月日级联菜单示例代码
Jan 10 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
js+html制作简单验证码
Feb 16 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
vue 如何使用递归组件
Oct 23 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
Vue计算属性的使用
2017/08/04 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
python分析作业提交情况
2017/11/22 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python中import与from方法总结(推荐)
2019/03/21 Python
详解python读取和输出到txt
2019/03/29 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
keras slice layer 层实现方式
2020/06/11 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
Etam德国:内衣精品店
2019/08/25 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
三八节祝酒词
2015/08/11 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书