javascript - vueでコンポーネント自体の高さを取得する方法

Question

高さが可変のポップアップ ボックスを作成したいので、配置する必要があります。ポップアップ ボックスは下部または先頭にポップアップする可能性があります。ただし、コンテンツは可変であるため、その高さは必要ですダウンロードして、現在コンポーネント内の高さを取得する方法
私の現在のアプローチは、created() で classname を使用して、コンポーネントの p を取得しますが、初期値が in data() にあるため、コンポーネントの高さはデフォルトで 0 に設定されます。
data() の高さは変更されますが、p が取得されません。 ＃＃＃作成した（） {＃＃＃ リーリー 印刷結果の curHeight が定義されていません。解決策を見つけてください

Answer 1

element.offsetHeight
// vue では、ref を使用して実際の DOM を取得してください
// マウントされたフックで呼び出され、DOM がレンダリングされた後にトリガーされます

Answer 2

リーリー

Answer 3

作成されたフック dom ノードはまだページに挿入されていません
マウントされたフック関数で呼び出す必要があります

要素の高さを取得するには、dom.clientHeight または dom.getBoundingClientRect().height を使用します🎜

Answer 4

@林小信 呼び出し時にv-ifを使ったのでtrueにすると毎回createされるのでcreatedに入れることもできますが、nextTickについても教えていただきました 使ったことないですがまずは試してみてください。それはあなたのやり方です。
現在、最外層 p には高さがないため、その高さになるようにサブ p の高さを加算することによってのみ取得できます。おそらく、これを作成するときにこれを考慮しなかったのかもしれません。成分。

this.$nextTick(() => {

リーリー

// console.log(cur);

リーリー

// console.log(typeof item.clientHeight);

リーリー

他に良い答えがない場合は、あなたの回答を受け入れます

Answer 5

実際のサイズの.clientWidthと.clientHeightを取得します
.heightのような取得メソッドはないので未定義です