Vue.js Vue-如何在div中渲染$slots.default以计算其高度？

我试图简化我的问题：

假设我有一个模态分量

//example.php
<modal>
  <div>A big div</div>
</modal>

---

你的逻辑太复杂了。这比你想象的要容易

看，动画是发生在DOM上的事情。因此，DOM在动画开始时可用。因此，您可以使用Vue

ref

（推荐）或

mounted

hook中的本机javascript语法访问任何DOM元素。在那里，您可以获取元素高度或您想要的任何其他属性，并将其存储在

数据中（例如）

可能的解决方案示例#1
默认情况下，enter之前的Vue transition
事件函数将目标元素作为参数。因此，您可以在
beforetransitionner
函数中获得模态高度：

Modal.vue
可能的解决方案示例#2
对于这个例子，有一个重要的细节。我在您的代码示例中看到，您有条件地显示下一个div：

`<div v-if="visibility.modal" class="v--modal v--modal-box">`

如您所见-您将始终具有实际的
modalHeight
值，并且您可以在
Modal.vue
组件中随时使用它。
我只需要在init中使用一次。之后，我使用
this.$refs.modal.getBoundingClientRect（）.height
render: function (createElement) {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

  guessSlotsHeight(){

  let modalDiv = document.createElement('div')

  modalDiv.className = 'v--modal v--modal-box'

  //something like
  let slotDiv = this.render('div', this.$slots.default)
  modalDiv.appendChild(slotDiv);
},

data() {
   return {
      modalHeight: 0,
      visibility: {
         modal: false
      }
   }
},

methods: {
   beforeTransitionEnter(element) {
     this.modalHeight = element.offsetHeight;
   }
}

`<div v-if="visibility.modal" class="v--modal v--modal-box">`

data() {
   return {
      isMounted: false,
      modalHeight: 0,
      visibility: {
         modal: false
      }
   }
},

mounted() {
   this.isMounted = true;
},

watch: {
  visibility: {
     handler(value) {
       if (value.modal && this.isMounted) {
         this.modalHeight = this.$refs.modal.clientHeight;
       }
     },
     deep: true
  }
}