@gmcb/uv-ui 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -3,23 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.3.4](http://10.10.10.16/caoben/front-end/compare/@gmcb/uv-ui@0.3.3...@gmcb/uv-ui@0.3.4) (2026-07-02)
-
-**Note:** Version bump only for package @gmcb/uv-ui
-
-
-
-
-
-## [0.3.3](http://10.10.10.16/caoben/front-end/compare/@gmcb/uv-ui@0.3.2...@gmcb/uv-ui@0.3.3) (2026-06-23)
-
-**Note:** Version bump only for package @gmcb/uv-ui
-
-
-
-
-
-## [0.3.2](http://10.10.10.16/caoben/front-end/compare/@gmcb/uv-ui@0.3.1...@gmcb/uv-ui@0.3.2) (2026-06-15)
+## [0.3.6](http://10.10.10.16/caoben/front-end-tools/compare/@gmcb/uv-ui@0.3.5...@gmcb/uv-ui@0.3.6) (2026-11-09)
 
 **Note:** Version bump only for package @gmcb/uv-ui
 
@@ -28,6 +12,40 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [0.3.5](http://10.10.10.16/caoben/front-end/compare/@gmcb/uv-ui@0.3.4...@gmcb/uv-ui@0.3.5) (2026-07-02)
+
+**Note:** Version bump only for package @gmcb/uv-ui
+
+
+
+
+
+
+## [0.3.4](http://10.10.10.16/caoben/front-end/compare/@gmcb/uv-ui@0.3.3...@gmcb/uv-ui@0.3.4) (2026-07-02)
+
+**Note:** Version bump only for package @gmcb/uv-ui
+
+
+
+
+
+## [0.3.3](http://10.10.10.16/caoben/front-end/compare/@gmcb/uv-ui@0.3.2...@gmcb/uv-ui@0.3.3) (2026-06-23)
+
+**Note:** Version bump only for package @gmcb/uv-ui
+
+
+
+
+
+## [0.3.2](http://10.10.10.16/caoben/front-end/compare/@gmcb/uv-ui@0.3.1...@gmcb/uv-ui@0.3.2) (2026-06-15)
+
+**Note:** Version bump only for package @gmcb/uv-ui
+
+
+
+
+
+
 ## [0.3.1](http://10.10.10.16/caoben/front-end/compare/@gmcb/uv-ui@0.2.27...@gmcb/uv-ui@0.3.1) (2026-05-31)
 
 **Note:** Version bump only for package @gmcb/uv-ui

package/README.md

@@ -1,6 +1,6 @@
 # @gmcb/uv-ui
 
-基于 uv-ui 的 uni-app 多端 UI 组件包，包含组件、主题样式、工具函数和 `$uv` 全局能力。
+基于 uv-ui 的 uni-app 多端 UI 组件包，包含 `uv-*` 组件、主题样式、工具函数、请求实例和 `$uv` 全局能力。
 
 ## 安装
 
@@ -35,7 +35,7 @@ export function createApp() {
 
 ## easycom 配置
 
-建议在 `pages.json` 中配置 easycom，组件即可在页面中直接使用：
+在 `pages.json` 中配置 easycom 后，组件可在页面中直接使用：
 
 ```json
 {
@@ -48,71 +48,17 @@ export function createApp() {
 }
 ```
 
-使用示例：
-
-```html
-<template>
-  <uv-button type="primary">提交</uv-button>
-  <uv-icon name="search" size="24"></uv-icon>
-</template>
+```vue
+<uv-button type="primary">提交</uv-button>
+<uv-icon name="search" size="24" />
 ```
 
 ## 全局能力
 
-注册后会向 `uni.$uv` 注入常用工具：
-
-| 能力 | 说明 |
-| --- | --- |
-| `uni.$uv.http` | 基于 `luch-request` 的请求实例。 |
-| `uni.$uv.route` | 路由跳转封装。 |
-| `uni.$uv.config` | uv-ui 配置。 |
-| `uni.$uv.debounce` / `uni.$uv.throttle` | 防抖与节流。 |
-| `uni.$uv.test` | 常用校验方法。 |
-| `uni.$uv.colorGradient`、`hexToRgb`、`rgbToHex` | 颜色工具。 |
-| `uni.$uv.platform` | 平台判断工具。 |
-| `uni.$uv.compress` | 压缩工具。 |
-
-Vue 3 项目中也可通过组件实例访问 `$uv`。
-
-## 组件目录
-
-组件位于 `components/uv-*`，常用组件包括：
-
-- `uv-button`
-- `uv-icon`
-- `uv-form`
-- `uv-input`
-- `uv-popup`
-- `uv-modal`
-- `uv-tabs`
-- `uv-navbar`
-- `uv-upload`
-- `uv-calendar`
-- `uv-datetime-picker`
-- `uv-swiper`
-- `uv-list`
-- `uv-cell`
-- `uv-toast`
-
-更多组件可查看 `components` 目录或 uv-ui 官方文档。
-
-## 参考链接
-
-- [本包文档入口](./docs/index.md)
-- [uv-ui 官方文档](https://www.uvui.cn)
-- [uv-ui 演示地址](https://h5.uvui.cn)
-- [uv-ui 更新日志](https://www.uvui.cn/components/changelog.html)
-
-## 本地文档
-
-```bash
-pnpm -C packages/uv-ui run docs:dev
-pnpm -C packages/uv-ui run docs:build
-pnpm -C packages/uv-ui run docs:preview
-```
+注册后可通过 `uni.$uv` 使用请求、路由、配置、防抖/节流、校验、颜色、平台判断、压缩等工具；Vue 3 项目中也可通过组件实例访问 `$uv`。完整 API 见 [docs/api/index.md](docs/api/index.md)。
 
-## 注意事项
+## 文档
 
-- 本包面向 uni-app 多端项目，组件依赖 uni-app 运行环境。
-- 小程序端如需分享 mixin，可在注册时传入对应选项，具体行为以 `index.js` 为准。
-- 修改组件或主题后，请在示例项目中至少验证 H5 和目标小程序/App 平台。
+- 本包完整文档入口：[docs/index.md](docs/index.md)
+- [uv-ui 官方文档](https://www.uvui.cn)、[演示地址](https://h5.uvui.cn)、[更新日志](https://www.uvui.cn/components/changelog.html)
+- 开发与验证约定：[AGENTS.md](AGENTS.md)

package/components/uv-alert/props.js

@@ -40,6 +40,16 @@ export default {
 			type: [String, Number],
 			default: 14
 		},
+		// 图标大小
+		iconSize: {
+			type: [String, Number],
+			default: 18
+		},
+		// 关闭按钮图标大小
+		closeSize: {
+			type: [String, Number],
+			default: 15
+		},
 		...uni.$uv?.props?.alert
 	}
 }

package/components/uv-alert/uv-alert.vue

@@ -15,7 +15,7 @@
 			>
 				<uv-icon
 				    :name="iconName"
-				    size="18"
+				    :size="$uv.addUnit(iconSize)"
 				    :color="iconColor"
 				></uv-icon>
 			</view>
@@ -52,7 +52,7 @@
 				<uv-icon
 				    name="close"
 				    :color="iconColor"
-				    size="15"
+				    :size="$uv.addUnit(closeSize)"
 				></uv-icon>
 			</view>
 		</view>
@@ -76,6 +76,8 @@
 	 * @property {String}			effect      多图时，图片缩放裁剪的模式  （默认 'light' ）
 	 * @property {Boolean}			center		文字是否居中  （默认 false ）
 	 * @property {String | Number}	fontSize    字体大小  （默认 14 ）
+	 * @property {String | Number}	iconSize    图标大小  （默认 18 ）
+	 * @property {String | Number}	closeSize   关闭按钮图标大小  （默认 15 ）
 	 * @property {Object}			customStyle	定义需要用到的外部样式
 	 * @event    {Function}        click       点击组件时触发
 	 * @event    {Function}        close       关闭组件时触发

package/components/uv-image/uv-image.vue

@@ -1,296 +1,296 @@
-<template>
-	<view :style="viewStyle">
-    <uv-transition
-    	:show="show"
-    	mode="fade"
-    	:duration="fade ? duration : 0"
-    	:cell-child="cellChild"
-			:custom-style="wrapStyle"
-    >
-    	<view
-    		class="uv-image"
-    		:class="[`uv-image--${elIndex}`]"
-    		@tap="onClick"
-    		:style="[wrapStyle, backgroundStyle]"
-    	>
-    		<image
-    			v-if="!isError && observeShow"
-    			:src="imageUrl"
-    			:mode="mode"
-    			@error="onErrorHandler"
-    			@load="onLoadHandler"
-    			:show-menu-by-longpress="showMenuByLongpress"
-    			:lazy-load="lazyLoad"
-    			class="uv-image__image"
-    			:style="[imageStyle]"
-    			:webp="webp"
-    		></image>
-    		<view
-    			v-if="showLoading && loading"
-    			class="uv-image__loading"
-    			:style="{
-    				borderRadius: shape == 'circle' ? '50%' : $uv.addUnit(radius),
-    				backgroundColor: bgColor,
-    				width: $uv.addUnit(width),
-    				height: $uv.addUnit(height)
-    			}"
-    		>
-    			<slot name="loading">
-    				<uv-icon
-    					:name="loadingIcon"
-    					:width="width"
-    					:height="height"
-    				></uv-icon>
-    			</slot>
-    		</view>
-    		<view
-    			v-if="showError && isError && !loading"
-    			class="uv-image__error"
-    			:style="{
-    				borderRadius: shape == 'circle' ? '50%' : $uv.addUnit(radius),
-    				width: $uv.addUnit(width),
-    				height: $uv.addUnit(height)
-    			}"
-    		>
-    			<slot name="error">
-    				<uv-icon
-    					:name="errorIcon"
-    					:width="width"
-    					:height="height"
-    				></uv-icon>
-    			</slot>
-    		</view>
-    	</view>
-    </uv-transition>
-  </view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-	/**
-	 * Image 图片
-	 * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
-	 * @tutorial https://www.uvui.cn/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  		定义需要用到的外部样式
-	 * @property {Boolean}		compress  		是否压缩图片，默认true
-	 * @event {Function}	click	点击图片时触发
-	 * @event {Function}	error	图片加载失败时触发
-	 * @event {Function} load 图片加载成功时触发
-	 * @example <uv-image width="100%" height="300px" :src="src"></uv-image>
-	 */
-	export default {
-		name: 'uv-image',
-		emits: ['click','load','error'],
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				// 图片是否加载错误，如果是，则显示错误占位图
-				isError: false,
-				// 初始化组件时，默认为加载中状态
-				loading: true,
-				// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
-				backgroundStyle: {},
-				// 用于fade模式的控制组件显示与否
-				show: false,
-				// 是否开启图片出现在可视范围进行加载（另一种懒加载）
-				observeShow: !this.observeLazyLoad,
-				elIndex: '',
-				// 因为props的值无法修改，故需要一个中间值
-				imgWidth: this.width,
-				// 因为props的值无法修改，故需要一个中间值
-				imgHeight: this.height,
-				thresholdValue: 50
-			};
-		},
-		watch: {
-			src: {
-				immediate: true,
-				handler(n) {
-					if (!n) {
-						// 如果传入null或者''，或者false，或者undefined，标记为错误状态
-						this.isError = true
-					} else {
-						this.isError = false;
-						this.loading = true;
-					}
-				}
-			},
-			width(newVal){
-				// 这样做的目的是避免在更新时候，某些平台动画会恢复关闭状态
-				this.show = false;
-				this.$uv.sleep(2).then(res=>{
-					this.show = true;
-				});
-				this.imgWidth = newVal;
-			},
-			height(newVal){
-				// 这样做的目的是避免在更新时候，某些平台动画会恢复关闭状态
-				this.show = false;
-				this.$uv.sleep(2).then(res=>{
-					this.show = true;
-				});
-				this.imgHeight = newVal;
-			}
-		},
-		computed: {
-			wrapStyle() {
-				const style = {};
-        // 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
-        if(this.mode !== 'heightFix') {
-					style.width = this.$uv.addUnit(this.imgWidth);
-				}
-				if(this.mode !== 'widthFix') {
-					style.height = this.$uv.addUnit(this.imgHeight);
-				}
-				// 如果是显示圆形，设置一个很多的半径值即可
-				style.borderRadius = this.shape == 'circle' ? '10000px' : this.$uv.addUnit(this.radius)
-				// 如果设置圆角，必须要有hidden，否则可能圆角无效
-				style.overflow = 'hidden';
-				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
-			},
-      viewStyle({ wrapStyle }) {
-        const { width, height } = wrapStyle;
-        return {
-          width,
-          height,
-        };
-      },
-			imageStyle({ imgWidth, imgHeight }) {
-				return {
-					width: this.$uv.addUnit(imgWidth),
-					height: this.$uv.addUnit(imgHeight),
-				}
-			},
-			imageUrl({ src, imageStyle, compress }) {
-				return compress && uni.$uv.compress ? uni.$uv.compress.image(src, imageStyle) : src;
-			},
-		},
-		created() {
-			this.elIndex = this.$uv.guid();
-			this.observer = {}
-			this.observerName = 'lazyLoadContentObserver'
-		},
-		mounted() {
-			this.show = true;
-			this.$nextTick(()=>{
-				if(this.observeLazyLoad) this.observerFn();
-			})
-		},
-		methods: {
-			// 点击图片
-			onClick() {
-				this.$emit('click')
-			},
-			// 图片加载失败
-			onErrorHandler(err) {
-				this.loading = false
-				this.isError = true
-				this.$emit('error', err)
-			},
-			// 图片加载完成，标记loading结束
-			onLoadHandler(event) {
-				if(this.mode == 'widthFix') this.imgHeight = 'auto'
-				if(this.mode == 'heightFix') this.imgWidth = 'auto'
-				this.loading = false
-				this.isError = false
-				this.$emit('load', event)
-				this.removeBgColor()
-			},
-			// 移除图片的背景色
-			removeBgColor() {
-				// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
-				this.backgroundStyle = {
-					backgroundColor: 'transparent'
-				};
-			},
-			// 观察图片是否在可见视口
-			observerFn(){
-				// 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载
-				this.$nextTick(() => {
-					uni.$once('onLazyLoadReachBottom', () => {
-						if (!this.observeShow) this.observeShow = true
-					})
-				})
-				setTimeout(() => {
-					// #ifndef APP-NVUE
-					this.disconnectObserver(this.observerName)
-					const contentObserver = uni.createIntersectionObserver(this)
-					contentObserver.relativeToViewport({
-						bottom: this.thresholdValue
-					}).observe(`.uv-image--${this.elIndex}`, (res) => {
-						if (res.intersectionRatio > 0) {
-							// 懒加载状态改变
-							this.observeShow = true
-							// 如果图片已经加载，去掉监听，减少性能消耗
-							this.disconnectObserver(this.observerName)
-						}
-					})
-					this[this.observerName] = contentObserver
-					// #endif
-					// #ifdef APP-NVUE
-					this.observeShow = true;
-					// #endif
-				}, 50)
-			},
-			disconnectObserver(observerName) {
-				const observer = this[observerName]
-				observer && observer.disconnect()
-			}
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/css/components.scss';
-	@import '../../libs/css/color.scss';
-	$uv-image-error-top:0px !default;
-	$uv-image-error-left:0px !default;
-	$uv-image-error-width:100% !default;
-	$uv-image-error-hight:100% !default;
-	$uv-image-error-background-color:$uv-bg-color !default;
-	$uv-image-error-color:$uv-tips-color !default;
-	$uv-image-error-font-size: 46rpx !default;
-
-	.uv-image {
-		position: relative;
-		transition: opacity 0.5s ease-in-out;
-
-		&__image {
-			width: 100%;
-			height: 100%;
-		}
-
-		&__loading,
-		&__error {
-			position: absolute;
-			top: $uv-image-error-top;
-			left: $uv-image-error-left;
-			width: $uv-image-error-width;
-			height: $uv-image-error-hight;
-			@include flex;
-			align-items: center;
-			justify-content: center;
-			background-color: $uv-image-error-background-color;
-			color: $uv-image-error-color;
-			font-size: $uv-image-error-font-size;
-		}
-	}
-</style>
+<template>
+	<view :style="viewStyle">
+    <uv-transition
+    	:show="show"
+    	mode="fade"
+    	:duration="fade ? duration : 0"
+    	:cell-child="cellChild"
+			:custom-style="wrapStyle"
+    >
+    	<view
+    		class="uv-image"
+    		:class="[`uv-image--${elIndex}`]"
+    		@tap="onClick"
+    		:style="[wrapStyle, backgroundStyle]"
+    	>
+    		<image
+    			v-if="!isError && observeShow"
+    			:src="imageUrl"
+    			:mode="mode"
+    			@error="onErrorHandler"
+    			@load="onLoadHandler"
+    			:show-menu-by-longpress="showMenuByLongpress"
+    			:lazy-load="lazyLoad"
+    			class="uv-image__image"
+    			:style="[imageStyle]"
+    			:webp="webp"
+    		></image>
+    		<view
+    			v-if="showLoading && loading"
+    			class="uv-image__loading"
+    			:style="{
+    				borderRadius: shape == 'circle' ? '50%' : $uv.addUnit(radius),
+    				backgroundColor: bgColor,
+    				width: $uv.addUnit(width),
+    				height: $uv.addUnit(height)
+    			}"
+    		>
+    			<slot name="loading">
+    				<uv-icon
+    					:name="loadingIcon"
+    					:width="width"
+    					:height="height"
+    				></uv-icon>
+    			</slot>
+    		</view>
+    		<view
+    			v-if="showError && isError && !loading"
+    			class="uv-image__error"
+    			:style="{
+    				borderRadius: shape == 'circle' ? '50%' : $uv.addUnit(radius),
+    				width: $uv.addUnit(width),
+    				height: $uv.addUnit(height)
+    			}"
+    		>
+    			<slot name="error">
+    				<uv-icon
+    					:name="errorIcon"
+    					:width="width"
+    					:height="height"
+    				></uv-icon>
+    			</slot>
+    		</view>
+    	</view>
+    </uv-transition>
+  </view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * Image 图片
+	 * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+	 * @tutorial https://www.uvui.cn/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  		定义需要用到的外部样式
+	 * @property {Boolean}		compress  		是否压缩图片，默认true
+	 * @event {Function}	click	点击图片时触发
+	 * @event {Function}	error	图片加载失败时触发
+	 * @event {Function} load 图片加载成功时触发
+	 * @example <uv-image width="100%" height="300px" :src="src"></uv-image>
+	 */
+	export default {
+		name: 'uv-image',
+		emits: ['click','load','error'],
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				// 图片是否加载错误，如果是，则显示错误占位图
+				isError: false,
+				// 初始化组件时，默认为加载中状态
+				loading: true,
+				// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+				backgroundStyle: {},
+				// 用于fade模式的控制组件显示与否
+				show: false,
+				// 是否开启图片出现在可视范围进行加载（另一种懒加载）
+				observeShow: !this.observeLazyLoad,
+				elIndex: '',
+				// 因为props的值无法修改，故需要一个中间值
+				imgWidth: this.width,
+				// 因为props的值无法修改，故需要一个中间值
+				imgHeight: this.height,
+				thresholdValue: 50
+			};
+		},
+		watch: {
+			src: {
+				immediate: true,
+				handler(n) {
+					if (!n) {
+						// 如果传入null或者''，或者false，或者undefined，标记为错误状态
+						this.isError = true
+					} else {
+						this.isError = false;
+						this.loading = true;
+					}
+				}
+			},
+			width(newVal){
+				// 这样做的目的是避免在更新时候，某些平台动画会恢复关闭状态
+				this.show = false;
+				this.$uv.sleep(2).then(res=>{
+					this.show = true;
+				});
+				this.imgWidth = newVal;
+			},
+			height(newVal){
+				// 这样做的目的是避免在更新时候，某些平台动画会恢复关闭状态
+				this.show = false;
+				this.$uv.sleep(2).then(res=>{
+					this.show = true;
+				});
+				this.imgHeight = newVal;
+			}
+		},
+		computed: {
+			wrapStyle() {
+				const style = {};
+        // 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+        if(this.mode !== 'heightFix') {
+					style.width = this.$uv.addUnit(this.imgWidth);
+				}
+				if(this.mode !== 'widthFix') {
+					style.height = this.$uv.addUnit(this.imgHeight);
+				}
+				// 如果是显示圆形，设置一个很多的半径值即可
+				style.borderRadius = this.shape == 'circle' ? '10000px' : this.$uv.addUnit(this.radius)
+				// 如果设置圆角，必须要有hidden，否则可能圆角无效
+				style.overflow = 'hidden';
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
+			},
+      viewStyle({ wrapStyle }) {
+        const { width, height } = wrapStyle;
+        return {
+          width,
+          height,
+        };
+      },
+			imageStyle({ imgWidth, imgHeight }) {
+				return {
+					width: this.$uv.addUnit(imgWidth),
+					height: this.$uv.addUnit(imgHeight),
+				}
+			},
+			imageUrl({ src, imageStyle, compress }) {
+				return compress && uni.$uv.compress ? uni.$uv.compress.image(src, imageStyle) : src;
+			},
+		},
+		created() {
+			this.elIndex = this.$uv.guid();
+			this.observer = {}
+			this.observerName = 'lazyLoadContentObserver'
+		},
+		mounted() {
+			this.show = true;
+			this.$nextTick(()=>{
+				if(this.observeLazyLoad) this.observerFn();
+			})
+		},
+		methods: {
+			// 点击图片
+			onClick() {
+				this.$emit('click')
+			},
+			// 图片加载失败
+			onErrorHandler(err) {
+				this.loading = false
+				this.isError = true
+				this.$emit('error', err)
+			},
+			// 图片加载完成，标记loading结束
+			onLoadHandler(event) {
+				if(this.mode == 'widthFix') this.imgHeight = 'auto'
+				if(this.mode == 'heightFix') this.imgWidth = 'auto'
+				this.loading = false
+				this.isError = false
+				this.$emit('load', event)
+				this.removeBgColor()
+			},
+			// 移除图片的背景色
+			removeBgColor() {
+				// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
+				this.backgroundStyle = {
+					backgroundColor: 'transparent'
+				};
+			},
+			// 观察图片是否在可见视口
+			observerFn(){
+				// 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载
+				this.$nextTick(() => {
+					uni.$once('onLazyLoadReachBottom', () => {
+						if (!this.observeShow) this.observeShow = true
+					})
+				})
+				setTimeout(() => {
+					// #ifndef APP-NVUE
+					this.disconnectObserver(this.observerName)
+					const contentObserver = uni.createIntersectionObserver(this)
+					contentObserver.relativeToViewport({
+						bottom: this.thresholdValue
+					}).observe(`.uv-image--${this.elIndex}`, (res) => {
+						if (res.intersectionRatio > 0) {
+							// 懒加载状态改变
+							this.observeShow = true
+							// 如果图片已经加载，去掉监听，减少性能消耗
+							this.disconnectObserver(this.observerName)
+						}
+					})
+					this[this.observerName] = contentObserver
+					// #endif
+					// #ifdef APP-NVUE
+					this.observeShow = true;
+					// #endif
+				}, 50)
+			},
+			disconnectObserver(observerName) {
+				const observer = this[observerName]
+				observer && observer.disconnect()
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-image-error-top:0px !default;
+	$uv-image-error-left:0px !default;
+	$uv-image-error-width:100% !default;
+	$uv-image-error-hight:100% !default;
+	$uv-image-error-background-color:$uv-bg-color !default;
+	$uv-image-error-color:$uv-tips-color !default;
+	$uv-image-error-font-size: 46rpx !default;
+
+	.uv-image {
+		position: relative;
+		transition: opacity 0.5s ease-in-out;
+
+		&__image {
+			width: 100%;
+			height: 100%;
+		}
+
+		&__loading,
+		&__error {
+			position: absolute;
+			top: $uv-image-error-top;
+			left: $uv-image-error-left;
+			width: $uv-image-error-width;
+			height: $uv-image-error-hight;
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			background-color: $uv-image-error-background-color;
+			color: $uv-image-error-color;
+			font-size: $uv-image-error-font-size;
+		}
+	}
+</style>

package/components/uv-overlay/props.js

@@ -1,30 +1,30 @@
-export default {
-	props: {
-		// 是否显示遮罩
-		show: {
-			type: Boolean,
-			default: false
-		},
-		// 层级z-index
-		zIndex: {
-			type: [String, Number],
-			default: 10070
-		},
-		// 遮罩的过渡时间，单位为ms
-		duration: {
-			type: [String, Number],
-			default: 300
-		},
-		// 不透明度值，当做rgba的第四个参数
-		opacity: {
-			type: [String, Number],
-			default: 0.5
-		},
-    // 显示时body是否添加overflow: hidden
-    hidden: {
-      type: Boolean,
-			default: true
-    },
-		...uni.$uv?.props?.overlay
-	}
+export default {
+	props: {
+		// 是否显示遮罩
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 层级z-index
+		zIndex: {
+			type: [String, Number],
+			default: 10070
+		},
+		// 遮罩的过渡时间，单位为ms
+		duration: {
+			type: [String, Number],
+			default: 300
+		},
+		// 不透明度值，当做rgba的第四个参数
+		opacity: {
+			type: [String, Number],
+			default: 0.5
+		},
+    // 显示时body是否添加overflow: hidden
+    hidden: {
+      type: Boolean,
+			default: true
+    },
+		...uni.$uv?.props?.overlay
+	}
 }

package/components/uv-overlay/uv-overlay.vue

@@ -1,87 +1,87 @@
-<template>
-	<uv-transition
-	  :show="show"
-		mode="fade"
-	  custom-class="uv-overlay"
-	  :duration="duration"
-	  :custom-style="overlayStyle"
-	  @click="clickHandler"
-		@touchmove.stop.prevent="clear"
-	>
-		<slot />
-	</uv-transition>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-
-	/**
-	 * overlay 遮罩
-	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
-	 * @tutorial https://www.uvui.cn/components/overlay.html
-	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
-	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
-	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
-	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
-	 * @property {Object}			customStyle	定义需要用到的外部样式
-	 * @event {Function} click 点击遮罩发送事件
-	 * @example <uv-overlay :show="show" @click="show = false"></uv-overlay>
-	 */
-	export default {
-		name: "uv-overlay",
-		emits: ['click'],
-		mixins: [mpMixin, mixin, props],
-		watch: {
-			show(newVal){
-				// #ifdef H5
-        if (this.hidden) {
-          if(newVal){
-            document.querySelector('body').style.overflow = 'hidden';
-          }else{
-            document.querySelector('body').style.overflow = '';
-          }
-        }
-				// #endif
-			}
-		},
-		computed: {
-			overlayStyle() {
-				const style = {
-					position: 'fixed',
-					top: 0,
-					left: 0,
-					right: 0,
-					zIndex: this.zIndex,
-					bottom: 0,
-					'background-color': `rgba(0, 0, 0, ${this.opacity})`
-				}
-				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
-			}
-		},
-		methods: {
-			clickHandler() {
-				this.$emit('click')
-			},
-			clear() {}
-		}
-	}
-</script>
-<style lang="scss" scoped>
-/* #ifndef APP-NVUE */
-$uv-overlay-top:0 !default;
-$uv-overlay-left:0 !default;
-$uv-overlay-width:100% !default;
-$uv-overlay-height:100% !default;
-$uv-overlay-background-color:rgba(0, 0, 0, .7) !default;
-.uv-overlay {
-	position: fixed;
-	top:$uv-overlay-top;
-	left:$uv-overlay-left;
-	width: $uv-overlay-width;
-	height:$uv-overlay-height;
-	background-color:$uv-overlay-background-color;
-}
-/* #endif */
-</style>
+<template>
+	<uv-transition
+	  :show="show"
+		mode="fade"
+	  custom-class="uv-overlay"
+	  :duration="duration"
+	  :custom-style="overlayStyle"
+	  @click="clickHandler"
+		@touchmove.stop.prevent="clear"
+	>
+		<slot />
+	</uv-transition>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+
+	/**
+	 * overlay 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://www.uvui.cn/components/overlay.html
+	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
+	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
+	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
+	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击遮罩发送事件
+	 * @example <uv-overlay :show="show" @click="show = false"></uv-overlay>
+	 */
+	export default {
+		name: "uv-overlay",
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		watch: {
+			show(newVal){
+				// #ifdef H5
+        if (this.hidden) {
+          if(newVal){
+            document.querySelector('body').style.overflow = 'hidden';
+          }else{
+            document.querySelector('body').style.overflow = '';
+          }
+        }
+				// #endif
+			}
+		},
+		computed: {
+			overlayStyle() {
+				const style = {
+					position: 'fixed',
+					top: 0,
+					left: 0,
+					right: 0,
+					zIndex: this.zIndex,
+					bottom: 0,
+					'background-color': `rgba(0, 0, 0, ${this.opacity})`
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		},
+		methods: {
+			clickHandler() {
+				this.$emit('click')
+			},
+			clear() {}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+/* #ifndef APP-NVUE */
+$uv-overlay-top:0 !default;
+$uv-overlay-left:0 !default;
+$uv-overlay-width:100% !default;
+$uv-overlay-height:100% !default;
+$uv-overlay-background-color:rgba(0, 0, 0, .7) !default;
+.uv-overlay {
+	position: fixed;
+	top:$uv-overlay-top;
+	left:$uv-overlay-left;
+	width: $uv-overlay-width;
+	height:$uv-overlay-height;
+	background-color:$uv-overlay-background-color;
+}
+/* #endif */
+</style>

package/libs/function/http.js

@@ -1,5 +1,5 @@
-import Request from '../luch-request';
-
-const http = new Request();
-
+import Request from '../luch-request';
+
+const http = new Request();
+
 export default http;

package/package.json

@@ -1,9 +1,8 @@
 {
 	"name": "@gmcb/uv-ui",
-	"version": "0.3.4",
+	"version": "0.3.6",
 	"description": "uv-ui 破釜沉舟之兼容vue3+2、nvue、app、h5、小程序等多端基于uni-app和uView2.x的生态框架，支持单独导入，开箱即用，利剑出击。",
 	"main": "index.js",
-	"homepage": "https://git.keeprisk.cn/gmcb/front-end/tree/master/packages/uv-ui",
 	"scripts": {
 		"docs:dev": "vitepress dev . --config .vitepress/config.mts",
 		"docs:build": "vitepress build . --config .vitepress/config.mts"
@@ -29,5 +28,5 @@
 		"index.scss",
 		"theme.scss"
 	],
-	"gitHead": "b490689211c85faf2324dce167666aed87f7a66a"
+	"gitHead": "6ffb8b8188f29e8d4af167895737c9cb7bc0997f"
 }