123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267 |
- <template>
- <view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
- <image
- v-if="!isError"
- :src="src"
- :mode="mode"
- @error="onErrorHandler"
- @load="onLoadHandler"
- :lazy-load="lazyLoad"
- class="u-image__image"
- :show-menu-by-longpress="showMenuByLongpress"
- :style="{
- borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
- }"
- ></image>
- <view
- v-if="showLoading && loading"
- class="u-image__loading"
- :style="{
- borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius),
- backgroundColor: this.bgColor
- }"
- >
- <slot v-if="$slots.loading" name="loading" />
- <u-icon v-else :name="loadingIcon" :width="width" :height="height"></u-icon>
- </view>
- <view
- v-if="showError && isError && !loading"
- class="u-image__error"
- :style="{
- borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
- }"
- >
- <slot v-if="$slots.error" name="error" />
- <u-icon v-else :name="errorIcon" :width="width" :height="height"></u-icon>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'u-image',
- props: {
-
- src: {
- type: String,
- default: ''
- },
-
- mode: {
- type: String,
- default: 'aspectFill'
- },
-
- width: {
- type: [String, Number],
- default: '100%'
- },
-
- height: {
- type: [String, Number],
- default: 'auto'
- },
-
- shape: {
- type: String,
- default: 'square'
- },
-
- borderRadius: {
- type: [String, Number],
- default: 0
- },
-
- lazyLoad: {
- type: Boolean,
- default: true
- },
-
- showMenuByLongpress: {
- type: Boolean,
- default: true
- },
-
- loadingIcon: {
- type: String,
- default: 'photo'
- },
-
- errorIcon: {
- type: String,
- default: 'error-circle'
- },
-
- showLoading: {
- type: Boolean,
- default: true
- },
-
- showError: {
- type: Boolean,
- default: true
- },
-
- fade: {
- type: Boolean,
- default: true
- },
-
- webp: {
- type: Boolean,
- default: false
- },
-
- duration: {
- type: [String, Number],
- default: 500
- },
-
- bgColor: {
- type: String,
- default: '#f3f4f6'
- }
- },
- data() {
- return {
-
- isError: false,
-
- loading: true,
-
- opacity: 1,
-
- durationTime: this.duration,
-
- backgroundStyle: {}
- };
- },
- watch: {
- src: {
- immediate: true,
- handler (n) {
- if(!n) {
-
- this.isError = true;
- this.loading = false;
- } else {
- this.isError = false;
- }
- }
- }
- },
- computed: {
- wrapStyle() {
- let style = {};
-
- style.width = this.$u.addUnit(this.width);
- style.height = this.$u.addUnit(this.height);
-
- style.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius);
-
- style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible';
- if (this.fade) {
- style.opacity = this.opacity;
- style.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`;
- }
- return style;
- }
- },
- methods: {
-
- onClick() {
- this.$emit('click');
- },
-
- onErrorHandler(err) {
- this.loading = false;
- this.isError = true;
- this.$emit('error', err);
- },
-
- onLoadHandler() {
- this.loading = false;
- this.isError = false;
- this.$emit('load');
-
-
- if (!this.fade) return this.removeBgColor();
-
- this.opacity = 0;
-
-
- this.durationTime = 0;
-
- setTimeout(() => {
- this.durationTime = this.duration;
- this.opacity = 1;
- setTimeout(() => {
- this.removeBgColor();
- }, this.durationTime);
- }, 50);
- },
-
- removeBgColor() {
-
- this.backgroundStyle = {
- backgroundColor: 'transparent'
- };
- }
- }
- };
- </script>
- <style scoped lang="scss">
- @import '../../libs/css/style.components.scss';
- .u-image {
- position: relative;
- transition: opacity 0.5s ease-in-out;
- &__image {
- width: 100%;
- height: 100%;
- }
- &__loading,
- &__error {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- @include vue-flex;
- align-items: center;
- justify-content: center;
- background-color: $u-bg-color;
- color: $u-tips-color;
- font-size: 46rpx;
- }
- }
- </style>
|