vue.js动态设置VueComponent高度遇到的问题及解决

目录
  • vue.js动态设置VueComponent高度的问题
    • 1.获取HTML元素高度
    • 2.获取VueComponent标签生成的元素的高度
    • 3.判断一个对象是jQuery对象还是DOM对象
  • vue动态获取、设置组件高度

vue.js动态设置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';//动态设置HTML元素高度
}

注意:

  • 1.此处用到v-for循环,this.$refs.abc返回的是个HTMLElement数组
  • 2.this.$refs在DOM元素挂载完成后才可以调用
  • 3.不可以通过this.$refs.abc[0].clientHeight = 100 +'px'设置高度,因为clientHeight属性是只读的,不允许修改。
  • 4.注意加'px'单位

2.获取VueComponent标签生成的元素的高度

<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';//动态设置VueComponent元素高度    
    };
}

注意:

this.$refs.leftCol返回的是个VueComponent数组,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动态获取、设置组件高度

<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">电商业务</el-menu-item>
            <el-menu-item index="3" route="/douniao-business">抖鸟业务</el-menu-item>
            <el-menu-item index="4" route="/administrative-business">行政业务</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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决vue的component标签渲染问题

    目录 component标签渲染问题 vue如何识别import对象和require对象 component组件嵌套,导致页面重复渲染,重复请求的bug 错误代码 正确代码 component标签渲染问题 最近遇到一个问题,就是通过LoadJs方法加载的组件怎么通过component实现热加载问题 vue的component标签是个虚拟dom,在真实dom树上需要vue进行渲染,显示.而我最近遇到的问题,我通过LoadJS方法,从A项目读取B项目的对象,页面并已组件的形式渲染到A项目页面上,组件

  • vue2 自定义动态组件所遇到的问题

    下面讲一下如何定义动态组件.  Vue.extend 思路就是拿到组件的构造函数,这样我们就可以new了.而Vue.extend可以做到:https://cn.vuejs.org/v2/api/#Vue-extend // 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstNam

  • vue 动态组件component

    目录 1.component 2.keep-alive 2.1存在的问题 2.2使用keep-alive解决 2.3keep-alive的生命周期 2.4keep-alive 的 include, exclude属性 1.component 如何实现动态组件渲染 vue提供了一个内置的<component> ,专门用来实现动态组件的渲染. 这个标签就相当于一个占位符,需要使用is属性指定绑定的组件 <button @click="comName = 'Left'"&g

  • vue中常见的问题及解决方法总结(推荐)

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. 一种方法是通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法.具体细节请看下一节的<动态菜单>. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就允许访问,没有

  • vue中设置height:100%无效的问题及解决方法

    在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效. App.vue文件 <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font

  • vue.js动态设置VueComponent高度遇到的问题及解决

    目录 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 2.获取VueComponent标签生成的元素的高度 3.判断一个对象是jQuery对象还是DOM对象 vue动态获取.设置组件高度 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 <div v-for="data in list">     <div ref="abc">{{data.id}}</div> &

  • vue项目动态设置页面title及是否缓存页面的问题

    跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了. 下载 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', comp

  • vue.js动态组件和插槽的使用汇总

    目录 组件进阶-props校验 props校验 组件进阶 - 动态组件 组件进阶-keep-alive组件 keep-alive 组件进阶-keep-alive组件-指定缓存 组件进阶 - 默认插槽 格式 组件进阶-具名插槽 组件进阶-作用域插槽(难点) 自定义指令-基本使用 自定义指令-定义方式 示例 自动获取焦点 自定义指令-传值和更新 组件进阶-props校验 props校验 普通格式: props: ["propA", "propB"].没有类型检查 高阶格

  • Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • 用JS动态设置CSS样式常见方法小结(推荐)

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

  • JS动态修改iframe高度和宽度的方法

    本文实例讲述了JS动态修改iframe高度和宽度的方法.分享给大家供大家参考.具体如下: 如果希望通过按钮动态修改iframe的高度和宽度,可以参考下面的JS代码 <!DOCTYPE html> <html> <head> <script> function changeSize() { document.getElementById("myframe").height="300"; document.getEleme

  • Js动态设置rem来实现移动端字体的自适应代码

    下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应,以此做个记录,方便以后需要,感兴趣的朋友一起看看吧. 具体代码如下所示: //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width(); //750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小 var size = (winWidth / 750) * 100; do

  • js动态设置div的值下例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • Vue.js 动态为img的src赋值方法

    需求是这样: ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "ti

  • js动态设置select下拉菜单的默认选中项实例

    利用javascript设置select下拉菜单的选中项. 代码实例如下: <!--js动态设置select下拉菜单的默认选中项--> <html> <head> <title>下拉菜单</title> <script type="text/javascript"> window.onload=function(){ var osel=document.getElementById("selID"

随机推荐