Vue监听元素高度变化（自定义指令）

实际需要

在前端项目的某一个列表页中，一般情况下，列表的高度是根据界面高度再减去搜索栏高度，但是用户可能需要搜索栏可以进行一个动态的添加，那么当搜索栏的内容进行了换行后，就会涉及到一个搜索栏一个高度上的变化。但是现有方法中并没有对元素进行监听的方法，所以就需要自行定义。

解决方案

Vue中有个属性directive，是指Vue自定义指令，与methods等属性平级。我们只需要自行定义一个监听元素高度的方法，并且通过自定义指令将其绑定到对应元素上，此时就可以实现监听元素的高度变化，做到布局上的自适应。

具体代码

<div id='app'>
	<div v-resize="divResize"></div>
</div>

<script type="text/javascript">
var app = new Vue({
	el:"#app",
    data(){
    	return {}
	},
	methods: {
		divResize(data){
			console.log("resizeData:",data}
		}
	},
	directives: {
		// 自定义指令名称
		resize: {
			// 绑定时调用
			bind(el, binding){
				let height = ""
				function isResize(){
					// 可根据需求，调整内部代码，利用binding.value返回即可
					const style = document.defaultView.getComputedStyle(el)
					if(height !== style.height){
						// 此处关键代码，通过此处代码将数据进行返回，从而做到自适应
						binding.value({height: style.height}) 
					}
					height = style.height
				}
				// 设置调用函数的延时，间隔过短会消耗过多资源
				el.__vueSetInterval__ = setInterval(isResize, 100)
			},
			unbind(el){
				clearInterval(el.__vueSetInterval__)
			}
		}
	}
});
</script>