uview-plus 3.8.37 → 3.8.42

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

@@ -1,50 +1,61 @@
 <template>
 	<view
 	    class="u-tabbar-item"
-	    :style="[addStyle(customStyle)]"
-	    :class="[isMidButton ? 'u-tabbar-item--mid-button' : '']"
+	    :style="[itemInlineStyle, addStyle(customStyle)]"
+	    :class="itemClassNames"
 	    @tap="clickHandler"
 	>
-		<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 class="u-tabbar-item__content" :class="contentClassNames">
+			<view class="u-tabbar-item__bubble" :class="bubbleClassNames">
+				<view
+					class="u-tabbar-item__icon"
+					:class="iconClassNames"
+				>
+					<view v-if="isMidButton" class="u-tabbar-item__mid-button-arc">
+						<svg viewBox="0 0 72 72" preserveAspectRatio="none">
+							<path d="M 4 36 A 32 32 0 0 1 68 36"></path>
+						</svg>
+					</view>
+					<view v-if="isMidButton" class="u-tabbar-item__mid-button-inner"></view>
+					<up-icon
+						v-if="resolvedIconName"
+						:name="resolvedIconName"
+						:color="isMidButton ? resolvedMidButtonIconColor : (isActive ? resolvedActiveColor : resolvedInactiveColor)"
+						:size="isMidButton ? midButtonIconSize : 24"
+					></up-icon>
+					<template v-else>
+						<slot
+							v-if="isActive"
+							name="active-icon"
+						/>
+						<slot
+							v-else
+							name="inactive-icon"
+						/>
+					</template>
+					<u-badge
+						absolute
+						:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
+						:customStyle="badgeStyle"
+						:isDot="dot"
+						:value="badge || (dot ? 1 : null)"
+						:show="dot || badge > 0"
+					></u-badge>
+				</view>
+
+				<slot name="text">
+					<text
+						class="u-tabbar-item__text"
+						:class="textClassNames"
+						:style="{
+							color: isActive ? resolvedActiveColor : resolvedInactiveColor
+						}"
+					>{{ text }}</text>
+				</slot>
 			</view>
-			<up-icon
-			    v-if="icon"
-			    :name="icon"
-			    :color="isActive ? resolvedActiveColor : resolvedInactiveColor"
-			    :size="isMidButton ? 26 : 20"
-			></up-icon>
-			<template v-else>
-				<slot
-				    v-if="isActive"
-				    name="active-icon"
-				/>
-				<slot
-				    v-else
-				    name="inactive-icon"
-				/>
-			</template>
-			<u-badge
-				absolute
-				:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
-			    :customStyle="badgeStyle"
-			    :isDot="dot"
-			    :value="badge || (dot ? 1 : null)"
-			    :show="dot || badge > 0"
-			></u-badge>
 		</view>
-		
-		<slot name="text">
-			<text
-			    class="u-tabbar-item__text"
-			    :style="{
-					color: isActive ? resolvedActiveColor : resolvedInactiveColor
-				}"
-			>{{ text }}</text>
-		</slot>
+		<view v-if="resolvedStyleType === 'underline'" class="u-tabbar-item__underline"></view>
+		<view v-if="resolvedStyleType === 'dot'" class="u-tabbar-item__active-dot"></view>
 	</view>
 </template>
 
@@ -76,7 +87,14 @@
 				parentData: {
 					value: null,
 					activeColor: '',
-					inactiveColor: ''
+					inactiveColor: '',
+					styleType: 'default',
+					animationType: 'none',
+					activeBackgroundColor: '',
+					inactiveBackgroundColor: '',
+					itemShape: 'default',
+					iconScale: 1.1,
+					textMode: 'always'
 				}
 			}
 		},
@@ -98,6 +116,67 @@
 				return !this.parentData.inactiveColor || this.parentData.inactiveColor === '#7d7e80'
 					? this.upThemeVar('--up-content-color', '#7d7e80')
 					: this.parentData.inactiveColor
+			},
+			resolvedStyleType() {
+				return this.parentData.styleType || 'default'
+			},
+			resolvedAnimationType() {
+				return this.parentData.animationType || 'none'
+			},
+			resolvedItemShape() {
+				return this.parentData.itemShape || 'default'
+			},
+			resolvedIconName() {
+				if (this.$slots['active-icon'] || this.$slots['inactive-icon']) return ''
+				if (this.isActive) return this.activeIcon || this.icon
+				return this.inactiveIcon || this.icon
+			},
+			resolvedMidButtonIconColor() {
+				if (this.midButtonIconColor) return this.midButtonIconColor
+				return this.isMidButton ? '#3c9cff' : this.resolvedActiveColor
+			},
+			itemClassNames() {
+				return [
+					this.isActive ? 'u-tabbar-item--active' : 'u-tabbar-item--inactive',
+					this.isMidButton ? 'u-tabbar-item--mid-button' : '',
+					`u-tabbar-item--${this.resolvedStyleType}`,
+					this.resolvedAnimationType !== 'none' && this.isActive ? `u-tabbar-item--anim-${this.resolvedAnimationType}` : '',
+					this.resolvedItemShape !== 'default' ? `u-tabbar-item--shape-${this.resolvedItemShape}` : '',
+					this.isActive ? this.activeClass : this.inactiveClass
+				]
+			},
+			iconClassNames() {
+				return [
+					this.isMidButton ? 'u-tabbar-item__icon--mid-button' : '',
+					`u-tabbar-item__icon--${this.resolvedStyleType}`,
+					this.isActive && this.resolvedAnimationType !== 'none' ? `u-tabbar-item__icon--anim-${this.resolvedAnimationType}` : ''
+				]
+			},
+			contentClassNames() {
+				return [
+					`u-tabbar-item__content--${this.resolvedStyleType}`,
+					this.isMidButton ? 'u-tabbar-item__content--mid-button' : ''
+				]
+			},
+			bubbleClassNames() {
+				return [
+					`u-tabbar-item__bubble--${this.resolvedStyleType}`,
+					this.isActive ? 'u-tabbar-item__bubble--active' : '',
+					this.isMidButton ? 'u-tabbar-item__bubble--mid-button' : ''
+				]
+			},
+			textClassNames() {
+				return [
+					`u-tabbar-item__text--${this.resolvedStyleType}`,
+					this.parentData.textMode === 'active' && !this.isActive ? 'u-tabbar-item__text--muted' : ''
+				]
+			},
+			itemInlineStyle() {
+				return {
+					backgroundColor: this.isActive
+						? (this.parentData.activeBackgroundColor || 'transparent')
+						: (this.parentData.inactiveBackgroundColor || 'transparent')
+				}
 			}
 		},
 		created() {
@@ -147,6 +226,7 @@
 		align-items: center;
 		justify-content: center;
 		flex: 1;
+		position: relative;
 		/* #ifndef APP-NVUE */
 		width: 100%;
 		height: 100%;
@@ -160,42 +240,231 @@
 			position: relative;
 			width: 150rpx;
 			justify-content: center;
+			min-height: 46rpx;
+			transition: transform 0.22s ease, opacity 0.22s ease;
+
+			&--pill,
+			&--card,
+			&--glow,
+			&--convex {
+				width: 100%;
+			}
+
+			&--anim-scale {
+				transform: scale(var(--up-tabbar-icon-scale, 1.1));
+			}
+
+			&--anim-lift {
+				transform: translateY(-6rpx) scale(var(--up-tabbar-icon-scale, 1.08));
+			}
+
+			&--anim-swing {
+				transform: rotate(-10deg) scale(var(--up-tabbar-icon-scale, 1.08));
+			}
+
+			&--anim-pulse {
+				transform: scale(var(--up-tabbar-icon-scale, 1.14));
+			}
+		}
+
+		&__content {
+			@include flex(column);
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+
+			&--mid-button {
+				justify-content: center;
+			}
+		}
+
+		&__bubble {
+			@include flex(column);
+			align-items: center;
+			justify-content: center;
+			min-width: 0;
+			padding: 0;
+			max-width: 100rpx;
+			border-radius: 999px;
+			transition: background-color 0.22s ease, transform 0.22s ease;
+
+			&--pill.u-tabbar-item__bubble--active {
+				background-color: transparent;
+			}
+
+			&--glow.u-tabbar-item__bubble--active {
+				background-color: var(--up-tabbar-active-bg, rgba(125, 211, 252, 0.12));
+			}
+
+			&--mid-button {
+				padding: 0;
+				background-color: transparent !important;
+			}
 		}
 
 		&__text {
 			margin-top: 2px;
 			font-size: 12px;
 			color: $u-content-color;
+			transition: transform 0.22s ease, opacity 0.22s ease;
+
+			&--muted {
+				opacity: 0.68;
+				transform: scale(0.94);
+			}
 		}
+
+		&__underline {
+			position: absolute;
+			left: 50%;
+			bottom: 2rpx;
+			width: 34rpx;
+			height: 6rpx;
+			border-radius: 999px;
+			background-color: currentColor;
+			transform: translateX(-50%);
+		}
+
+		&__active-dot {
+			position: absolute;
+			left: 50%;
+			bottom: 8rpx;
+			width: 10rpx;
+			height: 10rpx;
+			border-radius: 50%;
+			background-color: currentColor;
+			transform: translateX(-50%);
+		}
+	}
+
+	.u-tabbar-item--active {
+		color: inherit;
+	}
+
+	.u-tabbar-item--pill,
+	.u-tabbar-item--glow,
+	.u-tabbar-item--card {
+		margin: 0;
+		border-radius: 999px;
+	}
+
+	.u-tabbar-item--card {
+		border-radius: 24rpx;
+	}
+
+	.u-tabbar-item--active.u-tabbar-item--pill,
+	.u-tabbar-item--active.u-tabbar-item--card {
+		box-shadow: none;
+	}
+
+	.u-tabbar-item--active.u-tabbar-item--glow {
+		box-shadow: none;
+	}
+
+	.u-tabbar-item--lift.u-tabbar-item--active {
+		transform: none;
+	}
+
+	.u-tabbar-item--lift.u-tabbar-item--active .u-tabbar-item__icon {
+		transform: translateY(-6rpx) scale(1.04);
+	}
+
+	.u-tabbar-item--underline,
+	.u-tabbar-item--dot {
+		padding-bottom: 10rpx;
+	}
+
+	.u-tabbar-item--convex.u-tabbar-item--active:not(.u-tabbar-item--mid-button) {
+		transform: none;
 	}
 	
 	// 中间按钮样式
 	.u-tabbar-item--mid-button {
 		/* #ifndef APP-NVUE */
-		transform: translateY(-10px);
+		transform: translateY(v-bind('`${midButtonOffsetY}px`'));
 		/* #endif */
-	}
-	
-	.u-tabbar-item--mid-button-cover {
-		background-color: var(--up-card-bg-color, #fff);
-		position: absolute;
-		top: 22px;
-		left: -10px;
-		// right: -10px;
-		width: 90px;
-		bottom: 0;
+		z-index: 2;
+		flex: 1;
 	}
 	
 	.u-tabbar-item__icon--mid-button {
-		width: 70px;
-		height: 70px;
-		border-radius: 100px;
-		background-color: var(--up-card-bg-color, #ffffff);
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-		border: 1px solid var(--up-border-color, rgba(0, 0, 0, 0.08));
+		width: 64px;
+		height: 64px;
+		border-radius: 999px;
+		background: #ffffff;
+		box-shadow: v-bind('midButtonBoxShadow || "none"');
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		position: relative;
+		overflow: visible;
+	}
+
+	.u-tabbar-item__mid-button-arc {
+		position: absolute;
+		left: -4px;
+		top: -4px;
+		width: calc(100% + 8px);
+		height: calc(100% + 8px);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	.u-tabbar-item__mid-button-arc svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.u-tabbar-item__mid-button-arc path {
+		fill: none;
+		stroke: none;
+		stroke-width: 0;
+		stroke-linecap: round;
+	}
+
+	.u-tabbar-item__mid-button-inner {
+		position: absolute;
+		left: 6px;
+		top: 6px;
+		right: 6px;
+		bottom: 6px;
+		border-radius: 999px;
+		background: v-bind('midButtonBgColor || "#ffffff"');
+		box-shadow: v-bind('midButtonInnerBoxShadow');
+		z-index: 1;
+	}
+
+	.u-tabbar-item__icon--mid-button .u-icon,
+	.u-tabbar-item__icon--mid-button .u-badge {
+		position: relative;
+		z-index: 2;
+	}
+
+	.u-tabbar-item--mid-button .u-tabbar-item__text {
+		margin-top: 0;
+		transform: translateY(-4px);
+	}
+
+	.u-tabbar-item--lift .u-tabbar-item__bubble {
+		background-color: transparent !important;
+	}
+
+	.u-tabbar-item--lift.u-tabbar-item--active .u-tabbar-item__text {
+		transform: translateY(-4rpx);
+	}
+
+	.u-tabbar-item--anim-pulse .u-tabbar-item__icon {
+		animation: u-tabbar-item-pulse 1.4s ease-in-out infinite;
+	}
+
+	@keyframes u-tabbar-item-pulse {
+		0%, 100% {
+			transform: scale(var(--up-tabbar-icon-scale, 1.1));
+		}
+		50% {
+			transform: scale(calc(var(--up-tabbar-icon-scale, 1.1) + 0.08));
+		}
 	}
 
 	/* #ifdef MP */

package/components/u-tabs/props.js

@@ -63,9 +63,14 @@ export const props = defineMixin({
 			default: () => defProps.tabs.keyName
 		},
         // 左侧图标样式
-        iconStyle: {
-            type: [String, Object],
-            default: () => defProps.tabs.iconStyle
-        }
-    }
-})
+        iconStyle: {
+            type: [String, Object],
+            default: () => defProps.tabs.iconStyle
+        },
+        // 形态模式，可选：capsule/card/pill-arrow/tag
+        shapeMode: {
+            type: String,
+            default: () => defProps.tabs.shapeMode
+        }
+    }
+})

package/components/u-tabs/tabs.js

@@ -25,9 +25,10 @@ export default {
         itemStyle: {
             height: '44px'
         },
-        scrollable: true,
-		current: 0,
-		keyName: 'name',
-        iconStyle: {}
-    }
-}
+        scrollable: true,
+		current: 0,
+		keyName: 'name',
+        iconStyle: {},
+        shapeMode: ''
+    }
+}

package/components/u-tabs/u-tabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="u-tabs" :class="[customClass]">
+	<view class="u-tabs" :class="[customClass, shapeModeClass]">
 		<view class="u-tabs__wrapper">
 			<slot name="left" />
 			<view class="u-tabs__wrapper__scroll-view-wrapper">
@@ -9,7 +9,8 @@
 						<view class="u-tabs__wrapper__nav__item" v-for="(item, index) in tabList" :key="index"
 							@tap="clickHandler(item, index)" @longpress="longPressHandler(item,index)"
 							:ref="`u-tabs__wrapper__nav__item-${index}`"
-							:style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]" :class="[`u-tabs__wrapper__nav__item-${index}`,
+							:style="[itemComputedStyle, {flex: scrollable ? '' : 1}]" :class="[`u-tabs__wrapper__nav__item-${index}`,
+								shapeMode && `u-tabs__wrapper__nav__item--${shapeMode}`,
 								item.disabled && 'u-tabs__wrapper__nav__item--disabled',
 								innerCurrent == index ? 'u-tabs__wrapper__nav__item-active' : '']">
 							<slot v-if="$slots.icon" name="icon" :item="item" :keyName="keyName" :index="index" />
@@ -36,6 +37,12 @@
 								:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
 								:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
 								customStyle="margin-left: 4px;"></u-badge>
+							<view
+								v-if="shapeMode === 'card' && innerCurrent == index && index < tabList.length - 1"
+								class="u-tabs__wrapper__nav__item__card-corner"></view>
+							<view
+								v-if="shapeMode === 'pill-arrow' && innerCurrent == index"
+								class="u-tabs__wrapper__nav__item__active-arrow"></view>
 						</view>
 						<!-- #ifdef APP-NVUE -->
 						<view class="u-tabs__wrapper__nav__line" ref="u-tabs__wrapper__nav__line" :style="[{
@@ -43,6 +50,7 @@
 								height: addUnit(lineHeight),
 								background: lineColor,
 								backgroundSize: lineBgSize,
+								display: showLine ? 'block' : 'none'
 							}]">
 						</view>
 						<!-- #endif -->
@@ -55,7 +63,7 @@
 								height: addUnit(lineHeight),
 								background: lineColor,
 								backgroundSize: lineBgSize,
-								display: lineShow ? 'block': 'none'
+								display: showLine ? 'block': 'none'
 							}]">
 						</view>
 						<!-- #endif -->
@@ -98,6 +106,7 @@
 	 * @property {String | Number}	duration			滑块移动一次所需的时间，单位秒（默认 200 ）
 	 * @property {String | Number}	swierWidth			swiper的宽度（默认 '750rpx' ）
 	 * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
+	 * @property {String}	shapeMode 标签形态模式，可选capsule/card/pill-arrow/tag（默认 '' ）
 	 * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
 	 * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
 	 * @event {Function(index)} longPress 长按标签时触发 index: 点击了第几个tab，索引从0开始
@@ -151,6 +160,31 @@
 			}
 		},
 		computed: {
+			shapeModeClass() {
+				return this.shapeMode ? `u-tabs--shape-${this.shapeMode}` : ''
+			},
+			showLine() {
+				return this.lineShow && !['capsule', 'pill-arrow', 'tag'].includes(this.shapeMode)
+			},
+			itemComputedStyle() {
+				const style = addStyle(this.itemStyle) || {}
+				if (this.upHasProp('itemStyle')) {
+					return style
+				}
+				const defaultModeHeights = {
+					capsule: '30px',
+					card: '34px',
+					'pill-arrow': '32px',
+					tag: '28px'
+				}
+				const height = defaultModeHeights[this.shapeMode]
+				if (!height) {
+					return style
+				}
+				return deepMerge(style, {
+					height
+				})
+			},
 			textStyle() {
 				return index => {
 					const style = {}
@@ -165,10 +199,14 @@
 						|| (customeStyle && customeStyle.color && customeStyle.color !== defaultActiveColor)
 					const isInactiveStyleOverridden = this.upHasProp('inactiveStyle')
 						|| (customeStyle && customeStyle.color && customeStyle.color !== defaultInactiveColor)
-					if (isActive && !isActiveStyleOverridden) {
+					if (isActive && ['pill-arrow', 'tag'].includes(this.shapeMode) && !isActiveStyleOverridden) {
+						style.color = '#ffffff'
+					} else if (isActive && !isActiveStyleOverridden) {
 						style.color = this.upThemeVar('--up-main-color', this.$u.color.mainColor || defaultActiveColor)
 					}
-					if (!isActive && !isInactiveStyleOverridden) {
+					if (!isActive && ['pill-arrow', 'tag'].includes(this.shapeMode) && !isInactiveStyleOverridden) {
+						style.color = '#606266'
+					} else if (!isActive && !isInactiveStyleOverridden) {
 						style.color = this.upThemeVar('--up-content-color', this.$u.color.contentColor || defaultInactiveColor)
 					}
 					// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
@@ -375,6 +413,7 @@
 				&__item {
 					padding: 0 11px;
 					@include flex;
+					position: relative;
 					align-items: center;
 					justify-content: center;
 					/* #ifdef H5 */
@@ -396,6 +435,30 @@
 							color: $u-disabled-color !important;
 						}
 					}
+
+					&__card-corner {
+						position: absolute;
+						top: 0;
+						right: -10px;
+						width: 20px;
+						height: 100%;
+						background-color: inherit;
+						transform: skewX(25deg);
+						border-top-right-radius: 10px;
+						z-index: 1;
+					}
+
+					&__active-arrow {
+						position: absolute;
+						left: 50%;
+						bottom: -6px;
+						width: 0;
+						height: 0;
+						border-left: 6px solid transparent;
+						border-right: 6px solid transparent;
+						border-top: 6px solid #ff3b30;
+						transform: translateX(-50%);
+					}
 				}
 
 				&__line {
@@ -410,5 +473,82 @@
 				}
 			}
 		}
+
+		&--shape-capsule {
+			.u-tabs__wrapper__scroll-view-wrapper {
+				padding: 3px;
+				border-radius: 999px;
+				background-color: #edf0f5;
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 30px;
+				padding: 0 14px;
+				border-radius: 999px;
+				transition: background-color 0.2s;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background-color: #ffffff;
+			}
+		}
+
+		&--shape-card {
+			.u-tabs__wrapper__scroll-view-wrapper {
+				padding: 0;
+				border-radius: 10px;
+				background-color: #9ccde5;
+				box-shadow: inset 0 0 0 1px rgba(96, 98, 102, 0.06);
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 34px;
+				padding: 0;
+				border-radius: 10px 10px 0 0;
+				transition: background-color 0.2s;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background-color: #f6f8fb;
+				box-shadow: inset 0 0 0 1px rgba(96, 98, 102, 0.06);
+				z-index: 2;
+			}
+		}
+
+		&--shape-pill-arrow {
+			.u-tabs__wrapper__nav {
+				padding-bottom: 6px;
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 32px;
+				padding: 0 12px;
+				border-radius: 8px;
+				background-color: #e8e8e8;
+				margin-right: 8px;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background: linear-gradient(90deg, #ff6c57 0%, #ff3b30 100%);
+			}
+		}
+
+		&--shape-tag {
+			.u-tabs__wrapper__nav {
+				padding: 2px 0;
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 28px;
+				padding: 0 14px;
+				border-radius: 999px;
+				background-color: #f3f4f6;
+				margin-right: 8px;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background-color: #2a6bf6;
+			}
+		}
 	}
 </style>