uview-plus 3.5.15 → 3.5.16

package/changelog.md

@@ -1,3 +1,6 @@
+## 3.5.16（2025-08-26）
+feat: tabbar新增支持中间凸起按钮
+
 ## 3.5.15（2025-08-25）
 feat: 之前的color-picker颜色选择器按计划上线
 

package/components/u-tabbar-item/props.js

@@ -7,7 +7,7 @@ export const props = defineMixin({
             type: [String, Number, null],
             default: () => defProps.tabbarItem.name
         },
-        // uView内置图标或者绝对路径的图片
+        // uview-plus内置图标或者绝对路径的图片
         icon: {
             icon: String,
             default: () => defProps.tabbarItem.icon
@@ -31,7 +31,11 @@ export const props = defineMixin({
         badgeStyle: {
             type: [Object, String],
             default: () => defProps.tabbarItem.badgeStyle
+        },
+        // 模式，默认普通模式，midButton中间按钮模式
+        mode: {
+            type: String,
+            default: () => defProps.tabbarItem.mode
         }
-
     }
 })

package/components/u-tabbar-item/tabbarItem.js

@@ -15,6 +15,7 @@ export default {
         badge: null,
         dot: false,
         text: '',
-        badgeStyle: 'top: 6px;right:2px;'
+        badgeStyle: 'top: 6px;right:2px;',
+        mode: ''
     }
 }

package/components/u-tabbar-item/u-tabbar-item.vue

@@ -2,14 +2,20 @@
 	<view
 	    class="u-tabbar-item"
 	    :style="[addStyle(customStyle)]"
+	    :class="[isMidButton ? 'u-tabbar-item--mid-button' : '']"
 	    @tap="clickHandler"
 	>
-		<view class="u-tabbar-item__icon">
+		<view 
+			class="u-tabbar-item__icon"
+			:class="[isMidButton ? 'u-tabbar-item__icon--mid-button' : '']"
+		>
+			<view class="u-tabbar-item--mid-button-cover" v-if="isMidButton">
+			</view>
 			<up-icon
 			    v-if="icon"
 			    :name="icon"
 			    :color="isActive? parentData.activeColor : parentData.inactiveColor"
-			    :size="20"
+			    :size="isMidButton ? 26 : 20"
 			></up-icon>
 			<template v-else>
 				<slot
@@ -78,6 +84,12 @@
 		options: {
 		    virtualHost: true //将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
 		},
+		computed: {
+			// 计算是否为中间按钮
+			isMidButton() {
+				return this.mode === 'midButton';
+			}
+		},
 		created() {
 			this.init()
 		},
@@ -88,7 +100,7 @@
 				// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
 				this.updateParentData()
 				if (!this.parent) {
-					error('u-tabbar-item必须搭配u-tabbar组件使用')
+					error('up-tabbar-item必须搭配up-tabbar组件使用')
 				}
 				// 本子组件在u-tabbar的children数组中的索引
 				const index = this.parent.children.indexOf(this)
@@ -146,6 +158,34 @@
 			color: $u-content-color;
 		}
 	}
+	
+	// 中间按钮样式
+	.u-tabbar-item--mid-button {
+		/* #ifndef APP-NVUE */
+		transform: translateY(-10px);
+		/* #endif */
+	}
+	
+	.u-tabbar-item--mid-button-cover {
+		background-color: #fff;
+		position: absolute;
+		top: 22px;
+		left: -10px;
+		// right: -10px;
+		width: 90px;
+		bottom: 0;
+	}
+	
+	.u-tabbar-item__icon--mid-button {
+		width: 70px;
+		height: 70px;
+		border-radius: 100px;
+		background-color: #ffffff;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
 	/* #ifdef MP */
 	// 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
@@ -154,4 +194,4 @@
 		width: 100%;
 	}
 	/* #endif */
-</style>
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.5.15",
+  "version": "3.5.16",
   "description": "零云®uview-plus已兼容vue3支持多语言，100+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",