How to implement profile Picture processing in Vue
Today, Xiaobian will share with you the relevant knowledge points on how to realize avatar processing in Vue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you will gain something after reading this article. Let's find out together.
code implementation
//outside to give a div and limit the width and height, text-align center, overflow hidden //userInfoList.avatar is the avatar URL returned to me by the background
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中如何实现头像处理"这篇文章的所有内容，感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。
