@tarojs/components
Version:
Taro 组件库。
163 lines (162 loc) • 4.43 kB
JavaScript
import { Component, Prop, h, Host, State, Event } from '@stencil/core';
import classNames from 'classnames';
import('intersection-observer');
export class Image {
constructor() {
this.mode = 'scaleToFill';
this.lazyLoad = false;
this.nativeProps = {};
this.aspectFillMode = 'width';
}
componentDidLoad() {
if (!this.lazyLoad)
return;
const lazyImg = new IntersectionObserver(entries => {
// 异步 api 关系
if (entries[entries.length - 1].isIntersecting) {
lazyImg.unobserve(this.imgRef);
this.imgRef.src = this.src;
}
}, {
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() {
this.onError.emit();
}
render() {
const { src, mode = 'scaleToFill', lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps } = this;
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 }, lazyLoad ? (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))) : (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, src: src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps)))));
}
static get is() { return "taro-image-core"; }
static get originalStyleUrls() { return {
"$": ["./style/index.scss"]
}; }
static get styleUrls() { return {
"$": ["./style/index.css"]
}; }
static get properties() { return {
"src": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "src",
"reflect": false
},
"mode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Mode",
"resolved": "\"aspectFill\" | \"aspectFit\" | \"bottom left\" | \"bottom right\" | \"bottom\" | \"center\" | \"heightFix\" | \"left\" | \"right\" | \"scaleToFill\" | \"top left\" | \"top right\" | \"top\" | \"widthFix\"",
"references": {
"Mode": {
"location": "local"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "mode",
"reflect": false,
"defaultValue": "'scaleToFill'"
},
"lazyLoad": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "lazy-load",
"reflect": false,
"defaultValue": "false"
},
"nativeProps": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "{}",
"resolved": "{}",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{}"
}
}; }
static get states() { return {
"aspectFillMode": {}
}; }
static get events() { return [{
"method": "onLoad",
"name": "load",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "onError",
"name": "error",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
}