@tarojs/components/dist/cjs/taro-image-core.cjs.entry.js

Taro 组件库

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-a7069008.js');
const index$1 = require('./index-b873e40f.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%}.taro-img__mode-aspectfill{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-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{width:100%}.taro-img__mode-bottom{width:100%;position:absolute;bottom:0}.taro-img__mode-left{height:100%}.taro-img__mode-right{height:100%;position:absolute;right:0}.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) {
    index.registerInstance(this, hostRef);
    this.onLoad = index.createEvent(this, "load", 7);
    this.onError = index.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 = index$1.classnames({
      'taro-img__widthfix': mode === 'widthFix'
    });
    const imgCls = index$1.classnames(`taro-img__mode-${mode.toLowerCase().replace(/\s/g, '')}`, {
      [`taro-img__mode-aspectfill--${aspectFillMode}`]: mode === 'aspectFill'
    });
    return (index.h(index.Host, { class: cls }, src ? (index.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;

exports.taro_image_core = Image;