From 16213c0f85aa3ac8317797bf4a05fd12940e16d3 Mon Sep 17 00:00:00 2001 From: zhangwei <1504152376@qq.com> Date: 星期三, 05 三月 2025 17:29:42 +0800 Subject: [PATCH] - --- src/uni_modules/uview-plus/components/u-image/u-image.vue | 57 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/uni_modules/uview-plus/components/u-image/u-image.vue b/src/uni_modules/uview-plus/components/u-image/u-image.vue index 63936f6..8e462f0 100644 --- a/src/uni_modules/uview-plus/components/u-image/u-image.vue +++ b/src/uni_modules/uview-plus/components/u-image/u-image.vue @@ -2,10 +2,11 @@ <u-transition mode="fade" :show="show" + :style="transStyle" :duration="fade ? 1000 : 0" > <view - class="u-image" + class="u-image box-border" @tap="onClick" :style="[wrapStyle, backgroundStyle]" > @@ -19,9 +20,9 @@ :lazy-load="lazyLoad" class="u-image__image" :style="{ - borderRadius: shape == 'circle' ? '10000px' : addUnit(radius), width: addUnit(width), - height: addUnit(height) + height: addUnit(height), + borderRadius: shape == 'circle' ? '10000px' : addUnit(radius) }" ></image> <view @@ -37,8 +38,6 @@ <slot name="loading"> <u-icon :name="loadingIcon" - :width="width" - :height="height" ></u-icon> </slot> </view> @@ -46,16 +45,12 @@ v-if="showError && isError && !loading" class="u-image__error" :style="{ - borderRadius: shape == 'circle' ? '50%' : addUnit(radius), - width: addUnit(width), - height: addUnit(height) + borderRadius: shape == 'circle' ? '50%' : addUnit(radius) }" > <slot name="error"> <u-icon :name="errorIcon" - :width="width" - :height="height" ></u-icon> </slot> </view> @@ -120,7 +115,6 @@ if (!n) { // 濡傛灉浼犲叆null鎴栬��''锛屾垨鑰協alse锛屾垨鑰卽ndefined锛屾爣璁颁负閿欒鐘舵�� this.isError = true - } else { this.isError = false; this.loading = true; @@ -129,11 +123,46 @@ } }, computed: { + transStyle() { + let style = {}; + // 閫氳繃璋冪敤addUnit()鏂规硶锛屽鏋滄湁鍗曚綅锛屽鐧惧垎姣旓紝px鍗曚綅绛夛紝鐩存帴杩斿洖锛屽鏋滄槸绾补鐨勬暟鍊硷紝鍒欏姞涓妑px鍗曚綅 + // #ifdef APP-NVUE + style.width = addUnit(this.width); + style.height = addUnit(this.height); + // #endif + // #ifndef APP-NVUE + if (this.loading || this.isError || this.width == '100%' || this.mode != 'heightFix') { + style.width = this.width; + } else { + style.width = 'fit-content'; + } + if (this.loading || this.isError || this.height == '100%' || this.mode != 'widthFix') { + style.height = this.height; + } else { + style.height = 'fit-content'; + } + // #endif + return style; + }, wrapStyle() { let style = {}; // 閫氳繃璋冪敤addUnit()鏂规硶锛屽鏋滄湁鍗曚綅锛屽鐧惧垎姣旓紝px鍗曚綅绛夛紝鐩存帴杩斿洖锛屽鏋滄槸绾补鐨勬暟鍊硷紝鍒欏姞涓妑px鍗曚綅 + // #ifdef APP-NVUE style.width = addUnit(this.width); style.height = addUnit(this.height); + // #endif + // #ifndef APP-NVUE + if (this.loading || this.isError || this.width == '100%' || this.mode != 'heightFix') { + style.width = this.width; + } else { + style.width = 'fit-content'; + } + if (this.loading || this.isError || this.height == '100%' || this.mode != 'widthFix') { + style.height = this.height; + } else { + style.height = 'fit-content'; + } + // #endif // 濡傛灉鏄樉绀哄渾褰紝璁剧疆涓�涓緢澶氱殑鍗婂緞鍊煎嵆鍙� style.borderRadius = this.shape == 'circle' ? '10000px' : addUnit(this.radius) // 濡傛灉璁剧疆鍦嗚锛屽繀椤昏鏈塰idden锛屽惁鍒欏彲鑳藉渾瑙掓棤鏁� @@ -156,8 +185,8 @@ methods: { addUnit, // 鐐瑰嚮鍥剧墖 - onClick() { - this.$emit('click') + onClick(e) { + this.$emit('click', e) }, // 鍥剧墖鍔犺浇澶辫触 onErrorHandler(err) { @@ -192,7 +221,7 @@ removeBgColor() { // 娣″叆鍔ㄧ敾杩囨浮瀹屾垚鍚庯紝灏嗚儗鏅缃负閫忔槑鑹诧紝鍚﹀垯png鍥剧墖浼氱湅鍒扮伆鑹茬殑鑳屾櫙 this.backgroundStyle = { - backgroundColor: 'transparent' + backgroundColor: this.bgColor || '#ffffff' }; } } -- Gitblit v1.9.1