Vue中怎么實(shí)現(xiàn)頭像處理,針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元潤州做網(wǎng)站,已為上家服務(wù),為潤州各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575代碼實(shí)現(xiàn)
<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處理去報(bào) 數(shù)據(jù)加載完成后 在進(jìn)行圖 _this.$nextTick(function () { head(res.data.avatar, 'userhead') }) // 下拉加載多個頭像處理 res.data.item.forEach((item, index) => { if(_this.listQuery.pg>1){ // 下拉加載時,頭像依然要進(jìn)行處理 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%' } } }
關(guān)于Vue中怎么實(shí)現(xiàn)頭像處理問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。
網(wǎng)站標(biāo)題:Vue中怎么實(shí)現(xiàn)頭像處理-創(chuàng)新互聯(lián)
分享鏈接:http://muchs.cn/article4/cdseie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容