位置：OC中文网 > 其他 > Vue >

vue通过refs修改某个弹窗中的某个dom的宽度

来源：openlayers-cesium.com 时间：07-04

根据需求，点击按钮进入弹窗，下面的界面是进入弹窗后的下一步。通过ref计算出横向滚动条上面的元素的长度。

基本代码段：

<div class="tabtit"> Transit time</div> 
<div class="transit"> 
    <div class="long " ref="longsat"> 
        <div class="satinfo"> 
            <div class="pic1"></div> 
            <div class="bottom">{{condition.fdate}}</div> 
        </div> 
        <div class="satinfo" v-for="(item,index) in myAOIs" :key="index"> 
            <div class="top">{{item.satellite}}</div> 
            <div class="pic"></div> 
            <div class="bottom">{{item.time}}</div> 
        </div> 
        <div class="satinfo"> 
            <div class="pic1"></div> 
            <div class="bottom">{{condition.tdate}}</div> 
        </div> 
    </div> 
 
</div>

核心处理段

updated() { 
    this.$nextTick(() => { 
        if(this.$refs.longsat){ 
            this.$refs.longsat.style.width = this.myAOIs.length * 200 + 500 + 'px'; 
        }                
    }) 
},

由于是还没有进入到最终的界面，this.$refs.longsat 是不存在的，当存在的时候，利用undated 和 his.$nextTick 在更新数据状态后，显示出来长度的大小。

vue项目中获取ref的宽度和高度，设置iframe的宽高