uview-plus 3.4.93 → 3.4.98

package/changelog.md

@@ -1,3 +1,20 @@
+## 3.4.98（2025-08-17）
+feat: alert组件新增transitionMode/icon/duration/modelValue等参数
+
+improvment:  完善alert组件注释
+
+## 3.4.97（2025-08-16）
+improvment: 完善album组件注释
+
+## 3.4.96（2025-08-16）
+improvment: 完善action-sheet注释
+
+## 3.4.95（2025-08-16）
+del: 去除不再需要的重复组件
+
+## 3.4.94（2025-08-15）
+improvment: 组件库内部icon前缀统一
+
 ## 3.4.93（2025-08-15）
 fix: 修复dropdown组件在打开下拉菜单时content高度为NANpx的问题
 

package/components/u-action-sheet/actionSheet.js

@@ -1,11 +1,11 @@
 /*
  * @Author       : LQ
  * @Description  :
- * @version      : 1.0
+ * @version      : 3.0
  * @Date         : 2021-08-20 16:44:21
- * @LastAuthor   : LQ
- * @lastTime     : 2021-08-20 16:44:35
- * @FilePath     : /u-view2.0/uview-ui/libs/config/props/actionSheet.js
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-08-16 10:52:35
+ * @FilePath     : /uview-plus/libs/config/props/actionSheet.js
  */
 export default {
     // action-sheet组件

package/components/u-action-sheet/props.js

@@ -1,3 +1,11 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 3.0
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-08-16 10:52:35
+ * @FilePath     : /uview-plus/libs/config/props/props.js
+ */
 import { defineMixin } from '../../libs/vue'
 import defProps from '../../libs/config/props.js'
 

package/components/u-action-sheet/u-action-sheet.vue

@@ -1,4 +1,3 @@
-
 <template>
 	<u-popup
 	    :show="show"
@@ -8,6 +7,7 @@
 	    :round="round"
 	>
 		<view class="u-action-sheet">
+			<!-- 顶部标题区域 -->
 			<view
 			    class="u-action-sheet__header"
 			    v-if="title"
@@ -17,14 +17,15 @@
 				    class="u-action-sheet__header__icon-wrap"
 				    @tap.stop="cancel"
 				>
-					<u-icon
+					<up-icon
 					    name="close"
 					    size="17"
 					    color="#c8c9cc"
 					    bold
-					></u-icon>
+					></up-icon>
 				</view>
 			</view>
+			<!-- 描述信息 -->
 			<text
 			    class="u-action-sheet__description"
 				:style="[{
@@ -33,7 +34,9 @@
 			    v-if="description"
 			>{{description}}</text>
 			<slot>
+				<!-- 分割线 -->
 				<u-line v-if="description"></u-line>
+				<!-- 操作项列表 -->
 				<scroll-view scroll-y class="u-action-sheet__item-wrap" :style="{maxHeight: wrapMaxHeight}">
 					<view :key="index" v-for="(item, index) in actions">
 						<!-- #ifdef MP -->
@@ -73,6 +76,7 @@
 									    class="u-action-sheet__item-wrap__item__subname"
 									>{{ item.subname }}</text>
 								</template>
+								<!-- 加载状态图标 -->
 								<u-loading-icon
 								    v-else
 								    custom-class="van-action-sheet__loading"
@@ -83,15 +87,18 @@
 							<!-- #ifdef MP -->
 						</button>
 						<!-- #endif -->
+						<!-- 选项间分割线 -->
 						<u-line v-if="index !== actions.length - 1"></u-line>
 					</view>
 				</scroll-view>
 			</slot>
+			<!-- 取消按钮前的分割区域 -->
 			<u-gap
 			    bgColor="#eaeaec"
 			    height="6"
 			    v-if="cancelText"
 			></u-gap>
+			<!-- 取消按钮 -->
 			<view class="u-action-sheet__item-wrap__item u-action-sheet__cancel"
 				hover-class="u-action-sheet--hover" @tap="cancel" v-if="cancelText">
 				<text
@@ -168,6 +175,7 @@
 		},
 		emits: ["close", "select", "update:show"],
 		methods: {
+			// 关闭操作菜单事件处理
 			closeHandler() {
 				// 允许点击遮罩关闭时，才发出close事件
 				if(this.closeOnClickOverlay) {
@@ -180,6 +188,7 @@
 				this.$emit('update:show', false)
 				this.$emit('close')
 			},
+			// 选择操作项处理
 			selectHandler(index) {
 				const item = this.actions[index]
 				if (item && !item.disabled && !item.loading) {
@@ -279,4 +288,4 @@
 			background-color: $u-action-sheet-cancel-text-hover-background-color;
 		}
 	}
-</style>
+</style>

package/components/u-album/album.js

@@ -3,9 +3,9 @@
  * @Description  :
  * @version      : 1.0
  * @Date         : 2021-08-20 16:44:21
- * @LastAuthor   : LQ
- * @lastTime     : 2021-08-20 16:47:24
- * @FilePath     : /u-view2.0/uview-ui/libs/config/props/album.js
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-08-16 16:32:24
+ * @FilePath     : /uview-plus/libs/config/props/album.js
  */
 export default {
     // album 组件

package/components/u-album/props.js

@@ -1,5 +1,14 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 3.0
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-08-16 16:35:24
+ * @FilePath     : /uview-plus/components/u-album/props.js
+ */
 import { defineMixin } from '../../libs/vue'
 import defProps from '../../libs/config/props.js'
+
 export const props = defineMixin({
     props: {
         // 图片地址，Array<String>|Array<Object>形式

package/components/u-album/u-album.vue

@@ -1,5 +1,6 @@
 <template>
     <view class="u-album">
+        <!-- 相册行容器，每行显示 rowCount 个图片 -->
         <view
             class="u-album__row"
             ref="u-album__row"
@@ -8,6 +9,7 @@
             :key="index"
             :style="{flexWrap: autoWrap ? 'wrap' : 'nowrap'}"
         >
+            <!-- 图片包装容器 -->
             <view
                 class="u-album__row__wrapper"
                 v-for="(item, index1) in arr"
@@ -15,6 +17,7 @@
                 :style="[imageStyle(index + 1, index1 + 1)]"
                 @tap="onPreviewTap($event, getSrc(item))"
             >
+                <!-- 图片显示 -->
                 <image
                     :src="getSrc(item)"
                     :mode="
@@ -32,6 +35,7 @@
                         }
                     ]"
                 ></image>
+                <!-- 超出最大显示数量时的更多提示 -->
                 <view
                     v-if="
                         showMore &&
@@ -64,7 +68,7 @@ import { mixin } from '../../libs/mixin/mixin';
 import { addUnit, sleep } from '../../libs/function/index';
 import test from '../../libs/function/test';
 // #ifdef APP-NVUE
-// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+// 不支持百分比单位，这里需要通过dom查询组件的宽度
 const dom = uni.requireNativePlugin('dom')
 // #endif
 
@@ -108,6 +112,7 @@ export default {
         urls: {
             immediate: true,
             handler(newVal) {
+                // 当只有一张图片时，获取图片尺寸信息
                 if (newVal.length === 1) {
                     this.getImageRect()
                 }
@@ -115,6 +120,12 @@ export default {
         }
     },
     computed: {
+        /**
+         * 计算图片样式
+         * @param {Number} index1 - 行索引
+         * @param {Number} index2 - 列索引
+         * @returns {Object} 图片样式对象
+         */
         imageStyle() {
             return (index1, index2) => {
                 const { space, rowCount, multipleSize, urls } = this,
@@ -138,11 +149,16 @@ export default {
                 return style
             }
         },
-        // 将数组划分为二维数组
+        /**
+         * 将图片地址数组划分为二维数组，用于按行显示
+         * @returns {Array} 二维数组，每个子数组代表一行图片
+         */
         showUrls() {
             if (this.autoWrap) {
+                // 自动换行模式下，所有图片放在一行中显示
                 return [ this.urls.slice(0, this.maxCount) ];
             } else {
+                // 固定行数模式下，按 rowCount 分割图片
                 const arr = []
                 this.urls.map((item, index) => {
                     // 限制最大展示数量
@@ -159,18 +175,29 @@ export default {
                 return arr
             }
         },
+        /**
+         * 计算图片宽度
+         * @returns {String} 图片宽度样式值
+         */
         imageWidth() {
             return addUnit(
                 this.urls.length === 1 ? this.singleWidth : this.multipleSize, this.unit
             )
         },
+        /**
+         * 计算图片高度
+         * @returns {String} 图片高度样式值
+         */
         imageHeight() {
             return addUnit(
                 this.urls.length === 1 ? this.singleHeight : this.multipleSize, this.unit
             )
         },
-        // 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
-        // 因为用户在某些特殊的情况下，需要让文字与相册的宽度相等，所以这里事件的形式对外发送
+        /**
+         * 计算相册总宽度，用于外部组件对齐
+         * 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
+         * @returns {Number} 相册宽度
+         */
         albumWidth() {
             let width = 0
             if (this.urls.length === 1) {
@@ -187,12 +214,18 @@ export default {
     emits: ['preview', 'albumWidth'],
     methods: {
         addUnit,
-        // 预览图片
+        /**
+         * 点击图片预览
+         * @param {Event} e - 点击事件对象
+         * @param {String} url - 当前点击图片的地址
+         */
         onPreviewTap(e, url) {
+            // 获取所有图片地址
             const urls = this.urls.map((item) => {
                 return this.getSrc(item)
             })
             if (this.previewFullImage) {
+                // 使用系统默认预览图片功能
                 uni.previewImage({
                     current: url,
                     urls
@@ -200,21 +233,28 @@ export default {
                 // 是否阻止事件传播
                 this.stop && this.preventEvent(e)
             } else {
+                // 发送自定义预览事件
                 this.$emit('preview', {
                     urls,
                     currentIndex: urls.indexOf(url)
                 })
             }
         },
-        // 获取图片的路径
+        /**
+         * 获取图片地址
+         * @param {String|Object} item - 图片项，可以是字符串或对象
+         * @returns {String} 图片地址
+         */
         getSrc(item) {
             return test.object(item)
                 ? (this.keyName && item[this.keyName]) || item.src
                 : item
         },
-        // 单图时，获取图片的尺寸
-        // 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
-        // 在没有添加的情况下，让单图宽度默认为盒子的一定宽度(singlePercent)
+        /**
+         * 单图时，获取图片的尺寸
+         * 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
+         * 在没有添加的情况下，让单图宽度默认为盒子的一定宽度(singlePercent)
+         */
         getImageRect() {
             const src = this.getSrc(this.urls[0])
             uni.getImageInfo({
@@ -245,21 +285,26 @@ export default {
                     }
                 },
                 fail: () => {
+                    // 获取图片信息失败时，通过组件宽度计算
                     this.getComponentWidth()
                 }
             })
         },
-        // 获取组件的宽度
+        /**
+         * 获取组件的宽度，用于计算单图显示尺寸
+         */
         async getComponentWidth() {
             // 延时一定时间，以获取dom尺寸
             await sleep(30)
             // #ifndef APP-NVUE
+            // H5、小程序等平台通过 $uGetRect 获取组件宽度
             this.$uGetRect('.u-album__row').then((size) => {
                 this.singleWidth = size.width * this.singlePercent
             })
             // #endif
 
             // #ifdef APP-NVUE
+            // NVUE 平台通过 dom 插件获取组件宽度
             // 这里ref="u-album__row"所在的标签为通过for循环出来，导致this.$refs['u-album__row']是一个数组
             const ref = this.$refs['u-album__row'][0]
             ref &&
@@ -296,4 +341,4 @@ export default {
         }
     }
 }
-</style>
+</style>

package/components/u-alert/alert.js

@@ -1,11 +1,11 @@
 /*
  * @Author       : LQ
  * @Description  :
- * @version      : 1.0
+ * @version      : 3.0
  * @Date         : 2021-08-20 16:44:21
- * @LastAuthor   : LQ
- * @lastTime     : 2021-08-20 16:48:53
- * @FilePath     : /u-view2.0/uview-ui/libs/config/props/alert.js
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-08-17 17:23:53
+ * @FilePath     : /uview-plus/libs/config/props/alert.js
  */
 export default {
     // alert警告组件
@@ -17,6 +17,10 @@ export default {
         showIcon: false,
         effect: 'light',
         center: false,
-        fontSize: 14
+        fontSize: 14,
+        transitionMode: 'fade',
+        duration: 0,
+        icon: '',
+        value: true
     }
 }

package/components/u-alert/props.js

@@ -1,5 +1,14 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 3.0
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-08-17 17:23:53
+ * @FilePath     : /uview-plus/libs/config/props/props.js
+ */
 import { defineMixin } from '../../libs/vue'
 import defProps from '../../libs/config/props.js'
+
 export const props = defineMixin({
     props: {
         // 显示文字
@@ -41,6 +50,26 @@ export const props = defineMixin({
         fontSize: {
             type: [String, Number],
             default: () => defProps.alert.fontSize
+        },
+        // 动画类型
+        transitionMode: {
+            type: [String],
+            default: () => defProps.alert.transitionMode
+        },
+        // 自动定时关闭毫秒
+        duration: {
+            type: [Number],
+            default: () => defProps.alert.duration
+        },
+        // 自定义图标
+        icon: {
+            type: [String],
+            default: () => defProps.alert.icon
+        },
+        // 是否显示
+        modelValue: {
+            type: [String],
+            default: () => defProps.alert.value
         }
     }
 })

package/components/u-alert/u-alert.vue

@@ -1,6 +1,6 @@
 <template>
-	<u-transition
-	    mode="fade"
+	<up-transition
+	    :mode="transitionMode"
 	    :show="show"
 	>
 		<view
@@ -9,22 +9,25 @@
 		    @tap.stop="clickHandler"
 		    :style="[addStyle(customStyle)]"
 		>
+			<!-- 左侧图标 -->
 			<view
 			    class="u-alert__icon"
 			    v-if="showIcon"
 			>
-				<u-icon
+				<up-icon
 				    :name="iconName"
 				    size="18"
 				    :color="iconColor"
-				></u-icon>
+				></up-icon>
 			</view>
+			<!-- 内容区域 -->
 			<view
 			    class="u-alert__content"
 			    :style="[{
 					paddingRight: closable ? '20px' : 0
 				}]"
 			>
+				<!-- 标题 -->
 				<text
 				    class="u-alert__content__title"
 				    v-if="title"
@@ -34,6 +37,7 @@
 					}]"
 				    :class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]"
 				>{{ title }}</text>
+				<!-- 描述信息 -->
 				<text
 				    class="u-alert__content__desc"
 					v-if="description"
@@ -44,19 +48,22 @@
 				    :class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]"
 				>{{ description }}</text>
 			</view>
+			<!-- 关闭按钮 -->
 			<view
 			    class="u-alert__close"
 			    v-if="closable"
 			    @tap.stop="closeHandler"
 			>
-				<u-icon
-				    name="close"
-				    :color="iconColor"
-				    size="15"
-				></u-icon>
+				<slot name="close">
+					<up-icon
+					    name="close"
+					    :color="iconColor"
+					    size="15"
+					></up-icon>
+				</slot>
 			</view>
 		</view>
-	</u-transition>
+	</up-transition>
 </template>
 
 <script>
@@ -70,7 +77,7 @@
 	 * @tutorial https://ijry.github.io/uview-plus/components/alertTips.html
 	 * 
 	 * @property {String}			title       显示的文字 
-	 * @property {String}			type        使用预设的颜色  （默认 'warning' ）
+	 * @property {String}			type        使用预设的颜色 （默认 'warning' ）
 	 * @property {String}			description 辅助性文字，颜色比title浅一点，字号也小一点，可选  
 	 * @property {Boolean}			closable    关闭按钮(默认为叉号icon图标)  （默认 false ）
 	 * @property {Boolean}			showIcon    是否显示左边的辅助图标   （ 默认 false ）
@@ -78,24 +85,34 @@
 	 * @property {Boolean}			center		文字是否居中  （默认 false ）
 	 * @property {String | Number}	fontSize    字体大小  （默认 14 ）
 	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @property {String}			transitionMode 过渡动画模式 （默认 'fade' ）
+	 * @property {String | Number}	duration	自动关闭延时(毫秒)，设置为0或负数则不自动关闭 （默认 0 ）
+	 * @property {String}			icon		自定义图标名称，优先级高于type默认图标
+	 * @property {Boolean}			modelValue/v-model	绑定值，控制是否显示 （默认 true ）
 	 * @event    {Function}        click       点击组件时触发
 	 * @event    {Function}        close       点击关闭按钮时触发
-	 * @example  <u-alert :title="title"  type = "warning" :closable="closable" :description = "description"></u-alert>
+	 * @event    {Function}        closed      关闭动画结束时触发
+	 * @example  <up-alert :title="title"  type = "warning" :closable="closable" :description = "description"></up-alert>
 	 */
 	export default {
 		name: 'u-alert',
 		mixins: [mpMixin, mixin, props],
 		data() {
 			return {
+				// 控制组件显示隐藏
 				show: true
 			}
 		},
 		computed: {
+			// 根据不同的主题类型返回对应的图标颜色
 			iconColor() {
 				return this.effect === 'light' ? this.type : '#fff'
 			},
 			// 不同主题对应不同的图标
 			iconName() {
+				// 如果用户自定义了图标，则优先使用自定义图标
+				if (this.icon) return this.icon;
+				
 				switch (this.type) {
 					case 'success':
 						return 'checkmark-circle-fill';
@@ -117,18 +134,44 @@
 				}
 			}
 		},
-		emits: ["click","close"],
+		emits: ["click","close", "closed", "update:modelValue"],
+		watch: {
+			modelValue: {
+				handler(newVal) {
+					this.show = newVal;
+				},
+				immediate: true
+			},
+			show: {
+				handler(newVal) {
+					this.$emit('update:modelValue', newVal);
+					
+					// 如果是从显示到隐藏，且启用了自动关闭功能
+					if (!newVal && this.duration > 0) {
+						this.$emit('closed');
+					}
+				}
+			}
+		},
+		mounted() {
+			// 如果设置了自动关闭时间，则在指定时间后自动关闭
+			if (this.duration > 0) {
+				setTimeout(() => {
+					this.closeHandler();
+				}, this.duration);
+			}
+		},
 		methods: {
 			addUnit,
 			addStyle,
-			// 点击内容
+			// 点击内容区域触发click事件
 			clickHandler() {
 				this.$emit('click')
 			},
-			// 点击关闭按钮
+			// 点击关闭按钮触发close事件并隐藏组件
 			closeHandler() {
 				this.show = false   
-				this.$emit('close')
+				this.$emit('close');
 			}
 		}
 	}

package/components/u-avatar/u-avatar.vue

@@ -23,12 +23,12 @@
 			<!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU  -->
 			<template v-if="mpAvatar && allowMp"></template>
 			<!-- #endif -->
-			<u-icon
+			<up-icon
 				v-else-if="icon"
 				:name="icon"
 				:size="fontSize"
 				:color="color"
-			></u-icon>
+			></up-icon>
 			<up-text
 				v-else-if="text"
 				:text="text"

package/components/u-back-top/u-back-top.vue

@@ -10,10 +10,10 @@
 		    v-if="!$slots.default && !$slots.$default"
 			@click="backToTop"
 		>
-			<u-icon
+			<up-icon
 			    :name="icon"
 			    :custom-style="iconStyle"
-			></u-icon>
+			></up-icon>
 			<text
 			    v-if="text"
 			    class="u-back-top__text"

package/components/u-button/u-button.vue

@@ -39,13 +39,13 @@
             >
         </template>
         <template v-else>
-            <u-icon
+            <up-icon
                 v-if="icon"
                 :name="icon"
                 :color="iconColorCom"
                 :size="textSize * 1.35"
                 :customStyle="{ marginRight: '2px' }"
-            ></u-icon>
+            ></up-icon>
             <slot>
                 <text
                     class="u-button__text"
@@ -87,12 +87,12 @@
             >
         </template>
         <template v-else>
-            <u-icon
+            <up-icon
                 v-if="icon"
                 :name="icon"
                 :color="iconColorCom"
                 :size="textSize * 1.35"
-            ></u-icon>
+            ></up-icon>
             <text
                 class="u-button__text"
                 :style="[
@@ -206,7 +206,7 @@ export default {
         },
         iconColorCom() {
             // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
-            // u-icon的color能接受一个主题颜色的值
+            // up-icon的color能接受一个主题颜色的值
 			if (this.iconColor) return this.iconColor;
 			if (this.plain) {
                 return this.color ? this.color : this.type;

package/components/u-car-keyboard/u-car-keyboard.vue

@@ -56,11 +56,11 @@
 					hover-class="u-hover-class"
 					:hover-stay-time="200"
 				>
-					<u-icon
+					<up-icon
 						size="28"
 						name="backspace"
 						color="#303133"
-					></u-icon>
+					></up-icon>
 				</view>
 			</view>
 		</view>