标签：el style vue 自定义 绑定 binding height width 监听

。

这里监听元素宽度变化时为了，实时改变echarts的宽度，顺带把高度也监听一下：

可以在全局注册自定义指令，也可以在组件内注册

这里在组件内注册：

directives:{
      resize: { // 指令的名称
        bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
          console.log(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});  // 关键(这传入的是函数,所以执行此函数)
            }
            width = style.width;
            height = style.height;
          }
          el.__vueSetInterval__ = setInterval(isReize, 300);
        },
        unbind(el) {
          console.log(el,"解绑");
          clearInterval(el.__vueSetInterval__);
        }
      }
    },

和data、mounted同级

页面内绑定：

<div id="overviewChart" v-resize="DomResize"></div>

DomResize方法：

DomResize(data){
        
        let {width,height} = data;
        console.log("width:",width,"height:",height,"   dom尺寸方式改变");
        if(this.myChart){
          this.myChart.resize()
        }
      },

。

标签：el,style,vue,自定义,绑定,binding,height,width,监听
来源： https://www.cnblogs.com/fqh123/p/14078873.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。