uview-ultra 4.5.46

package/components/up-switch/up-switch.vue

@@ -0,0 +1,211 @@
+<template>
+	<view
+	    class="up-switch cursor-pointer"
+	    :class="[disabled && 'up-switch--disabled']"
+	    :style="[switchStyle, addStyle(customStyle)]"
+	    @tap="clickHandler"
+	>
+		<view
+		    class="up-switch__bg"
+		    :style="[bgStyle]"
+		>
+		</view>
+		<view
+		    class="up-switch__node"
+		    <!-- #ifdef VUE3 -->
+			:class="[modelValue && 'up-switch__node--on']"
+			<!-- #endif -->
+			<!-- #ifdef VUE2 -->
+			:class="[value && 'up-switch__node--on']"
+			<!-- #endif -->
+		    :style="[nodeStyle]"
+		    ref="up-switch__node"
+		>
+			<up-loading-icon
+			    :show="loading"
+			    mode="circle"
+			    timingFunction='linear'
+			    <!-- #ifdef VUE3 -->
+				:color="modelValue ? activeColor : 'var(--up-switch-loading-inactive-color, #AAABAD)'"
+				<!-- #endif -->
+				<!-- #ifdef VUE2 -->
+				:color="value ? activeColor : 'var(--up-switch-loading-inactive-color, #AAABAD)'"
+				<!-- #endif -->
+			    :size="size * 0.6"
+			/>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { computed, nextTick, watch } from 'vue'
+	import { props as switchProps } from './props.js'
+	import { commonProps } from '../../libs/composable/useUltraUI.js'
+	import { addStyle, addUnit, error } from '../../libs/function/index.js'
+	/**
+	 * switch 开关选择器
+	 * @description 选择开关一般用于只有两个选择，且只能选其一的场景。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/switch.html
+	 * @property {Boolean}						loading			是否处于加载中（默认 false ）
+	 * @property {Boolean}						disabled		是否禁用（默认 false ）
+	 * @property {String | Number}				size			开关尺寸，单位px （默认 25 ）
+	 * @property {String}						activeColor		打开时的背景色 （默认 '#2979ff' ）
+	 * @property {String} 						inactiveColor	关闭时的背景色 （默认 '#ffffff' ）
+	 * @property {Boolean | String | Number}	value			通过v-model双向绑定的值 （默认 false ）
+	 * @property {Boolean | String | Number}	activeValue		打开选择器时通过change事件发出的值 （默认 true ）
+	 * @property {Boolean | String | Number}	inactiveValue	关闭选择器时通过change事件发出的值 （默认 false ）
+	 * @property {Boolean}						asyncChange		是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
+	 * @property {String | Number}				space			圆点与外边框的距离 （默认 0 ）
+	 * @property {Object}						customStyle		定义需要用到的外部样式
+	 *
+	 * @event {Function} change 在switch打开或关闭时触发
+	 * @example <up-switch v-model="checked" active-color="red" inactive-color="#eee"></up-switch>
+	 */
+	defineOptions({
+		name: 'up-switch',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...switchProps.props
+	})
+	const emit = defineEmits(['update:modelValue', 'input', 'change'])
+
+	function validateValue(value) {
+		if (value !== props.inactiveValue && value !== props.activeValue) {
+			error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
+		}
+	}
+
+	const isActive = computed(() => {
+		// #ifdef VUE3
+		return props.modelValue === props.activeValue
+		// #endif
+		// #ifdef VUE2
+		return props.value === props.activeValue
+		// #endif
+	})
+
+	const customInactiveColor = computed(() => {
+		// 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
+		return props.inactiveColor !== '#fff' &&
+			props.inactiveColor !== '#ffffff' &&
+			props.inactiveColor !== 'var(--up-switch-inactive-color, #ffffff)'
+	})
+
+	const switchStyle = computed(() => {
+		const style = {}
+		// 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
+		style.width = addUnit(props.size * 2 + 2)
+		style.height = addUnit(Number(props.size) + 2)
+		// 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
+		// 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
+		if (customInactiveColor.value) {
+			style.borderColor = 'rgba(0, 0, 0, 0)'
+		}
+		style.backgroundColor = isActive.value ? props.activeColor : props.inactiveColor
+		return style
+	})
+
+	const nodeStyle = computed(() => {
+		const style = {}
+		// 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
+		style.width = addUnit(props.size - props.space)
+		style.height = addUnit(props.size - props.space)
+		const translateX = isActive.value ? addUnit(props.space) : addUnit(props.size)
+		style.transform = `translateX(-${translateX})`
+		return style
+	})
+
+	const bgStyle = computed(() => {
+		const style = {}
+		// 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
+		style.width = addUnit(Number(props.size) * 2 - props.size / 2)
+		style.height = addUnit(props.size)
+		style.backgroundColor = props.inactiveColor
+		// 打开时，让此元素收缩，否则反之
+		style.transform = `scale(${isActive.value ? 0 : 1})`
+		return style
+	})
+
+	function clickHandler() {
+		if (!props.disabled && !props.loading) {
+			const oldValue = isActive.value ? props.inactiveValue : props.activeValue
+			if (!props.asyncChange) {
+				// #ifdef VUE3
+				emit('update:modelValue', oldValue)
+				// #endif
+				// #ifdef VUE2
+				emit('input', oldValue)
+				// #endif
+			}
+			// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+			nextTick(() => {
+				emit('change', oldValue)
+			})
+		}
+	}
+
+	// #ifdef VUE3
+	watch(() => props.modelValue, validateValue, { immediate: true })
+	// #endif
+	// #ifdef VUE2
+	watch(() => props.value, validateValue, { immediate: true })
+	// #endif
+</script>
+
+<style lang="scss" scoped>
+	@import "./theme-vars.scss";
+
+	.up-switch {
+		@include flex(row);
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		position: relative;
+		background-color: var(--up-switch-inactive-color, #ffffff);
+		border-width: 1px;
+		border-radius: 100px;
+		transition: background-color 0.4s;
+		border-color: var(--up-switch-border-color, rgba(0, 0, 0, 0.12));
+		border-style: solid;
+		justify-content: flex-end;
+		align-items: center;
+		// 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
+		// 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
+		overflow: hidden;
+
+		&__node {
+			@include flex(row);
+			align-items: center;
+			justify-content: center;
+			border-radius: 100px;
+			background-color: var(--up-switch-dot-inactive-color, #ffffff);
+			border-radius: 100px;
+			box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
+			transition-property: transform;
+			transition-duration: 0.4s;
+			transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
+		}
+
+		&__bg {
+			position: absolute;
+			border-radius: 100px;
+			background-color: var(--up-switch-inactive-color, #ffffff);
+			transition-property: transform;
+			transition-duration: 0.4s;
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+			transition-timing-function: ease;
+		}
+
+		&--disabled {
+			opacity: 0.6;
+		}
+	}
+</style>

package/components/up-tabbar/props.js

@@ -0,0 +1,57 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+    props: {
+        // 当前匹配项的name
+        value: {
+            type: [String, Number],
+            default: () => defProps.tabbar.value
+        },
+        // 是否为iPhoneX留出底部安全距离
+        safeAreaInsetBottom: {
+            type: Boolean,
+            default: () => defProps.tabbar.safeAreaInsetBottom
+        },
+        // 是否显示上方边框
+        border: {
+            type: Boolean,
+            default: () => defProps.tabbar.border
+        },
+        // 上方边框颜色
+        borderColor: {
+            type: String,
+            default: () => defProps.tabbar.borderColor
+        },
+        // 元素层级z-index
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.tabbar.zIndex
+        },
+        // 选中标签的颜色
+        activeColor: {
+            type: String,
+            default: () => defProps.tabbar.activeColor
+        },
+        // 未选中标签的颜色
+        inactiveColor: {
+            type: String,
+            default: () => defProps.tabbar.inactiveColor
+        },
+        // 是否固定在底部
+        fixed: {
+            type: Boolean,
+            default: () => defProps.tabbar.fixed
+        },
+        // fixed定位固定在底部时，是否生成一个等高元素防止塌陷
+        placeholder: {
+            type: Boolean,
+            default: () => defProps.tabbar.placeholder
+        },
+        // 背景色
+        backgroundColor: {
+            type: String,
+            default: () => defProps.tabbar.backgroundColor
+        }
+    }
+})

package/components/up-tabbar/props.uts

@@ -0,0 +1,66 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-22 00:12:00
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './tabbar.uts'
+let tabbarProp = defProps['tabbar'] as UTSJSONObject
+
+export const propsTabbar = defineMixin({
+    props: {
+        // 当前匹配项的name
+        value: {
+            type: [String, Number],
+            default: tabbarProp['value']
+        },
+        // 是否为iPhoneX留出底部安全距离
+        safeAreaInsetBottom: {
+            type: Boolean,
+            default: tabbarProp['safeAreaInsetBottom']
+        },
+        // 是否显示上方边框
+        border: {
+            type: Boolean,
+            default: tabbarProp['border']
+        },
+        // 上方边框颜色
+        borderColor: {
+            type: String,
+            default: tabbarProp['borderColor']
+        },
+        // 元素层级z-index
+        zIndex: {
+            type: [String, Number],
+            default: tabbarProp['zIndex']
+        },
+        // 选中标签的颜色
+        activeColor: {
+            type: String,
+            default: tabbarProp['activeColor']
+        },
+        // 未选中标签的颜色
+        inactiveColor: {
+            type: String,
+            default: tabbarProp['inactiveColor']
+        },
+        // 是否固定在底部
+        fixed: {
+            type: Boolean,
+            default: tabbarProp['fixed']
+        },
+        // fixed定位固定在底部时，是否生成一个等高元素防止塌陷
+        placeholder: {
+            type: Boolean,
+            default: tabbarProp['placeholder']
+        },
+        // 背景色
+        backgroundColor: {
+            type: String,
+            default: tabbarProp['backgroundColor']
+        }
+    }
+})

package/components/up-tabbar/tabbar.js

@@ -0,0 +1,24 @@
+/*
+ * @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/tabbar.js
+ */
+export default {
+    // tabbar
+    tabbar: {
+        value: null,
+        safeAreaInsetBottom: true,
+        border: true,
+        zIndex: 1,
+        activeColor: '#1989fa',
+        inactiveColor: '#7d7e80',
+        fixed: true,
+        placeholder: true,
+        borderColor: '',
+        backgroundColor: ''
+    }
+}

package/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/components/up-tabbar/up-tabbar.uvue

@@ -0,0 +1,254 @@
+<template>
+	<view class="up-tabbar">
+		<view
+		    class="up-tabbar__content"
+		    ref="up-tabbar__content"
+		    @touchmove.stop.prevent="stopTabbarTouchMove"
+		    :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 setup lang="uts">
+	import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue';
+	import defProps from './tabbar.uts';
+	import { addStyle, deepMerge, sleep, upGetRect } from '../../libs/function/index.uts';
+	import { useUltraUI } from '../../libs/composable/useUltraUI.uts';
+	
+	/**
+	 * 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>
+	 */
+	const { children, getChildren, addChild } = useUltraUI()
+	const instance = getCurrentInstance()!.proxy!
+
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-tabbar'
+	})
+
+	const props = defineProps({
+		// 当前匹配项的name
+		value: {
+			type: [String, Number],
+			default: (defProps['tabbar'] as UTSJSONObject)['value']
+		},
+		// 是否为iPhoneX留出底部安全距离
+		safeAreaInsetBottom: {
+			type: Boolean,
+			default: (defProps['tabbar'] as UTSJSONObject)['safeAreaInsetBottom']
+		},
+		// 是否显示上方边框
+		border: {
+			type: Boolean,
+			default: (defProps['tabbar'] as UTSJSONObject)['border']
+		},
+		// 上方边框颜色
+		borderColor: {
+			type: String,
+			default: (defProps['tabbar'] as UTSJSONObject)['borderColor']
+		},
+		// 元素层级z-index
+		zIndex: {
+			type: [String, Number],
+			default: (defProps['tabbar'] as UTSJSONObject)['zIndex']
+		},
+		// 选中标签的颜色
+		activeColor: {
+			type: String,
+			default: (defProps['tabbar'] as UTSJSONObject)['activeColor']
+		},
+		// 未选中标签的颜色
+		inactiveColor: {
+			type: String,
+			default: (defProps['tabbar'] as UTSJSONObject)['inactiveColor']
+		},
+		// 是否固定在底部
+		fixed: {
+			type: Boolean,
+			default: (defProps['tabbar'] as UTSJSONObject)['fixed']
+		},
+		// fixed定位固定在底部时，是否生成一个等高元素防止塌陷
+		placeholder: {
+			type: Boolean,
+			default: (defProps['tabbar'] as UTSJSONObject)['placeholder']
+		},
+		// 背景色
+		backgroundColor: {
+			type: String,
+			default: (defProps['tabbar'] as UTSJSONObject)['backgroundColor']
+		},
+		customStyle: {
+			type: [Object, String],
+			default: () => ({})
+		}
+	})
+
+	const emit = defineEmits(['change'])
+	const placeholderHeight = ref(0)
+	const tabbarContentTop = ref(0)
+	const tabbarContentMeasured = ref(false)
+	const midButtonBorderTopOffset = computed((): number => props.border ? 0.25 : 0)
+
+	const parentDataSelf = computed((): UTSJSONObject => {
+		return {
+			value: props.value,
+			activeColor: props.activeColor,
+			inactiveColor: props.inactiveColor,
+			borderColor: props.borderColor,
+			border: props.border,
+			midButtonBorderTopOffset: midButtonBorderTopOffset.value,
+			tabbarContentTop: tabbarContentTop.value,
+			tabbarContentMeasured: tabbarContentMeasured.value
+		} as UTSJSONObject
+	})
+
+	const tabbarStyle = computed((): any => {
+		const style = {
+			zIndex: props.zIndex
+		} as UTSJSONObject
+		if (props.borderColor != '') {
+			style['borderColor'] = props.borderColor
+		}
+		if (props.backgroundColor != '') {
+			style['backgroundColor'] = props.backgroundColor
+		}
+		// 合并来自父组件的customStyle样式
+		return deepMerge(style, addStyle(props.customStyle))
+	})
+
+	// 监听多个参数的变化，通过在computed执行对应的操作
+	const updateChild = computed((): Array<any | null> => {
+		return [props.value, props.activeColor, props.inactiveColor, props.borderColor, props.border, tabbarContentTop.value, tabbarContentMeasured.value] as Array<any | null>
+	})
+
+	const updatePlaceholder = computed((): Array<any> => {
+		return [props.fixed, props.placeholder, props.border, props.customStyle] as Array<any>
+	})
+
+	const updateChildren = (): void => {
+		// 如果存在子元素，则执行子元素的updateFromParent进行更新数据
+		if (children.value.length > 0) {
+			children.value.map((child: ComponentPublicInstance) => {
+				child?.$callMethod('updateFromParent')
+			})
+		}
+	}
+
+	// 测量 tabbar 顶部，并在需要时同步防塌陷元素高度
+	const setPlaceholderHeight = async (): Promise<void> => {
+		// 延时一定时间
+		await sleep(20)
+		const size = await upGetRect('.up-tabbar__content', false, instance)
+		const height = size.height ?? 50
+		if (!isFinite(height) || height <= 0) return
+		if (props.fixed && props.placeholder) {
+			placeholderHeight.value = height
+		}
+		const top = size.top
+		if (top == null || !isFinite(top)) return
+		tabbarContentTop.value = top
+		tabbarContentMeasured.value = true
+		updateChildren()
+	}
+
+	const stopTabbarTouchMove = (_event: UniEvent): void => {}
+
+	const emitChange = (name: any | null): void => {
+		emit('change', name)
+	}
+
+	const getProps = (): UTSJSONObject => {
+		return parentDataSelf.value
+	}
+
+	const getRefs = (): UTSJSONObject => {
+		return {} as UTSJSONObject
+	}
+
+	watch(updateChild, () => {
+		// 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
+		updateChildren()
+	})
+
+	watch(updatePlaceholder, () => {
+		// 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
+		setPlaceholderHeight()
+	})
+
+	onMounted(() => {
+		setPlaceholderHeight()
+	})
+
+	defineExpose({
+		placeholderHeight,
+		tabbarContentTop,
+		tabbarContentMeasured,
+		midButtonBorderTopOffset,
+		tabbarStyle,
+		updateChild,
+		updatePlaceholder,
+		updateChildren,
+		setPlaceholderHeight,
+		stopTabbarTouchMove,
+		emitChange,
+		getChildren,
+		addChild,
+		getProps,
+		getRefs
+	})
+</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>