vue使用自定义指令监听Dom元素宽高变化

最近做了一个项目，需要表格的高度跟着浏览器的高度变化，页面不会出现滚动条，并且分页器一直在浏览器的底部

表头的搜索框的高度可以伸缩，不是固定的，这就需要监听到搜索框的高度，用浏览器的高度减去搜索框的高度和分页器的高度就是表格的高度了

先自定义监听方法吧，如下：

现在组件内注册

directives方法跟data，methods方法是平级的

需要监听的组件绑定这个方法，这里是监听表头的高度

这时就已经监听到的表头的宽高变化了，就可以拿出来用了

由于组件原因，当页面第一次加载数据量较大的时候，只显示了几条数据。第二次拉口才能正常滚动。组件那边说是因为高度判断的问题，高度不够重新拉一下接口

使用ref获取当前组件每行高度

在这元素就获取完成了，但是在这确踩了一个坑：拉完接口立马获取元素的高度为0，放到nextTick也不顶用，排查很久发现用settimeout延迟获取一下就可以了

原因：元素渲染需要时间，立马获取高度肯定是没有的

就能实现了（虽然有点丑）

在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而 *** 作该dom元素。

以下是个例子：

Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品，这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室，同样也能满足3D自由艺术家。

参与项目：

《阿凡达》《2012》《赤壁》《斯巴达克斯》《死不瞑目》《尸城30夜》《功夫熊猫》《异形大战铁血战士》《微光城市》《神奇四侠》《致命拜访》《冒牌天神》《与王一夜》《老友与钱》《加勒比海盗》《ALAUID》《假结婚》《特种部队》《失落的大陆》《终结者》《坠入地狱》《Dragonball Evolution》《女同志吸血鬼杀手》《爱丽丝梦游仙境》《诸神之战》《驯龙记》《狼人》《闰年》《可爱的骨头》《魔法奇幻秀》《美少女特工队》《吉诺密欧与朱丽叶》《纳尼亚传奇》《猫头鹰王国》《歪小子斯科特》《卑鄙的我》《最后的风之子》《怪物史瑞克》《波斯王子》《饥饿游戏》《地心历险记》《雨果》《亚瑟圣诞》《丁丁历险记》《惊天战神》《超级8》《雷神》《大战外星人》《本杰明·巴顿奇事》《马达加斯加》《澳洲乱世情》《空中杀手》《夺宝奇兵》《奇幻精灵事件簿》

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误，

这时候可以在 mounted 里用 $refs 来获取样式，并进行更改：

<template>

<div style="display: block;" ref="abc">

<!-- -->

</div>

</template>

<script>

export default {

mounted () {

consolelog(this$refsabcstylecssText)

}

}

</script>

结果是 display: block;

如果我们给一个div设定全屏背景图，就需要获取屏幕高度进行赋值:

<template>

<div ref="nana">

<!-- -->

</div>

</template>

<script>export default {

mounted () {

let w = windowinnerWidth || documentdocumentElementclientWidth || documentbodyclientWidth;

let h = windowinnerHeight || documentdocumentElementclientHeight || documentbodyclientHeight;

this$refsnanastyleheight = h +'px';

}

}

使用过CSS transition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的；那么如何才能实现元素高度的改变动画效果呢？ 本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。

要实现高度的改变动画，我们需要在动画进行之前为元素设置准确的高度。

当元素由可见变为隐藏状态时，我们需要先获取元素的计算高度，将其设置到style属性上，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为0，这样高度的改变动画就会正常进行。

当元素由隐藏变为可见状态时，我们需要先将高度设置为auto，然后获取元素的计算高度，再将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为计算高度，这样高度的改变动画就会正常进行。

现在，根据以上实现原理分析，我们创建一个高度的改变动画通用组件CollapseTransitionvue。该组件非常简单，仅需30多行代码。我几乎每行代码都有注释，大家应该能看懂吧？

以上就是实现高度的改变动画的通用组件源码，童鞋们理解了吗？是不是非常简单？现在，我们实现折叠面板组件。使用过element-ui这样的UI库的童鞋们应该都知道，折叠面板是由两个组件折叠面板Collapse和折叠面板项CollapseItem组合而成；

现在，我们先实现CollapseItemvue组件。为了节省篇幅，我将源码中的空行全部去掉了，缩进比较规范，自认为可读性还行；源码如下，一共30多行，我直接在源码中添加了注释，就不过多解释了。

这是CollapseItemvue组件的样式。

现在，我们实现Collapsevue组件。该组件仍然只有30多行，大家理解起来应该很轻松，我就直接在源码里添加注释作为讲解了；

以上就是折叠面板组件的实现。包括折叠动画组件，一共仅需不到150行代码，是不是非常简单？童鞋们都理解了吗？不管有什么疑问，童鞋们都可以问我。感谢阅读！

首先我们来看一下官方的实际例子，不过该代码整体封装比较强，可能对于初学者来说有点难度，具体代码如下：

'use strict'

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

Image,

TouchableOpacity,

ScrollView,

} from 'react-native'

var NUM_ITEMS = 20;

var PerfectProject = ReactcreateClass({

Statics: {

titles: '<ScrollView>',

description: 'Component that enable scrolling through child component',

},

makeItems: function(nItems: number, styles) : Array<any> {

var items = [];

for (var i=0;i<nItems;i++){

items[i] = (

<TouchableOpacity key={i} style={styles}>

<Text style={{fontSize:20 }}>{'Item text' + i}</Text>

</TouchableOpacity>

);

}

return items;

},

render: function(){

var items = thismakeItems(NUM_ITEMS,stylesitemWrapper);

items[4] = (

<ScrollView key={'ScrollView'} horizontal={true}>

{thismakeItems(NUM_ITEMS,[stylesitemWrapper,styleshorizontalItemWrapper])}

</ScrollView>

);

var verticalScrollView=(

<ScrollView style={stylesverticalScrollView}>

{items}

</ScrollView>

);

return verticalScrollView;

},

});

var styles = StyleSheetcreate({

itemWrapper: {

backgroundColor: '#dddddd',

alignItems: 'center',

borderWidth: 5,

borderColor: 'red',

borderRadius: 5,

padding: 30,

margin: 5,

},

horizontalItemWrapper: {

padding: 50,

},

verticalScrollView:{

backgroundColor: 'aquamarine',

margin: 10,

},

});

一、问题引入

原项目把一块内容直接写在了模块中（浏览器显示的一整个页面），现在想把它提成一个单独组件，而且把其中使用 documentgetElementById('id') 改为 ref 获取元素的形式。

单独创建一个 vue 组件，通过绑定传值，触发页面变化从而触发 beforeUpdate 。

然后发现 beforeUpdate() 中根本获取不到此元素，用原生js获取也不行。

三、解决

1、 beforeUpdate() 生命周期函数中，在获取元素语句外套用 this$nextTick(function(){}) 。（ mounted 无效，原因待查明）

官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。

以上就是关于vue使用自定义指令监听Dom元素宽高变化全部的内容，包括:vue使用自定义指令监听Dom元素宽高变化、vue项目遇到的奇葩需求、vue怎么获取dom元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！