精华内容
下载资源
问答
  • Vue 动态获取元素高度
    2021-12-07 16:46:18

     getTitleHeight() {

                this.$nextTick(function () {

                    this.contentHeight = document.getElementsByClassName("topColumn")[0].clientHeight;

                    console.log(this.contentHeight);        //元素高度

                })

            },

    更多相关内容
  • vue动态获取元素高度

    vue中动态获取元素的高度请添加图片描述

    展开全文
  • VUE获取元素高度的方法

    千次阅读 2021-04-02 17:13:38
    VUE获取元素高度的方法

    参考网址:https://blog.csdn.net/weixin_42981560/article/details/103416530

    1.Vue获取元素高度.

    // 当前区域
    <div ref="element"></div>
    

    2.获取高度值 (内容高+padding+边框)

    let height= this.$refs.element.offsetHeight;  //100
    

    3.获取元素样式值 (存在单位)

    let height = window.getComputedStyle(this.$refs.element).height; // 100px
    

    4.获取元素内联样式值(非内联样式无法获取)

    let height = this.$refs.element.style.height; // 100px
    

    希望文档能帮助到您,最后求个赞,谢谢~

    展开全文
  • problem: vue获取动态元素高度

    千次阅读 2018-12-04 21:06:00
    解决方法就是在mounted中在this.$nextTick()去获取,如果没有获取到,不是写法错就是,元素没有绑定对地方,注意检查自己的逻辑,自己在写什么思路一定要清晰。 有这样一个需求: 实现一个表格,每一行代表课程...

    前言:始终要相信你能想到的解决方案,基本上都是可以用技术实现的...

     

    解决方法就是在mounted中在this.$nextTick()去获取,如果没有获取到,不是写法错就是,元素没有绑定对地方,注意检查自己的逻辑,自己在写什么思路一定要清晰。

     

    有这样一个需求:

    实现一个表格,每一行代表课程的一期,每一期的天数不固定,每一期有安排老师的要显示老师的数据,也就是要显示一个白条来展示数据,白条的宽度可以根据后端给的开始时间和结束时间来计算间隔数从而算出宽度,而白条高度需要根据内容来自适应,左侧的期数栏的高度也要对应的显示相同的高度。白条中的内容显示体验要好。

    思路:

    1、根据每期的开始时间定位白条的起始位置,即当前行的哪一个表格

    2、白条设置绝对定位,相对对应的表格定位

    3、根据开始时间和结束时间,算出白条应设的宽度值(拿到数据就可以算出来,表格的宽度固定的)

    4、白条的高度要注意是在白条里面的数据显示渲染完之后再去获取元素的高度值,在table层(一般会是一个组件)的mouned中通过在this.$nextTick()获取数据渲染完成之后的元素

    5、获取每一行白条的高度,然后存到数组中

    6、当前白条的父元素tr元素和左侧的显示期数的元素设置和填充了数据之后的白条一样的高度

     

    白条的布局:

    白条用flex布局,并允许换行,flex-wrap: wrap,里面的内容分两列显示,左侧固定一定百分比的宽度(所以内容长度一定要有最大长度不能太长,必须约定),右侧不设置宽度,如果内容太长就会换行显示,体验会比较好。

     

    低效解决方案:

    通过元素个数来算高度,这样必须保证白条里面的内容,在超出最小单元格高度时,元素必须每行显示2个,并且左右两列必须都设置一定比例的宽度,这样才能根据内容的个数准确算出白条的总高度。

    这个方案解决了高度随着内容变化而变化的问题,但是没有解决白条里面的内容长度很长时的显示问题,因为白条中左右列宽度是一定的,又是flex布局,内容太长里面的内容就会自动换行,视觉效果很不好。

    考虑到显示问题,最终解决方案就应该采用第一种,右侧元素宽度不固定,内容太长自动换行显示,白条高度在数据渲染完毕去读取的方式最合适。

     在mounted中的nextTick中去读取每一行白条的高度存在数组中,然后遍历左侧栏元素和右侧表格单元格元素,给元素设置对应的白条的高度。

    转载于:https://www.cnblogs.com/yy95/p/10066867.html

    展开全文
  • VUE3 获取元素高度

    2022-02-23 00:33:08
    import { ref, reactive, onMounted, watch } from 'vue' setup() { let clientHeight = ref('') //浏览器可视区域高度 const headerRef = ref(null) const tagsRef = ref(null) let slbHeight = r
  • vue 获取动态元素高度

    千次阅读 2020-12-19 18:26:11
    2017.10.25凌晨坑死了~因为要在页面中搞一个区域用来scroll列表,所以必须要获取scroll-wrap的高度,于是想...在vue2.0里,如何获取dom元素的样式(样式是动态变化的)nextTick试过,querySelector试过但就是this.$re...
  • vue的自定义指令directive自动计算宽度和高度变化 Vue.directive('resize',{ // 指令的名称 bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象 let width = '', height = ''; function isReize...
  • dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0]....补充知识:vue 获取 指定元素的高度宽度等(使用vue中的 ref 获取到的是 dom 元素高度或者宽度) 使用 vue 的时候,想要
  • Vue获取元素高度

    2022-01-09 15:21:34
    // 当前区域 <div ref="element">...// 获取元素样式值 (存在单位) let height = window.getComputedStyle(this.$refs.element).height; // 100px //获取元素内联样式值(非内联样式无法获取) let height...
  • 主要介绍了VUE实时监听元素距离顶部高度的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue获取元素高度的方法

    千次阅读 2020-08-03 15:33:06
    vue获取元素高度 <div ref="getHeight" class="block"/> .block { width: 100px; height: 100px; background: blueviolet; border: 2px solid pink; padding: 10px; margin: 5px; } 获取高度值...
  • vue3 获取元素高度不准的方法

    千次阅读 2021-05-27 19:23:51
    html: :style="{height: `${ztreeHeight}px`}"> 555 ref="rightBox"> `共 ${total} 条`, }" @change="handleTableChange" > {{ status... 主要是动态数据请求回来之后获取元素高度, 谁有更好的想法代码贴给我奥!
  • vue获取某个元素高度

    千次阅读 2021-04-07 16:53:32
    vue获取某个元素高度 <template> <div class="wrap"> <!-- 定义ref属性 --> <div class="header" ref="header"> <!-- 内容 --> </div> <!-- 根据需求设置 --> ...
  • vue 获取动态元素高度--采坑

    千次阅读 2020-03-30 15:06:22
    页面中搞一个区域用来scroll列表,所以必须要获取scroll-wrap的高度,于是想尽办法获取swipe、navbarBox的高度 <div v-if="data[column]"> <div class="columnPage" v-for='(item,index) in data' v-show=...
  • <div class="allposition_qw_content" ref="qwcontent" ></div> data() { ...//fullHeight: document.documentElement.clientHeight 屏幕高度 默认值 } }, methods: { changeFixe...
  • 无论iframe中加载的是什么内容,都可以让iframe的高度和内容保持一致,这样就可以不让iframe出现垂直滚动条了 <template> <iframe id="ifra" src="xxx" frameborder="0" class="iframe"></iframe&...
  • Vue 动态设置元素高度

    千次阅读 2021-03-07 07:06:25
    1. Vue文件如下let windowHeight = parseInt(window.innerHeight)export default {data() {return {windowHeight: windowHeight,autoHeight: {height: ''},}},methods: {getHeight() {this.autoHeight.height = ...
  • vue 获取元素高度

    2021-05-12 13:56:25
    <...//获取元素样式值,element 为元素ref="element" var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px //获取元素内联样式值 var heightStyle =this.$refs.elem.
  • 首先监听这个动态元素的变化,在this.$nextTick中获取dom元素,但我获取的时候是不准确的,所以就加了个延时器,就能获取dom元素准确的高度啦 <template> <img ref="bottomBtn" :src=...
  • Vue获取元素高度

    千次阅读 2020-09-17 10:28:09
    <... // 获取可视区域的宽度和高度 this.getEnterBoxStyle() }, methods: { getEnterBoxStyle() { // 页面渲染完成后的回调 this.$nextTick(() => { const viewsWidth = window.getCompu
  • vue 中,动态绑定 style 样式,可以使用:v-bind=: 或者 :style &lt;template&gt; &lt;div class="hello"&gt;  &lt;div :style="contentStyleObj"&gt;&lt;/...
  • 需求:项目中有高度、宽度自适应需求,需要适应不同分辨率的高度及宽度,在不同分辨率下效果区别不会很大 html代码如下: <template> <div id="home"> <div class="head" > <v-head>&...
  • vue 获取属性动态高度

    2021-11-15 13:52:30
    获取属性动态高度需要绑定v-resize="resize" 必须写上: highlight-current-row look_all(){ Vue.directive('resize', { // 指令的名称 bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象 ...
  • 今天老大没安排活干,也不想划水,于是打算用一个websocket写一个简易的...又使用debug调试,发现:vue会先执行你的其它方法,再渲染页面,导致总是只能滑到上一条消息展示的高度。 于是我再百度,发现:重置数据后,获
  • vue获取dom元素高度的方法

    千次阅读 2020-01-02 11:50:40
    本文转载自:...获取高度: <div ref="自定义名称" ></div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mounted() { let h = window.innerH...
  • VUE动态获取浏览器宽高,动态获取元素宽高,动态设置元素的宽高或样式动态获取浏览器宽高动态获取元素宽高动态设置元素的宽高或样式 动态获取浏览器宽高 created(){ window.addEventListener('resize', this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,383
精华内容 4,153
关键字:

vue动态获取元素高度