vue中如何實現對dom元素大小改變的監聽

在視窗大小沒改變的時候，有些dom元素的大小發生了變化，導致頁面某些元素沒有重新渲染，出現不適應的情況。如下圖所示：

（1）方案一、vue專案中，我們可以使用element-resize-detector外掛程式來實現，簡單粗暴。實現方案如下：

1、安裝相關外掛程式，npm install element-resize-detector

2、在main.js中引入依賴，並掛在vue原型鏈上：

import elementresizedetectormaker from "element-resize-detector"

vue.prototype.$erd = elementresizedetectormaker()

3、在介面中使用_this.$erd.listento()去做監聽，示例**如下：

mounted()

)})}
,beforedestroy()

二、最開始我也是用方案一去實現的，但是因為專案中用到了handsontable,使用方案一，導致**的核取方塊無法勾選，排查發現可能是resizeto（）影響到了，所以才有了方案二，通過resizeobserver來實現的監聽方案。

resizeobserver介面參考，實現**如下：

//import resizeobserver from "resize-observer-polyfill";

data()
},mounted()
)});
_this.resizeobserver.
observe
(document.
getelementbyid
("container"))
;},beforedestroy()

vue中獲取並操作dom元素

獲取dom元素可以使用 elementlist document.queryselectorall selectors 獲取多個dom元素 如ul中的lielement document.queryselector selectors 獲取dom元素中的第乙個元素在vue中使用 mounted 要在...

原生dom如何對元素的class進行操作

今天看書時突然發現了classlist屬性，是domtokenlist的例項，以陣列的形式儲存元素的class屬性。classlist可以用來很方便的操作元素的class，對其增刪該查操作。說來慚愧，一直以來都是用jquery對元素的class進行操作，以為原生js的class操作必須要通過clas...

3 14 Vue中如何操作dom？

前面的話 前端日問，與小柒一起打卡學習，每天進步一點點！原生操作doma document.getelementbyid elea 獲取a elementlist document.queryselectorall selectors 獲取多個dom元素 如ul中的li element docume...