uview-ultra-plus 1.0.0

package/uview-ultra/components/up-tabbar/tabbar.uts

@@ -0,0 +1,24 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-12-22 00:10:00
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-22 00:10:00
+ * @FilePath     : /uview-ultra/libs/config/props/tabbar.uts
+ */
+export default {
+    // tabbar
+    tabbar: {
+        value: null as string | number | null,
+        safeAreaInsetBottom: true,
+        border: true,
+        zIndex: 1,
+        activeColor: '#1989fa',
+        inactiveColor: '#7d7e80',
+        fixed: true,
+        placeholder: true,
+        borderColor: '',
+        backgroundColor: ''
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-tabbar/up-tabbar.uvue

@@ -0,0 +1,149 @@
+<template>
+	<view class="up-tabbar">
+		<view
+		    class="up-tabbar__content"
+		    ref="up-tabbar__content"
+		    @touchmove.stop.prevent="noop"
+		    :class="[border ? 'up-border-top' : '', fixed ? 'up-tabbar--fixed' : '']"
+		    :style="[tabbarStyle]"
+		>
+			<view class="up-tabbar__content__item-wrapper">
+				<slot />
+			</view>
+			<up-safe-bottom v-if="safeAreaInsetBottom"></up-safe-bottom>
+		</view>
+		<view
+		    class="up-tabbar__placeholder"
+			v-if="placeholder"
+		    :style="{
+				height: placeholderHeight + 'px',
+			}"
+		></view>
+	</view>
+</template>
+
+<script lang="uts">
+	import { propsTabbar } from './props.uts';
+	import { mpMixin } from '../../libs/mixin/mpMixin.uts';
+	import { mixin } from '../../libs/mixin/mixin.uts';
+	import { addStyle, deepMerge, sleep } from '../../libs/function/index.uts';
+	import { nextTick } from 'vue';
+	
+	/**
+	 * Tabbar 底部导航栏
+	 * @description 此组件提供了自定义tabbar的能力。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/tabbar.html
+	 * @property {String | Number}	value				当前匹配项的name
+	 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
+	 * @property {Boolean}			border				是否显示上方边框（默认 true ）
+	 * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
+	 * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
+	 * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
+	 * @property {Boolean}			fixed				是否固定在底部（默认 true ）
+	 * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
+	 * @property {String}			backgroundColor		背景色（默认 '#ffffff' ）
+	 * @property {Object}			customStyle			定义需要用到的外部样式
+	 * 
+	 * @example <up-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><up-tabbar-item text="首页" icon="home" dot ></up-tabbar-item></up-tabbar>
+	 */
+	export default {
+		name: 'up-tabbar',
+		mixins: [mpMixin, mixin, propsTabbar],
+		data() {
+			return {
+				placeholderHeight: 0
+			}
+		},
+		emits: ['change'],
+		computed: {
+			tabbarStyle(): any {
+				const style = {
+					zIndex: this.zIndex
+				}
+				if (this.borderColor != '') {
+					style['borderColor'] = this.borderColor + ' !important'
+				}
+				if (this.backgroundColor != '') {
+					style['backgroundColor'] = this.backgroundColor
+				}
+				// 合并来自父组件的customStyle样式
+				return deepMerge(style, addStyle(this.customStyle))
+			},
+			// 监听多个参数的变化，通过在computed执行对应的操作
+			updateChild(): Array<any | null> {
+				return [this.value, this.activeColor, this.inactiveColor]
+			},
+			updatePlaceholder(): any[] {
+				return [this.fixed, this.placeholder]
+			}
+		},
+		watch: {
+			updateChild() {
+				// 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
+				this.updateChildren()
+			},
+			updatePlaceholder() {
+				// 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
+				this.setPlaceholderHeight()
+			}
+		},
+		created() {
+			// this.children = []
+		},
+		mounted() {
+			this.setPlaceholderHeight()
+		},
+		methods: {
+			updateChildren() {
+				// 如果存在子元素，则执行子元素的updateFromParent进行更新数据
+				// @ts-ignore
+				if(this.children.length > 0) {
+					// @ts-ignore
+					this.children.map((child: ComponentPublicInstance) => {
+						child?.$callMethod('updateFromParent')
+					})
+				}
+			},
+			// 设置用于防止塌陷元素的高度
+			async setPlaceholderHeight() {
+				if (!this.fixed || !this.placeholder) return
+				// 延时一定时间
+				await sleep(20)
+				// @ts-ignore
+				this.upGetRect('.up-tabbar__content').then((size: NodeInfo) => {
+					// 修复IOS safearea bottom 未填充高度
+					this.placeholderHeight = size.height ?? 50
+				})
+			},
+			noop() {}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	.up-tabbar {
+		@include flex(column);
+		flex: 1;
+		justify-content: center;
+		
+		&__content {
+			@include flex(column);
+			background-color: #fff;
+			
+			&__item-wrapper {
+				height: 50px;
+				@include flex(row);
+				justify-content: space-around;
+			}
+		}
+
+		&--fixed {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+</style>

package/uview-ultra/components/up-tabbar/up-tabbar.vue

@@ -0,0 +1,151 @@
+<template>
+	<view class="up-tabbar">
+		<view
+		    class="up-tabbar__content"
+		    ref="up-tabbar__content"
+		    @touchmove.stop.prevent="noop"
+		    :class="[border && 'up-border-top', fixed && 'up-tabbar--fixed']"
+		    :style="[tabbarStyle]"
+		>
+			<view class="up-tabbar__content__item-wrapper">
+				<slot />
+			</view>
+			<up-safe-bottom v-if="safeAreaInsetBottom"></up-safe-bottom>
+		</view>
+		<view
+		    class="up-tabbar__placeholder"
+			v-if="placeholder"
+		    :style="{
+				height: placeholderHeight + 'px',
+			}"
+		></view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle, deepMerge, sleep } from '../../libs/function/index';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * Tabbar 底部导航栏
+	 * @description 此组件提供了自定义tabbar的能力。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/tabbar.html
+	 * @property {String | Number}	value				当前匹配项的name
+	 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
+	 * @property {Boolean}			border				是否显示上方边框（默认 true ）
+	 * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
+	 * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
+	 * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
+	 * @property {Boolean}			fixed				是否固定在底部（默认 true ）
+	 * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
+	 * @property {String}			backgroundColor		背景色（默认 '#ffffff' ）
+	 * @property {Object}			customStyle			定义需要用到的外部样式
+	 * 
+	 * @example <up-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><up-tabbar-item text="首页" icon="home" dot ></up-tabbar-item></up-tabbar>
+	 */
+	export default {
+		name: 'up-tabbar',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				placeholderHeight: 0
+			}
+		},
+		computed: {
+			tabbarStyle() {
+				const style = {
+					zIndex: this.zIndex
+				}
+				if (this.borderColor) {
+					style.borderColor = this.borderColor + ' !important'
+				}
+				if (this.backgroundColor) {
+					style.backgroundColor = this.backgroundColor
+				}
+				// 合并来自父组件的customStyle样式
+				return deepMerge(style, addStyle(this.customStyle))
+			},
+			// 监听多个参数的变化，通过在computed执行对应的操作
+			updateChild() {
+				return [this.value, this.activeColor, this.inactiveColor]
+			},
+			updatePlaceholder() {
+				return [this.fixed, this.placeholder]
+			}
+		},
+		watch: {
+			updateChild() {
+				// 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
+				this.updateChildren()
+			},
+			updatePlaceholder() {
+				// 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
+				this.setPlaceholderHeight()
+			}
+		},
+		created() {
+			this.children = []
+		},
+		mounted() {
+			this.setPlaceholderHeight()
+		},
+		methods: {
+			updateChildren() {
+				// 如果存在子元素，则执行子元素的updateFromParent进行更新数据
+				this.children.length && this.children.map(child => child.updateFromParent())
+			},
+			// 设置用于防止塌陷元素的高度
+			async setPlaceholderHeight() {
+				if (!this.fixed || !this.placeholder) return
+				// 延时一定时间
+				await sleep(20)
+				// #ifndef APP-NVUE
+				this.$uGetRect('.up-tabbar__content').then(({height = 50}) => {
+					// 修复IOS safearea bottom 未填充高度
+					this.placeholderHeight = height
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['up-tabbar__content'], (res) => {
+					const {
+						size
+					} = res
+					this.placeholderHeight = size.height
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.up-tabbar {
+		@include flex(column);
+		flex: 1;
+		justify-content: center;
+		
+		&__content {
+			@include flex(column);
+			background-color: #fff;
+			
+			&__item-wrapper {
+				height: 50px;
+				@include flex(row);
+				justify-content: space-around;
+			}
+		}
+
+		&--fixed {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+</style>

package/uview-ultra/components/up-tabbar-item/props.js

@@ -0,0 +1,41 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // item标签的名称，作为与u-tabbar的value参数匹配的标识符
+        name: {
+            type: [String, Number, null],
+            default: () => defProps.tabbarItem.name
+        },
+        // uview-plus内置图标或者绝对路径的图片
+        icon: {
+            icon: String,
+            default: () => defProps.tabbarItem.icon
+        },
+        // 右上角的角标提示信息
+        badge: {
+            type: [String, Number, null],
+            default: () => defProps.tabbarItem.badge
+        },
+        // 是否显示圆点，将会覆盖badge参数
+        dot: {
+            type: Boolean,
+            default: () => defProps.tabbarItem.dot
+        },
+        // 描述文本
+        text: {
+            type: String,
+            default: () => defProps.tabbarItem.text
+        },
+        // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
+        badgeStyle: {
+            type: [Object, String],
+            default: () => defProps.tabbarItem.badgeStyle
+        },
+        // 模式，默认普通模式，midButton中间按钮模式
+        mode: {
+            type: String,
+            default: () => defProps.tabbarItem.mode
+        }
+    }
+})

package/uview-ultra/components/up-tabbar-item/props.uts

@@ -0,0 +1,51 @@
+/*
+ * @Author       : ly
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2025-12-22 00:32:00
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-22 00:32:00
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './tabbarItem.uts'
+let tabbarItemProp = defProps['tabbarItem'] as UTSJSONObject
+
+export const propsTabbarItem = defineMixin({
+    props: {
+        // item标签的名称，作为与u-tabbar的value参数匹配的标识符
+        name: {
+            type: [String, Number, null],
+            default: tabbarItemProp['name']
+        },
+        // uview-plus内置图标或者绝对路径的图片
+        icon: {
+            icon: String,
+            default: tabbarItemProp['icon']
+        },
+        // 右上角的角标提示信息
+        badge: {
+            type: [String, Number, null],
+            default: tabbarItemProp['badge']
+        },
+        // 是否显示圆点，将会覆盖badge参数
+        dot: {
+            type: Boolean,
+            default: tabbarItemProp['dot']
+        },
+        // 描述文本
+        text: {
+            type: String,
+            default: tabbarItemProp['text']
+        },
+        // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
+        badgeStyle: {
+            type: [UTSJSONObject, String],
+            default: tabbarItemProp['badgeStyle']
+        },
+        // 模式，默认普通模式，midButton中间按钮模式
+        mode: {
+            type: String,
+            default: tabbarItemProp['mode']
+        }
+    }
+})

package/uview-ultra/components/up-tabbar-item/tabbarItem.js

@@ -0,0 +1,21 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-19 08:55:21
+ * @FilePath     : /uview-ultra/libs/config/props/tabbarItem.js
+ */
+export default {
+    //
+    tabbarItem: {
+        name: null,
+        icon: '',
+        badge: null,
+        dot: false,
+        text: '',
+        badgeStyle: 'top: 6px;right:2px;',
+        mode: ''
+    }
+}

package/uview-ultra/components/up-tabbar-item/tabbarItem.uts

@@ -0,0 +1,21 @@
+/*
+ * @Author       : ly
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-12-22 00:30:00
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-22 00:30:00
+ * @FilePath     : /uview-ultra/libs/config/props/tabbarItem.uts
+ */
+export default {
+    //
+    tabbarItem: {
+        name: null as string | number | null,
+        icon: '',
+        badge: null as string | number | null,
+        dot: false,
+        text: '',
+        badgeStyle: 'top: 6px;right:2px;',
+        mode: ''
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-tabbar-item/up-tabbar-item.uvue

@@ -0,0 +1,207 @@
+<template>
+	<view
+	    class="up-tabbar-item"
+	    :style="[addStyle(customStyle)]"
+	    :class="[isMidButton ? 'up-tabbar-item--mid-button' : '']"
+	    @tap="clickHandler"
+	>
+		<view 
+			class="up-tabbar-item__icon"
+			:class="[isMidButton ? 'up-tabbar-item__icon--mid-button' : '']"
+		>
+			<view class="up-tabbar-item--mid-button-cover" v-if="isMidButton">
+			</view>
+			<up-icon
+			    v-if="icon"
+			    :name="icon"
+			    :color="isActive? parentData['activeColor'] : parentData['inactiveColor']"
+			    :size="isMidButton ? 26 : 20"
+			></up-icon>
+			<template v-else>
+				<slot
+				    v-if="isActive"
+				    name="active-icon"
+				/>
+				<slot
+				    v-else
+				    name="inactive-icon"
+				/>
+			</template>
+			<up-badge
+				absolute
+				:offset="[0, dot ? '34rpx' : parseInt(badge.toString()) > 9 ? '14rpx' : '20rpx']"
+			    :customStyle="badgeStyle"
+			    :isDot="dot"
+			    :value="badge != null  ? (dot ? 1 : badge) : 0"
+			    :show="dot ? dot : parseInt(badge.toString()) > 0"
+			></up-badge>
+		</view>
+		
+		<slot name="text">
+			<text
+			    class="up-tabbar-item__text"
+			    :style="{
+					color: isActive? parentData['activeColor'] : parentData['inactiveColor']
+				}"
+			>{{ text }}</text>
+		</slot>
+	</view>
+</template>
+
+<script lang="uts">
+	import { propsTabbarItem } from './props.uts';
+	import { mpMixin } from '../../libs/mixin/mpMixin.uts';
+	import { mixin } from '../../libs/mixin/mixin.uts';
+	import { addStyle, error } from '../../libs/function/index.uts';
+	import { nextTick } from 'vue';
+	/**
+	 * TabbarItem 底部导航栏子组件
+	 * @description 此组件提供了自定义tabbar的能力。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/tabbar.html
+	 * @property {String | Number}	name		item标签的名称，作为与up-tabbar的value参数匹配的标识符
+	 * @property {String}			icon		uView内置图标或者绝对路径的图片
+	 * @property {String | Number}	badge		右上角的角标提示信息
+	 * @property {Boolean}			dot			是否显示圆点，将会覆盖badge参数（默认 false ）
+	 * @property {String}			text		描述文本
+	 * @property {Object | String}	badgeStyle	控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * 
+	 * @example <up-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><up-tabbar-item text="首页" icon="home" dot ></up-tabbar-item></up-tabbar>
+	 */
+	export default {
+		name: 'up-tabbar-item',
+		mixins: [mpMixin, mixin, propsTabbarItem],
+		data() {
+			return {
+				isActive: false, // 是否处于激活状态
+				parentData: {
+					value: null as string | number | null,
+					activeColor: '',
+					inactiveColor: ''
+				}
+			}
+		},
+		//  微信小程序中 options 选项
+		options: {
+		    virtualHost: true //将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
+		},
+		computed: {
+			// 计算是否为中间按钮
+			isMidButton(): boolean {
+				return this.mode === 'midButton';
+			}
+		},
+		created() {
+			this.init()
+		},
+		emits: ["click", "change"],
+		methods: {
+			addStyle(val: any): any {
+				return addStyle(val)
+			},
+			init() {
+				// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+				this.updateParentData()
+				if (this.parent == null) {
+					error('up-tabbar-item必须搭配up-tabbar组件使用')
+				}
+				// 本子组件在up-tabbar的children数组中的索引
+				// @ts-ignore
+				const index = this.getChildIndex(this)
+				// 判断本组件的name(如果没有定义name，就用index索引)是否等于父组件的value参数
+				this.isActive = (this.name != null ? this.name : index) === this.parentData['value']
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				// @ts-ignore
+				this.getParentData('up-tabbar')
+			},
+			// 此方法将会被父组件up-tabbar调用
+			updateFromParent() {
+				// 重新初始化
+				this.init()
+			},
+			clickHandler() {
+				nextTick(() => {
+					// @ts-ignore
+					const index = this.getChildIndex(this)
+					const name = this.name != null ? this.name : index
+					// 点击的item为非激活的item才发出change事件
+					// @ts-ignore
+					if (this.parent != null && name.toString() != this.parent.$props['value'].toString()) {
+						// @ts-ignore
+						this.parent.$emit('change', name)
+					}
+					this.$emit('click', name)
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	
+	.up-tabbar-item {
+		@include flex(column);
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		height: 100%;
+		/* #endif */
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+		
+		&__icon {
+			@include flex;
+			position: relative;
+			width: 150rpx;
+			justify-content: center;
+		}
+
+		&__text {
+			margin-top: 2px;
+			font-size: 12px;
+			color: $up-content-color;
+		}
+	}
+	
+	// 中间按钮样式
+	.up-tabbar-item--mid-button {
+		/* #ifndef APP-NVUE */
+		transform: translateY(-10px);
+		/* #endif */
+	}
+	
+	.up-tabbar-item--mid-button-cover {
+		background-color: #fff;
+		position: absolute;
+		top: 22px;
+		left: -10px;
+		// right: -10px;
+		width: 90px;
+		bottom: 0;
+	}
+	
+	.up-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才能让其撑开
+	:host {
+		flex: 1;
+		width: 100%;
+	}
+	/* #endif */
+</style>