灰烬：在组件中处理窗口调整大小

纽芬兰

我有一个渲染图像的组件，还有一个CSS，用于“悬停蒙版”，然后覆盖了图像，当用户将鼠标悬停在该图像上时，将显示有关该图像的一些信息。

当应用程序首次加载时以及窗口调整大小时，悬停蒙版的尺寸需要与图像的尺寸匹配。

这是基本的标记

<div class="call-out-item">
  <img src="......">
  <div class="hover-mask">Some info about this image</div>
</div>

这是CSS：

.call-out-item {
  position:relative;
  display:none;
}

.call-out-item .hover-mask {
  position:absolute;
  top:0;
  left:0;
}

.call-out-item:hover .hover-mask {
   opacity: .95;
   background: rgba(33,153,232,0.8);
   cursor:pointer;
}

这是我的组件代码（不确定是否正确使用Ember.run.next（！）

// other component code here 

const {$} = Ember;

init() {
  this._super(...arguments);
  this.handleResize = function() {
    let itemWidth = $(".call-out-item img").width();
    let itemHeight = parseInt(itemWidth/1.5);
    $(".hover-mask").css({"width":itemWidth,"height":itemHeight});
  }.bind(this);
  Ember.run.next(this, this.handleResize); 
  $(window).on('resize', Ember.run.bind(this, this.handleResize));
},
// etc etc

我在Chrome和Firefox中使用此代码获取的结果不尽相同，因此在这里一定做错了！

乔丹（Jordan Rumpelstiltskin）Nemrow

确保在销毁组件时取消绑定事件，否则当用户在其他路线上时，事件将继续触发

initResizeObserver: on("init", function () {
  $(window).on('resize', this.handleResize.bind(this));
}),

willDestroyElement () {
  this._super(...arguments);
  $(window).off("resize");
},

handleResize (e) {
  console.log(e)
},

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。