背景: 產(chǎn)品的需求是:搜索列表頁面從后臺(tái)請(qǐng)求到前臺(tái)的多個(gè)規(guī)格屬性月帝,擺成一行進(jìn)行多選先馆,一行擺不下就顯示更多按鈕阱扬。點(diǎn)擊更多泣懊,就換行顯示全部的。
問題:我們?cè)趺床拍芘袛噙@一行擺不下呢麻惶。
解決辦法:
element-resize-detector
1. yarn add element-resize-detector 或者 npm install element-resize-detector --save
2. 在頁面 import elementresizeDetector from element-resize-detector
3. 在頁面mounted里面
mounted(){
// 創(chuàng)建實(shí)例
var erd = elementresizeDetector();
//監(jiān)聽id為test的元素 大小變化
const el = this.$refs['test'] // 這個(gè)是你要監(jiān)聽的元素
erd.listenTo(el, function(element) {
console.log(element.offsetWidth)
this.width = element.offsetWidth
// 這樣就可以監(jiān)聽width,然后寫你的計(jì)算屬性拉
});
}