vueで親要素をmin-heigt、子要素をheight:100%に設定し、高さ///vueで動的要素の幅の高い値を適応できません.

5391 ワード

<template>
  <div class="toast" ref="wrapper">
    <slot v-if="!enableHtml"></slot>
    <div v-else v-html="$slots.default"></div>
    <template v-if="closeButton">
      <div class="line" ref="line"></div>
      <span class="close" @click="onClickClose">{{closeButton.text}}</span>
    </template>
  </div>
</template>
  mounted() {
  	//     this.$nextTick     getBoundingClientRect()
    this.$nextTick(()=>{
      this.$refs.line.style.height=`${this.$refs.wrapper.getBoundingClientRect().height}px`
    })
  },

これを実行します.refs.wrapper.getBoundingClientRect()取得
x: 681.4140625
y: 0
width: 540.171875
height: 40
top: 0
right: 1221.5859375
bottom: 40
left: 681.4140625