From e13367edf304cb78f978e321f1679299a66b3a23 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 10 Jan 2024 16:08:18 +0800 Subject: [PATCH] fix:地图 --- uni_modules/uview-ui/components/u-image/u-image.vue | 232 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 232 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-image/u-image.vue b/uni_modules/uview-ui/components/u-image/u-image.vue new file mode 100644 index 0000000..473e35b --- /dev/null +++ b/uni_modules/uview-ui/components/u-image/u-image.vue @@ -0,0 +1,232 @@ +<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'; + /** + * Image ������ + * @description ������������uni-app���image������������������������������������������������������������������������������������������������������������������������������������ + * @tutorial https://uviewui.com/components/image.html + * @property {String} src ������������ + * @property {String} mode ������������������������������ ��������� 'aspectFill' ��� + * @property {String | Number} width ������������������������������������������������px������ ��������� '300' ��� + * @property {String | Number} height ������������������������������������������������px������ ��������� '225' ��� + * @property {String} shape ���������������circle-���������square-������ ��������� 'square' ��� + * @property {String | Number} radius ���������������������������������������������������px������ ��������� 0 ��� + * @property {Boolean} lazyLoad ���������������������������������������App������������������������������������������������ ��������� true ��� + * @property {Boolean} showMenuByLongpress ��������������������������������������������������������������������������������� ��������� true ��� + * @property {String} loadingIcon ������������������������������������ ��������� 'photo' ��� + * @property {String} errorIcon ��������������������������������������� ��������� 'error-circle' ��� + * @property {Boolean} showLoading ������������������������������������������������slot ��������� true ��� + * @property {Boolean} showError ���������������������������������������������������slot ��������� true ��� + * @property {Boolean} fade ������������������������ ��������� true ��� + * @property {Boolean} webp ��������������������������������������������������� ��������� false ��� + * @property {String | Number} duration ������fade������������������������������ms ��������� 500 ��� + * @property {String} bgColor ��������������������������������������������������������������������������� (������ '#f3f4f6' ) + * @property {Object} customStyle ��������������������������������� + * @event {Function} click ��������������������� + * @event {Function} error ��������������������������� + * @event {Function} load ��������������������������� + * @example <u-image width="100%" height="300px" :src="src"></u-image> + */ + export default { + name: 'u-image', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + data() { + return { + // ��������������������������������������������������������������� + isError: false, + // ��������������������������������������������� + loading: true, + // ������������������������������������������������ + opacity: 1, + // ���������������������props��������������������������������������������� + durationTime: this.duration, + // ������������������������������������������������������������png������������������������������������ + backgroundStyle: {}, + // ������fade��������������������������������� + show: false + }; + }, + watch: { + src: { + immediate: true, + handler(n) { + if (!n) { + // ������������null������''���������false���������undefined������������������������ + this.isError = true + + } else { + this.isError = false; + this.loading = true; + } + } + } + }, + computed: { + wrapStyle() { + let style = {}; + // ������������addUnit()������������������������������������������px���������������������������������������������������������������rpx������ + 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) + // ���������������������������������hidden��������������������������� + style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible' + // if (this.fade) { + // style.opacity = this.opacity + // // nvue��������������������������������������� + // style.transitionDuration = `${this.durationTime}ms` + // style.transitionTimingFunction = 'ease-in-out' + // style.transitionProperty = 'opacity' + // } + 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) + }, + // ���������������������������loading������ + onLoadHandler(event) { + this.loading = false + this.isError = false + this.$emit('load', event) + this.removeBgColor() + // ��������������������������������������������������������������������������������������������� + // ������������fade������������png��������������������������������������� + // if (!this.fade) return this.removeBgColor(); + // // ������opacity���1(������������������������������������)���������0(���������������������������������������������������������������������)������������1������������������������������ + // this.opacity = 0; + // // ���������������0���������������������������������������������������������������0������������������������������������������duration������������������������������(������) + // // ������������������������������������������ + // this.durationTime = 0; + // // ������50ms���������������������H5��������������������� + // setTimeout(() => { + // this.durationTime = this.duration; + // this.opacity = 1; + // setTimeout(() => { + // this.removeBgColor(); + // }, this.durationTime); + // }, 50); + }, + // ������������������������ + removeBgColor() { + // ������������������������������������������������������������������png������������������������������ + 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> -- Gitblit v1.8.0