@tarojs/components
Version:
59 lines (55 loc) • 3.16 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-5e431bb8.js';
import { c as classnames } from './index-b9522531.js';
const indexCss = "img[src=\"\"]{opacity:0}taro-image-core{width:320px;height:240px;font-size:0;display:inline-block;position:relative;overflow:hidden}.taro-img.taro-img__widthfix{height:100%}.taro-img__mode-scaletofill{width:100%;height:100%}.taro-img__mode-aspectfit{max-width:100%;max-height:100%;position:absolute;top:50%;transform:translateY(-50%)}.taro-img__mode-aspectfill{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.taro-img__mode-aspectfill--width{min-width:100%;height:100%}.taro-img__mode-aspectfill--height{width:100%;min-height:100%}.taro-img__mode-widthfix{width:100%}.taro-img__mode-heightfix{height:100%}.taro-img__mode-top{position:absolute;left:50%;transform:translate(-50%)}.taro-img__mode-bottom{position:absolute;bottom:0;left:50%;transform:translate(-50%)}.taro-img__mode-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.taro-img__mode-left{position:absolute;top:50%;transform:translateY(-50%)}.taro-img__mode-right{position:absolute;top:50%;right:0;transform:translateY(-50%)}.taro-img__mode-topright{position:absolute;right:0}.taro-img__mode-bottomleft{position:absolute;bottom:0}.taro-img__mode-bottomright{position:absolute;bottom:0;right:0}";
const Image = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.onLoad = createEvent(this, "load", 7);
this.onError = createEvent(this, "error", 7);
this.src = undefined;
this.mode = 'scaleToFill';
this.lazyLoad = false;
this.nativeProps = {};
this.aspectFillMode = 'width';
this.didLoad = false;
}
componentDidLoad() {
if (!this.lazyLoad)
return;
const lazyImg = new IntersectionObserver(entries => {
// 异步 api 关系
if (entries[entries.length - 1].isIntersecting) {
lazyImg.unobserve(this.imgRef);
this.didLoad = true;
}
}, {
rootMargin: '300px 0px'
});
lazyImg.observe(this.imgRef);
}
imageOnLoad() {
const { width, height, naturalWidth, naturalHeight } = this.imgRef;
this.onLoad.emit({
width,
height
});
this.aspectFillMode = naturalWidth > naturalHeight ? 'width' : 'height';
}
imageOnError(e) {
this.onError.emit(e);
}
render() {
const { src, lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps, didLoad } = this;
// mode="" 按默认值处理
const mode = this.mode || 'scaleToFill';
const cls = classnames({
'taro-img__widthfix': mode === 'widthFix'
});
const imgCls = classnames(`taro-img__mode-${mode.toLowerCase().replace(/\s/g, '')}`, {
[`taro-img__mode-aspectfill--${aspectFillMode}`]: mode === 'aspectFill'
});
return (h(Host, { class: cls }, src ? (h("img", Object.assign({ ref: (img) => (this.imgRef = img), class: imgCls, src: lazyLoad && !didLoad ? undefined : src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))) : ''));
}
};
Image.style = indexCss;
export { Image as taro_image_core };