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