Question

我有一个呈现图像选择的组件，我有一些用于“悬停掩码”的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中使用此代码获得可变结果，因此必须在此处做错事！

Answer 1

这是我的解决方案。其中一个问题（在Firefox中）是上面的代码最初没有计算图像的宽度，所以我现在正在计算父容器的宽度（和高度），并将图像的尺寸设置为宽度的100％和身高。

我仍然认为当我调整窗口大小时会有一些小问题（有谁知道为什么？）但我希望这会有所帮助！

// component code 

import Ember from 'ember';
const {$} = Ember;

export default Ember.Component.extend({
  tagName:'div',
  classNames:[],
  init() {
    this._super(...arguments);
    this.handleResize = function() {
      let itemWidth = parseInt($(".call-out-item").width());
      let itemHeight = parseInt(itemWidth/1.5);
      $(".hover-mask").css({"width":itemWidth,"height":itemHeight});
   };
   Ember.run.next(this, this.handleResize);
   $(window).on('resize', Ember.run.bind(this, this.handleResize));
 },
 // rest of code

Answer 2

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

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

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

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

Ember：处理窗口在组件内调整大小

2 个答案: