import { addUnit, isDef } from '../common/utils'; import { VantComponent } from '../common/component'; import { button } from '../mixins/button'; import { openType } from '../mixins/open-type'; const FIT_MODE_MAP = { none: 'center', fill: 'scaleToFill', cover: 'aspectFill', contain: 'aspectFit', widthFix: 'widthFix', heightFix: 'heightFix', }; VantComponent({ mixins: [button, openType], classes: ['custom-class', 'loading-class', 'error-class', 'image-class'], props: { src: { type: String, observer() { this.setData({ error: false, loading: true, }); }, }, round: Boolean, width: { type: null, observer: 'setStyle', }, height: { type: null, observer: 'setStyle', }, radius: null, lazyLoad: Boolean, useErrorSlot: Boolean, useLoadingSlot: Boolean, showMenuByLongpress: Boolean, fit: { type: String, value: 'fill', observer: 'setMode', }, showError: { type: Boolean, value: true, }, showLoading: { type: Boolean, value: true, }, }, data: { error: false, loading: true, viewStyle: '', }, mounted() { this.setMode(); this.setStyle(); }, methods: { setMode() { this.setData({ mode: FIT_MODE_MAP[this.data.fit], }); }, setStyle() { const { width, height, radius } = this.data; let style = ''; if (isDef(width)) { style += `width: ${addUnit(width)};`; } if (isDef(height)) { style += `height: ${addUnit(height)};`; } if (isDef(radius)) { style += 'overflow: hidden;'; style += `border-radius: ${addUnit(radius)};`; } this.setData({ viewStyle: style }); }, onLoad(event) { this.setData({ loading: false, }); this.$emit('load', event.detail); }, onError(event) { this.setData({ loading: false, error: true, }); this.$emit('error', event.detail); }, onClick(event) { this.$emit('click', event.detail); }, }, });