在使用Ember的新Glimmer组件之前,我使用了didInsertElement生命周期钩子来计算图像元素的自然宽度。我传递了一个目标宽度,以便在浏览器中调整图像的大小。
didInsertElement() {
this._super(...arguments);
if (this.targetWidth && this.targetWidth < this.element.naturalWidth) {
this.targetHeight = Math.round(this.targetWidth / this.element.naturalWidth * this.element.naturalHeight);
set(this, 'width', this.targetWidth);
set(this, 'height', this.targetHeight);
}
else {
set(this, 'width', this.naturalWidth);
set(this, 'height', this.naturalHeight);
}
对于Glimmer组件,并使用@ember/render-modifier,由父级传入的src:
<img {{did-insert this.calculateDimensions}} src={{@src}} width={{this.width}} height={{this.height}}>
在组件JS文件中
@action
calculateDimensions(element) {
if (this.args.targetWidth && this.args.targetWidth < element.naturalWidth) {
this.height = Math.round(this.args.targetWidth / element.naturalWidth * element.naturalHeight);
this.width = this.args.targetWidth;
}
else {
this.width = element.naturalWidth;
this.height = element.naturalHeight;
}
element.setAttribute("width", this.width);
element.setAttribute("height", this.height);
}
如果您重新加载索引/主页,这一切都可以正常工作。但是,当您第一次到达站点时,图像没有呈现,因为element.naturalWidth的值为零。元素存在,如果将其记录到控制台,我可以看到自然宽度和高度的值。ember-render-modifier {{did-insert}}不是didInsertElement的完全替代吗?
任何帮助都不胜感激。
1条答案
按热度按时间camsedfj1#
我不确定这是否是解决这个问题的“Ember”方法,但我已经使用了load事件:
它解决了这个问题,但我仍然不确定为什么ember-modifier {{did-insert}}不能实现同样的效果--我假设元素被插入到DOM中,因此您能够获得它的naturalWidth和height。