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