vue的ref属性获取/设置标签的样式

vue的ref属性获取/设置标签的样式

1. 获取标签的宽高：this.$refs.image.clientHeight/clientWidth。

2. 设置标签的宽高：this.$refs.content.$el.style.top="12px"

<div >
    <div ref="image" class="image"></div>
    <div ref="content" class="content"></div>
</div>
 
<style>
    .image{
        width:100%;
        height:0;
        padding-top:70%;
    }
    .content{
        position:absolute;  
        width:100%;
        top:0;
        left:0;
        right:0;
        bottom:0;  
    }
    
</style>
 
<script>
    export default{
        mounted(){
            setTimeout(()=>{
                this.$refs.content.$el.style.top=`${this.$refs.image.clientHeight}px`
            },20)
        }
    }
 
</script>