已解決430363個問題，去搜搜看，總會有你想問的

您可以將元素傳遞給Vue模板中的函數嗎？

首頁猿問您可以將元素傳遞給Vue模板中的函數嗎？

您可以將元素傳遞給Vue模板中的函數嗎？

JavaScript

呼啦一陣風 2021-03-31 04:34:12

我正在嘗試max-height根據其具有的子代數以編程方式計算和設置元素的樣式。我必須在四個單獨的元素上執行此操作，每個元素具有不同數量的子代，所以我不能只創建一個計算屬性。我已經具有max-height在函數中計算的邏輯，但是我無法將元素從模板傳遞到函數中。我已經嘗試了以下解決方案，但是沒有運氣：<div ref="div1" :style="{ maxHeight: getMaxHeight($refs.div1) }"></div>這沒有用，因為$refs在將其傳遞給函數時尚未定義。試圖通過this或$event.target到達getMaxHeight()。這也不起作用，因為this沒有引用當前元素，并且沒有事件，因為我不在v-on事件處理程序中。唯一的其他解決辦法，我能想到的是創建四種計算的屬性，每個屬性調用getMaxHeight()與$ref，但如果我可以調用不同PARAMS單一功能處理它，它會更容易維護。如果可能的話，我想從模板傳遞元素本身。有誰知道這樣做的方法，或者更優雅的方法來解決此問題？

查看完整描述

3 回答

九州編程

TA貢獻1785條經驗獲得超4個贊

我在Vue上學到的一個便宜技巧是，如果模板中需要安裝模板時未加載的任何內容，則只需在模板上放置v-if：

</template>

周圍。乍一看可能很臟，但事實是，它可以完成工作，而不會增加額外的代碼和時間，并避免了錯誤。

此外，您的expandable-函數的代碼長度也有小幅改進：

const expandable = el => el.style.maxHeight =

( el.classList.contains('expanded') ?

el.children.map(c=>c.scrollHeight).reduce((h1,h2)=>h1+h2)

: 0 ) + 'px';

反對回復 2021-04-08

慕田峪9158850

TA貢獻1794條經驗獲得超8個贊

制作直接在div元素上運行的自定義指令可能是您的最佳選擇。您可以創建一個指令組件，例如：

export default {

name: 'maxheight',

bind(el) {

const numberOfChildren = el.children.length;

// rest of your max height logic here

el.style.maxHeight = '100px';

}

然后只需確保將指令導入您計劃使用的文件中，并將其添加到div元素中：

反對回復 2021-04-08

3 回答
0 關注
331 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

您可以將元素傳遞給Vue模板中的函數嗎？

您可以將元素傳遞給Vue模板中的函數嗎？

3 回答

添加回答

您可以將元素傳遞給Vue模板中的函數嗎？