blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-21 05:49:16 +08:00
Code Issues Projects Releases Wiki Activity

fix(Image): lazy-load prop not work

Browse Source
This commit is contained in:
chenjiahan 2020-11-30 20:58:02 +08:00
parent c96a75ac38
commit 0ba8187bf5
1 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/image/index.tsx
View File

@ -1,4 +1,12 @@
import { ref, watch, computed, PropType, CSSProperties } from 'vue'; import {
ref,
watch,
computed,
PropType,
CSSProperties,
onBeforeUnmount,
getCurrentInstance,
} from 'vue';
import { isDef, addUnit, inBrowser, createNamespace } from '../utils'; import { isDef, addUnit, inBrowser, createNamespace } from '../utils';
import Icon from '../icon'; import Icon from '../icon';
@ -42,6 +50,9 @@ export default createComponent({
const loading = ref(true); const loading = ref(true);
const imageRef = ref<HTMLElement>(); const imageRef = ref<HTMLElement>();
// TODO: types
const { $Lazyload } = getCurrentInstance()!.proxy as any;
const style = computed(() => { const style = computed(() => {
const style: CSSProperties = {}; const style: CSSProperties = {};
@ -69,12 +80,12 @@ export default createComponent({
} }
); );
const onLoad = (event: Event) => { const onLoad = (event?: Event) => {
loading.value = false; loading.value = false;
emit('load', event); emit('load', event);
}; };
const onError = (event: Event) => { const onError = (event?: Event) => {
error.value = true; error.value = true;
loading.value = false; loading.value = false;
emit('error', event); emit('error', event);
@ -139,6 +150,28 @@ export default createComponent({
); );
}; };
const onLazyLoaded = ({ el }: { el: HTMLElement }) => {
if (el === imageRef.value && loading.value) {
onLoad();
}
};
const onLazyLoadError = ({ el }: { el: HTMLElement }) => {
if (el === imageRef.value && !error.value) {
onError();
}
};
if ($Lazyload && inBrowser) {
$Lazyload.$on('loaded', onLazyLoaded);
$Lazyload.$on('error', onLazyLoadError);
onBeforeUnmount(() => {
$Lazyload.$off('loaded', onLazyLoaded);
$Lazyload.$off('error', onLazyLoadError);
});
}
return () => ( return () => (
<div class={bem({ round: props.round })} style={style.value}> <div class={bem({ round: props.round })} style={style.value}>
{renderImage()} {renderImage()}
@ -147,37 +180,4 @@ export default createComponent({
</div> </div>
); );
}, },
// TODO: lazyLoad
// created() {
// const { $Lazyload } = this;
// if ($Lazyload && inBrowser) {
// $Lazyload.$on('loaded', this.onLazyLoaded);
// $Lazyload.$on('error', this.onLazyLoadError);
// }
// },
// beforeUnmount() {
// const { $Lazyload } = this;
// if ($Lazyload) {
// $Lazyload.$off('loaded', this.onLazyLoaded);
// $Lazyload.$off('error', this.onLazyLoadError);
// }
// },
// methods: {
// onLazyLoaded({ el }) {
// if (el === this.$refs.image && this.loading) {
// this.onLoad();
// }
// },
// onLazyLoadError({ el }) {
// if (el === this.$refs.image && !this.error) {
// this.onError();
// }
// },
// },
}); });