vue项目里实时监听某个元素标签宽度的变化，然后执行相应的事件

最新推荐文章于 2024-07-03 09:56:19 发布

LIN-z.

最新推荐文章于 2024-07-03 09:56:19 发布

阅读量487

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lay7889/article/details/130768635

版权

文章介绍了如何在Vue.js中通过局部注册方式定义一个自定义指令`v-resize`，该指令用于监听元素尺寸的变化，并在尺寸改变时触发绑定的方法。当元素大小改变时，`resize`方法会被调用，打印出我变了的信息。

摘要由CSDN通过智能技术生成

局部使用

<template>
  <div class="cus-table" v-resize="resize">
  </div>
</template>

<script>
export default {
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = '',
          height = ''
        function isReize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value() // 关键
          }
          width = style.width
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__)
      },
    },
  },
  data() {
    return {}
  },
  methods：{
	   // 元素发生变化后执行
       resize () {
         console.log('我变了')
       },
  },
}
</script>