您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue this.$refs.xxx獲取dom的注意事項(xiàng)是什么”,在日常操作中,相信很多人在vue this.$refs.xxx獲取dom的注意事項(xiàng)是什么問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”vue this.$refs.xxx獲取dom的注意事項(xiàng)是什么”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
vue
項(xiàng)目:
v-for
渲染的元素,如果內(nèi)容超過(guò)一行,則右側(cè)展示一個(gè)"更多"按鈕,點(diǎn)擊“更多”按鈕后,再展示全部的數(shù)據(jù)。
在上家公司的時(shí)候,我也遇到過(guò)類(lèi)似的要求,但是當(dāng)時(shí)水平菜的底氣硬,直接一個(gè)不會(huì),愣是把需求改為了全部展示,今天遇到了這個(gè)問(wèn)題,想著還是要解決一下,困難就是成長(zhǎng)。
一行的內(nèi)容高度是50px
,我只需要判斷渲染完成后,內(nèi)容區(qū)的高度是否超過(guò)50px
即可。
于是:html
部分代碼:
<div class="searchWrap"> <div class="searchItem" v-for="(tag, tagIndex) in pinPaiList" :key="tagIndex"> <div class="searchLeft">{{ tag.tagSortTitle }}</div> <div class="searchList" :ref="'tagParent' + tagIndex"> <div v-for="(p, pIndex) in tag.items" :key="pIndex" class="listCls"> <span @click="selectPP(tagIndex, pIndex)" :class="{ active: p.checked }">{{ p.value | filterStr }}</span></div></div> <div class="searchMore"> <div> <div class="el-icon-arrow-down" v-if="tag.moreFlag" @click="moreData(tagIndex)">更多</div> <div class="el-icon-circle-check" v-if="tag.selectMore" @click="sureSearch(tagIndex)" :class="{ active: tag.selectMore }" >確定</div> <div @click="changeType(tagIndex)" :class="{ active: tag.selectMore }" class="el-icon-circle-plus-outline">{{ !tag.selectMore ? "單選" : "多選" }} </div> </div> </div> </div> </div>
上面代碼的重點(diǎn)在于,我要在v-for
渲染的dom
元素上綁定ref
,動(dòng)態(tài)綁定屬性的方式跟其他的動(dòng)態(tài)綁定一致:
:ref="'tagParent' + tagIndex"
tag.moreFlag
就是判斷是否要展示更多
按鈕的關(guān)鍵,這個(gè)是根據(jù)dom
元素的高度來(lái)判斷的。
vue
項(xiàng)目中獲取dom
元素的高度——this.$refs.xxx
vue
項(xiàng)目中獲取dom
元素的高度可以通過(guò)this.$refs.xxx
的方式來(lái)處理:
但是我在使用的過(guò)程中,this.$refs.xxx
的方式獲取dom
,經(jīng)常會(huì)出現(xiàn)undefined
,也有少數(shù)情況是可以獲取到的。
具體原因就是:如果是用v-if
或者v-for
渲染的dom
元素,是不能直接使用this.$refs.xxx
的方式來(lái)獲取dom
的,即便是放在this.$nextTick
里面也是不行的。
需要在獲取到數(shù)據(jù)之后,再通過(guò)this.$nextTick
的方式來(lái)處理:
我這邊的處理方法如下:
... //此處的this.pinPaiList是從上面的接口中獲取到的數(shù)據(jù),需要循環(huán)遍歷,依次判斷高度 this.pinPaiList && this.pinPaiList.forEach((p, pIndex) => { this.$nextTick(() => { //一定要注意通過(guò)this.$refs.xxx的方式獲取到的dom要取index為0的一項(xiàng),然后獲取高度通過(guò)clientHight來(lái)獲取,如果不是v-if或者v-for渲染的dom,則不需要加這個(gè)0。 var height = this.$refs[`tagParent${pIndex}`][0].clientHeight; if (height > 50) { this.pinPaiList[pIndex].moreFlag = true; //如果判斷出來(lái)某一項(xiàng)的高度超出一行,則延遲將此行的高度設(shè)置為一行,進(jìn)而展示更多按鈕,點(diǎn)擊更多按鈕時(shí)將height改為auto即可 setTimeout(() => { this.$refs[`tagParent${pIndex}`][0].style.height = "35px"; }, 0); } else { this.pinPaiList[pIndex].moreFlag = false; } this.$set(this.pinPaiList, pIndex, this.pinPaiList[pIndex]); }); }); ... //點(diǎn)擊更多按鈕 moreData(index) { this.pinPaiList[index].moreFlag = false; this.$set(this.pinPaiList, index, this.pinPaiList[index]);//這個(gè)是vue2的缺陷,數(shù)據(jù)改變視圖不渲染的解決方案 setTimeout(() => { this.$refs[`tagParent${index}`][0].style.height = "auto"; }, 0); }
到此,關(guān)于“vue this.$refs.xxx獲取dom的注意事項(xiàng)是什么”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。