vue 监听元素大小改变

五维国度 • 2022年 12月 7日上午11:16 • VUE • 阅读 70

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div id="resize"   v-resize="onDomeResize">{{ msg }}</div>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        msg: '我是参数洒洒水',
      }
    },
    // 自定义指令
    directives:{
	// 监听元素大小变化
	resize:{
		bind(el,binding){ // el 为绑定元素， binding 为绑定给指令的对象
			let width = '', height = '';
			function isResize(){
				const style = document.defaultView.getComputedStyle(el);
				let styleWidth = +(style.width).replace('px','');
				let styleHeight = +(style.height).replace('px','');
				if(width !== styleWidth || height !== styleHeight){
					// 关键(这传⼊的是函数,所以执⾏此函数)
					binding.value({el:el,width: styleWidth, height: styleHeight});
				}
				width = styleWidth;
				height = styleHeight;
			}
			el.__vueSetInterval__ = setInterval(isResize,300);
		},
		unbind(el) {
			console.log(el,'解绑')
			clearTimeout(el.__vueSetInterval__);
		}
	},
    },
    methods: {
      onDomeResize(data) {
        console.log(data)
      },
    }
  })
</script>
</body>
<style>
    #resize{
        width:100px;
        height:100px;
        background:blue;
        display: inline-block;
    }

</style>
</html>

本资源由随笔博客发布。发布者：五维国度，转载请注明出处：http://blog.suibi.site/archives/4323

本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。