欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js動態(tài)設(shè)置VueComponent高度遇到的問題及解決

 更新時間：2022年08月16日 08:38:21   作者：condragte  
這篇文章主要介紹了vue.js動態(tài)設(shè)置VueComponent高度遇到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue.js動態(tài)設(shè)置VueComponent高度的問題

1.獲取HTML元素高度

<div v-for="data in list">
? ? <div ref="abc">{{data.id}}</div>
</div>
mounted(){
? ? console.log(this.$refs.abc[0].clientHeight);//獲取第一個div元素的高度
? ? this.$refs.abc[0].style.height = 100 +'px';//動態(tài)設(shè)置HTML元素高度
}

注意：

  • 1.此處用到v-for循環(huán)，this.$refs.abc返回的是個HTMLElement數(shù)組
  • 2.this.$refs在DOM元素掛載完成后才可以調(diào)用
  • 3.不可以通過this.$refs.abc[0].clientHeight = 100 +'px'設(shè)置高度，因?yàn)閏lientHeight屬性是只讀的，不允許修改。
  • 4.注意加'px'單位

2.獲取VueComponent標(biāo)簽生成的元素的高度

<Row v-for="(data,idx) in list" :key="idx">
? ?<Col ref="leftCol">
? ? ? <p>{{data.id}}</p>
? ?</Col>
? ?<Col ref="rightCol">
? ? ? <p>{{data.id}}</p>
? ?</Col>
</Row>
mounted(){
? ? for(let i = 0; i < this.list.length; i++){
? ? ? console.log(this.$refs.leftCol[i].$el.clientHeight);//獲取左邊列元素的高度
? ? ? console.log(this.$refs.rightCol[i].$el.clientHeight);//獲取右邊列元素的高度
? ? ? this.$refs.leftCol[0].$el.style.height = 100 +'px';//動態(tài)設(shè)置VueComponent元素高度 ? ?
? ? };
}

注意：

this.$refs.leftCol返回的是個VueComponent數(shù)組，this.$refs.leftCol[i]返回的是個VueComponent元素，而不是HTMLElement

3.判斷一個對象是jQuery對象還是DOM對象

var jqueryObject = $("#a");
jqueryObject instanceof jQuery; //jqueryObject 是jQuery對象
var domObject = document.querySelector("#a");
domObject instanceof jQuery; //domObject不是jQuery對象
domObject instanceof HTMLElement; //domObject是DOM對象

vue動態(tài)獲取、設(shè)置組件高度

<template>
  <el-row>
    <el-col :span="24">
      <el-row ref="headerMenu" class="header-menu">
        <el-col :span="24">
          <el-menu router mode="horizontal">
            <el-menu-item index="1" route="/global-overview">全局概覽</el-menu-item>
            <el-menu-item index="2" route="/e-commerce-business">電商業(yè)務(wù)</el-menu-item>
            <el-menu-item index="3" route="/douniao-business">抖鳥業(yè)務(wù)</el-menu-item>
            <el-menu-item index="4" route="/administrative-business">行政業(yè)務(wù)</el-menu-item>
            <el-menu-item index="5" route="/admin">管理員入口</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <el-row ref="routerView">
        <router-view></router-view>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "home-page",
  mounted() {
    /**
     * when the component is hung, dynamically obtain the height of the header menu,
     * and set this value to router view as margin top
     */
    this.$refs.routerView.$el["style"].marginTop = `${this.$refs.headerMenu.$el["offsetHeight"]}px`;
  }
}
</script>

<style scoped>
.header-menu {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
</style>

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評論