vue3組件通過props傳遞數據如何拿到更新后的dom的問題？現在有這樣一個需求就是一個顯示框寬度固定內容超出隱藏并給出提示內容.解決方案使用dom的scrollWidth和dom的offsetWidth通過判斷他們之間的大小來進行是否省略隱藏,當
【vueprops變化 vue子組件props接接收的值怎么先修改再渲染】vue3組件通過props傳遞數據如何拿到更新后的dom的問題？
解決方案
- 現在有這樣一個需求就是一個顯示框寬度固定內容超出隱藏并給出提示內容.
- 使用
dom的scrollWidth和dom的offsetWidth通過判斷他們之間的大小來進行是否省略隱藏,當然你也可以使用getBoundingClientRect api來獲取dom的寬度
- 再用element-plus中的el-tooltip組件進行封裝.
- 上面的方案是可行的,但問題在于如何動態的去監聽dom的寬度來進行動態的省略隱藏,相信列為不比我差,我一開始就想的是在子組件中的updated鉤子函數中去操作這個dom,可是事與愿違請看下面一張圖片,這張圖片的大概意思就是如果你需要在組件更新之后操作dom請使用nextTick().
文章插圖
如何解決
- 問題是找到了但如何解決并且如何合理的使用
nextTick(),至于nextTick()的原理只說一個大概.
nextTick(),在下次 DOM 更新循環結束之后執行延遲回調 。在修改數據之后立即使用這個方法，獲取更新后的 DOM 。
- 既然updated中獲取不到ref這個實例,我想的是
watch()這個api一共有三個參數,我重點講一講第三個參數
- 第三個參數中除了
{deep: true,immediate:true}這些屬性以外還有一個屬性就是推薦閱讀
- 移風易俗什么意思 變化多端的端是什么意思
- 公積金貸款利率會隨著LPR變化嗎 公積金貸款利率
- 今年的貸款利率有什么變化 今年房屋貸款利率有變化嗎
- 氣候變暖的主要原因是什么
- 公積金貸款后，公積金貸款后利率會變化嗎？
- 《酒精揮發是物理變化還是化學變化 酒精揮發是物理變化還是化學變化如何判斷-酒精揮發是物理變化還是化學變化 酒精揮發是物理變化還是化學變化如何
- 十二星座男得到女人后的變化
- 12星座劈腿前的變化
- 童子命的人送走童子后有什么變化，身上的煞氣會變多
- 均衡價格曲線圖解析，均衡價格變化的曲線圖
