✊不积跬步，无以至千里；不积小流，无以成江海。

2021年10月19日

工作重点

1. 资源管理页面样式及功能开发
2. 接入管理页面样式及功能开发

遇到的问题和解决思路

某个元素的高度从固定值变化到auto时，另一个元素也随之变化到相同高度

遇到的问题

当我们点击查看全部数据的时候，需要将左侧部分高度一起变换

但是这样我们遇到一个问题， 如果在点击事件的方法里面获取高度，只能获取到点击状态前的高度 比如：如果是收缩状态，在点击事件结束之后，方法获取的高度是收缩状态的高度

所以，我们需要将获取高度的方法，在点击事件完成之后( dom元素改变之后 )调用

解决思路

1. 获取变换后的蓝色区域高度
2. 将获取的高度赋给红色区域

解决方案

在绑定点击事件的方法里面加入

// 当dom元素渲染完成之后获取高度，否则获取的是点击前元素的高度
this.$nextTick(() => {
    // containerHeight声明在data中
  this.containerHeight = (this.$refs.container[index - 1].offsetHeight - 40) + 'px';
})

然后通过 内联样式 赋值给红色区域的元素

:style="{height: containerHeight}"

个人总结

1. 获取某元素的宽度和高度，例：

<div ref="elementName">某元素</div>

使用方法： this.$refs.elementName.属性

this.$refs.elementName.offsetHeight //获取高度

当多个元素的 ref 值相同时

<div ref="elementName">元素一</div>
<div ref="elementName">元素二</div>
this.$refs.elementName[0].offsetWidth //获取元素一宽度
this.$refs.elementName[1].offsetHeight //获取元素二高度

属性还包括以下：

offsetWidth;    //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight;    //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
clientWidth; //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
clientHeight;    //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
style.width; //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距
style.height;    //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
scrollWidth;    //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
scrollHeigh;    //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同

以上返回值都是 Number 类型，可以进行数值加减后，再拼接 ‘px’ ，然后赋值给某个元素 除此之外还有返回 String 类型，带 px 单位

window.getComputedStyle(this.$refs.elementName).width;
window.getComputedStyle(this.$refs.elementName).height;

1. Vue.nextTick() 的应用

使用场景

1. 就是在vue生命周期creat()创建初始，一定要把对dom的操作放在Vue.nextTick()中
   因为vue在creat阶段并没有任何对页面的渲染，这时候进行的操作没有任何作用，所以需要Vue.nextTick()方法等待vue的dom渲染完成之后渲染

1. vue对页面数据变化的监控操作

通俗的理解是： 更改数据后当你想立即使用js操作新的视图的时候需要使用它 (例如本次需要得到点击事件完成后，蓝色区域的高度) 类似于setTimeout延时应用，具体简单用法就如下面编码一样

this.$nextTick(() => {
  // 方法内容
})

目前开发发现，使用 Vue.nextTick() 无法使用 css3 transition

具体解析有 官方文档