uview-ultra-plus 1.0.0

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

@@ -0,0 +1,349 @@
+<template>
+	<view class="up-dropdown" :style="{
+		height: active ? $up.addUnit((contentHeight + parseInt(props.height.toString()))) : $up.addUnit(props.height)
+	}">
+		<view class="up-dropdown__menu" :style="{
+			height: $up.addUnit(props.height)
+		}" :class="{
+			'u-border-bottom': props.borderBottom
+		}">
+			<view class="up-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
+				<view class="up-flex up-flex-row">
+					<text class="up-dropdown__menu__item__text" :style="{
+						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndexList.includes(index)) ? props.activeColor : props.inactiveColor,
+						fontSize: $up.addUnit(props.titleSize)
+					}">{{item['title']}}</text>
+					<view class="up-dropdown__menu__item__arrow" :class="{
+						'up-dropdown__menu__item__arrow--rotate': index === current
+					}">
+						<up-icon :custom-style="{display: 'flex'}" :name="props.menuIcon"
+							:size="$up.addUnit(props.menuIconSize)"
+							:color="index === current || highlightIndexList.includes(index) ? props.activeColor : '#c0c4cc'"></up-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="up-dropdown__content" :style="[contentStyle, {
+			top: $up.addUnit(props.height),
+			transition: `opacity ${parseInt(props.duration.toString()) / 1000}s, z-index ${parseInt(props.duration.toString()) / 1000}s linear`,
+		}]"
+		 @tap="maskClick" @touchmove.stop.prevent>
+			<view @tap.stop.prevent class="up-dropdown__content__popup" :style="[popupStyle, {
+			}]">
+				<slot></slot>
+			</view>
+			<view class="up-dropdown__content__mask"></view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { computed, ref, watch, onMounted } from 'vue'
+	import { addUnit, getWindowInfo, upGetRect } from '../../libs/function/index.uts';
+	import defProps from './dropdown.uts'
+	import { UPDropdownMenu} from './types.uts';
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI'
+	const { children, getChildren, addChild } = useUltraUI()
+	const instance = getCurrentInstance()!.proxy!
+	
+	defineOptions({
+		name: 'up-dropdown'
+	})
+	
+	// 定义 props
+	const props = defineProps({
+		// 菜单标题和选项的激活态颜色
+		activeColor: {
+			type: String,
+			default: defProps.getString('dropdown.activeColor')
+		},
+		// 菜单标题和选项的未激活态颜色
+		inactiveColor: {
+			type: String,
+			default: defProps.getString('dropdown.inactiveColor')
+		},
+		// 点击遮罩是否关闭菜单
+		closeOnClickMask: {
+			type: Boolean,
+			default: defProps.getBoolean('dropdown.closeOnClickMask')
+		},
+		// 点击当前激活项标题是否关闭菜单
+		closeOnClickSelf: {
+			type: Boolean,
+			default: defProps.getBoolean('dropdown.closeOnClickSelf')
+		},
+		// 过渡时间
+		duration: {
+			type: [Number, String],
+			default: defProps.getNumber('dropdown.duration')
+		},
+		// 标题菜单的高度
+		height: {
+			type: [Number, String],
+			default: defProps.getNumber('dropdown.height')
+		},
+		// 是否显示下边框
+		borderBottom: {
+			type: Boolean,
+			default: defProps.getBoolean('dropdown.borderBottom')
+		},
+		// 标题的字体大小
+		titleSize: {
+			type: [Number, String],
+			default: defProps.getNumber('dropdown.titleSize')
+		},
+		// 下拉出来的内容部分的圆角值
+		borderRadius: {
+			type: [Number, String],
+			default: defProps.getNumber('dropdown.borderRadius')
+		},
+		// 菜单右侧的icon图标
+		menuIcon: {
+			type: String,
+			default: defProps.getString('dropdown.menuIcon')
+		},
+		// 菜单右侧图标的大小
+		menuIconSize: {
+			type: [Number, String],
+			default: defProps.getNumber('dropdown.menuIconSize')
+		}
+	});
+	
+	// 定义 emit
+	const emit = defineEmits(['open', 'close']);
+	
+	// 定义响应式数据
+	const showDropdown = ref(true); // 是否打开下来菜单
+	const menuList = ref([] as Array<UPDropdownMenu>); // 显示的菜单
+	const active = ref(false); // 下拉菜单的状态
+	// 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
+	// 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
+	const current = ref(99999 as number);
+	// 外层内容的样式，初始时处于底层，且透明
+	const contentStyle = ref<UTSJSONObject>({
+		zIndex: -1,
+		opacity: 0
+	});
+	// 让某些菜单保持高亮的状态
+	const highlightIndexList = ref([] as Array<number>)
+	const contentHeight = ref(0 as number)
+	
+	// 下拉出来部分的样式
+	const popupStyle = computed(() => {
+		let style = {}
+		// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
+		style['transform'] = `translateY(${active.value ? 0 : '-100%'})`
+		// @ts-ignore
+		style['transition-duration'] = parseInt(props.duration.toString()) / 1000 + 's'
+		style['borderRadius'] = `0 0 ${addUnit(props.borderRadius)} ${addUnit(props.borderRadius)}`
+		return style
+	})
+
+	function getWindowInfoWrapper() {
+		return getWindowInfo();
+	}
+	
+	function init() {
+		// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
+		// 以保证数据的正确性
+		menuList.value = [];
+		if (children.value != null) {
+			children.value?.map((child: ComponentPublicInstance) => {
+				child.$callMethod('init');
+			});
+		}
+	}
+	
+	// 获取下拉菜单内容的高度
+	function getContentHeight() {
+		// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
+		// 才能让遮罩占满菜单一下，直到屏幕底部的高度
+		// getWindowInfo()为uview-plus封装的获取设备信息的方法
+		let windowHeight = getWindowInfoWrapper().windowHeight;
+		// @ts-ignore
+		upGetRect('.up-dropdown__menu', false, instance).then((res) => {
+			// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
+			// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
+			// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
+			// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
+			if (res.bottom != null) {
+				contentHeight.value = windowHeight - res.bottom;
+			} else {
+				contentHeight.value = windowHeight;
+			}
+		});
+	}
+	
+	// 打开下拉菜单
+	function open(index: number) {
+		// 嵌套popup使用时可能获取不到正确的高度，重新计算
+		if (contentHeight.value < 1) getContentHeight();
+		// 重置高亮索引，否则会造成多个菜单同时高亮
+		// highlightIndex = 9999;
+		// 展开时，设置下拉内容的样式
+		contentStyle.value = {
+			zIndex: 11,
+			height: contentHeight.value + 'px'
+		};
+		// 标记展开状态以及当前展开项的索引
+		active.value = true;
+		current.value = index;
+		// 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
+		// 之所以不是因display: none，是因为nvue没有display这个属性
+		if (children.value != null) {
+			children.value.map((val: ComponentPublicInstance, idx: number) => {
+				if (index == idx) {
+					val.$callMethod('setActive', true)
+				} else {
+					val.$callMethod('setActive', false)
+				}
+			});
+		}
+		emit('open', current.value);
+	}
+	
+	// 设置下拉菜单处于收起状态
+	function close() {
+		emit('close', current.value);
+		// 设置为收起状态，同时current归位，设置为空字符串
+		active.value = false;
+		current.value = 99999;
+		// 下拉内容的样式进行调整，不透明度设置为0
+		contentStyle.value['zIndex'] = -1;
+		contentStyle.value['opacity'] = 0;
+		setTimeout(() => {
+			contentStyle.value['height'] = 0;
+		}, parseInt(props.duration.toString()));
+	}
+	
+	// 点击菜单
+	function menuClick(index: number) {
+		// 判断是否被禁用
+		if (menuList.value[index].disabled) return;
+		// 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
+		if (index === current.value && props.closeOnClickSelf) {
+			close();
+			// 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
+			setTimeout(() => {
+				if (children.value != null && children.value[index] != null) {
+					children.value[index].$data['active'] = false;
+				}
+			}, parseInt(props.duration.toString()));
+			return;
+		}
+		open(index);
+	}
+	
+	// 点击遮罩
+	function maskClick() {
+		// 如果不允许点击遮罩，直接返回
+		if (!props.closeOnClickMask) return;
+		close();
+	}
+	
+	// 外部手动设置某些菜单高亮
+	function highlight(indexParams: Array<number> | string | number | null = null) {
+        if (Array.isArray(indexParams) && indexParams !== null) {
+            highlightIndexList.value = indexParams;
+            return;
+        }
+		highlightIndexList.value = [];
+		if (indexParams != null) {
+			highlightIndexList.value.push(parseInt(indexParams.toString()));
+		}
+	}
+	
+	const addMenuListItem = (op: UPDropdownMenu) => {
+		menuList.value.push(op)
+	}
+	
+	// 在组件挂载时初始化
+	onMounted(() => {
+		getContentHeight();
+	});
+	
+	// 暴露方法给子组件
+	defineExpose({
+		init,
+		close,
+		highlight,
+		getChildren,
+		addChild,
+		children,
+		addMenuListItem
+	});
+</script>
+
+<style scoped lang="scss">
+
+	.up-dropdown {
+		flex: 1;
+		width: 100%;
+		position: relative;
+
+		&__menu {
+			@include flex;
+			position: relative;
+			z-index: 11;
+			height: 80rpx;
+
+			&__item {
+				flex: 1;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+
+                .up-flex-row {
+                    flex-direction: row;
+                }
+
+				&__text {
+					font-size: 28rpx;
+					color: $up-content-color;
+				}
+
+				&__arrow {
+					margin-left: 6rpx;
+					transition: transform .3s;
+					align-items: center;
+					@include flex;
+
+					&--rotate {
+						transform: rotate(180deg);
+					}
+				}
+			}
+		}
+
+		&__content {
+			// background-color: red;
+			border: 0px solid blue;
+			position: absolute;
+			z-index: 8;
+			width: 100%;
+			left: 0px;
+			bottom: 0;
+			top: 80rpx;
+			overflow: hidden;
+
+			&__mask {
+				position: absolute;
+				z-index: 9;
+				background: rgba(0, 0, 0, .3);
+				width: 100%;
+				left: 0;
+				top: 0;
+				bottom: 0;
+			}
+
+			&__popup {
+				position: relative;
+				z-index: 10;
+				transition: transform 0.3s;
+				transform: translate3D(0, -100%, 0);
+				overflow: hidden;
+			}
+		}
+
+	}
+</style>

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

@@ -0,0 +1,259 @@
+<template>
+	<view class="up-dropdown">
+		<view class="up-dropdown__menu" :style="{
+			height: addUnit(height)
+		}" :class="{
+			'u-border-bottom': borderBottom
+		}">
+			<view class="up-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
+				<view class="up-flex up-flex-row">
+					<text class="up-dropdown__menu__item__text" :style="{
+						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndexList.includes(index)) ? activeColor : inactiveColor,
+						fontSize: addUnit(titleSize)
+					}">{{item['title']}}</text>
+					<view class="up-dropdown__menu__item__arrow" :class="{
+						'up-dropdown__menu__item__arrow--rotate': index === current
+					}">
+						<up-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="addUnit(menuIconSize)" :color="index === current || highlightIndexList.includes(index) ? activeColor : '#c0c4cc'"></up-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="up-dropdown__content" :style="[contentStyle, {
+			transition: `opacity ${duration / 1000}s, z-index ${duration / 1000}s linear`,
+			top: addUnit(height)
+		}]"
+		 @tap="maskClick" @touchmove.stop.prevent>
+			<view @tap.stop.prevent class="up-dropdown__content__popup" :style="[popupStyle, {
+			}]">
+				<slot></slot>
+			</view>
+			<view class="up-dropdown__content__mask"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+    import { props } from './props';
+    import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, getWindowInfo} from '../../libs/function/index';
+	/**
+	 * dropdown 下拉菜单
+	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+	 * @tutorial https://ijry.github.io/uview-plus/components/dropdown.html
+	 * @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
+	 * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
+	 * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
+	 * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
+	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+	 * @property {String | Number} height 标题菜单的高度，单位任意（默认80）
+	 * @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
+	 * @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
+	 * @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
+	 * @event {Function} open 下拉菜单被打开时触发
+	 * @event {Function} close 下拉菜单被关闭时触发
+	 * @example <up-dropdown></up-dropdown>
+	 */
+	export default {
+		name: 'up-dropdown',
+        mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				showDropdown: true, // 是否打开下来菜单,
+				menuList: [], // 显示的菜单
+				active: false, // 下拉菜单的状态
+				// 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
+				// 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
+				current: 99999,
+				// 外层内容的样式，初始时处于底层，且透明
+				contentStyle: {
+					zIndex: -1,
+					opacity: 0
+				},
+				// 让某些菜单保持高亮的状态
+				highlightIndexList: [],
+				contentHeight: 0
+			}
+		},
+		computed: {
+			// 下拉出来部分的样式
+			popupStyle() {
+				let style = {};
+				// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
+				style['transform'] = `translateY(${this.active ? 0 : '-100%'})`
+				style['transition-duration'] = this.duration / 1000 + 's';
+				style['borderRadius'] = `0 0 ${addUnit(this.borderRadius)} ${addUnit(this.borderRadius)}`;
+				return style;
+			}
+		},
+		created() {
+			// 引用所有子组件(up-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
+			this.children = [];
+		},
+		mounted() {
+			this.getContentHeight();
+		},
+        emits: ['open', 'close'],
+		methods: {
+			addUnit,
+			init() {
+				// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
+				// 以保证数据的正确性
+				this.menuList = [];
+				this.children.map(child => {
+					child.init();
+				})
+			},
+			// 点击菜单
+			menuClick(index) {
+				// 判断是否被禁用
+				if (this.menuList[index].disabled) return;
+				// 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
+				if (index === this.current && this.closeOnClickSelf) {
+					this.close();
+					// 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
+					setTimeout(() => {
+						this.children[index].active = false;
+					}, this.duration)
+					return;
+				}
+				this.open(index);
+			},
+			// 打开下拉菜单
+			open(index) {
+				// 嵌套popup使用时可能获取不到正确的高度，重新计算
+				if (this.contentHeight < 1) this.getContentHeight()
+				// 重置高亮索引，否则会造成多个菜单同时高亮
+				// this.highlightIndex = 9999;
+				// 展开时，设置下拉内容的样式
+				this.contentStyle = {
+					zIndex: 11,
+					height: this.contentHeight + 'px'
+				}
+				// 标记展开状态以及当前展开项的索引
+				this.active = true;
+				this.current = index;
+				// 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
+				// 之所以不是因display: none，是因为nvue没有display这个属性
+				this.children.map((val, idx) => {
+					val['active'] = index == idx ? true : false;
+				})
+				this.$emit('open', this.current);
+			},
+			// 设置下拉菜单处于收起状态
+			close() {
+				this.$emit('close', this.current);
+				// 设置为收起状态，同时current归位，设置为空字符串
+				this.active = false;
+				this.current = 99999;
+				// 下拉内容的样式进行调整，不透明度设置为0
+				this.contentStyle.zIndex = -1;
+				this.contentStyle.opacity = 0;
+				setTimeout(() => {
+					this.contentStyle.height = 0;
+				}, this.duration)
+			},
+			// 点击遮罩
+			maskClick() {
+				// 如果不允许点击遮罩，直接返回
+				if (!this.closeOnClickMask) return;
+				this.close();
+			},
+			// 外部手动设置某些菜单高亮
+			highlight(indexParams = undefined) {
+                if (Array.isArray(indexParams)) {
+                    this.highlightIndexList = [...indexParams];
+                    return;
+                }
+				this.highlightIndexList = indexParams !== undefined ? [indexParams] : [];
+			},
+			// 获取下拉菜单内容的高度
+			getContentHeight() {
+				// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
+				// 才能让遮罩占满菜单一下，直到屏幕底部的高度
+				// getWindowInfo()为uview-plus封装的获取设备信息的方法
+				let windowHeight = getWindowInfo().windowHeight;
+				this.$uGetRect('.up-dropdown__menu').then(res => {
+					// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
+					// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
+					// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
+					// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
+					this.contentHeight = windowHeight - res.bottom;
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+
+	.up-dropdown {
+		flex: 1;
+		width: 100%;
+		position: relative;
+
+		&__menu {
+			@include flex;
+			position: relative;
+			z-index: 11;
+			height: 80rpx;
+
+			&__item {
+				flex: 1;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+
+                .up-flex-row {
+                    flex-direction: row;
+                }
+
+				&__text {
+					font-size: 28rpx;
+					color: $up-content-color;
+				}
+
+				&__arrow {
+					margin-left: 6rpx;
+					transition: transform .3s;
+					align-items: center;
+					@include flex;
+
+					&--rotate {
+						transform: rotate(180deg);
+					}
+				}
+			}
+		}
+
+		&__content {
+			position: absolute;
+			z-index: 8;
+			width: 100%;
+			left: 0px;
+			bottom: 0;
+			overflow: hidden;
+			
+
+			&__mask {
+				position: absolute;
+				z-index: 9;
+				background: rgba(0, 0, 0, .3);
+				width: 100%;
+				left: 0;
+				top: 0;
+				bottom: 0;
+			}
+
+			&__popup {
+				position: relative;
+				z-index: 10;
+				transition: transform 0.3s;
+				transform: translate3D(0, -100%, 0);
+				overflow: hidden;
+			}
+		}
+
+	}
+</style>

package/uview-ultra/components/up-dropdown-item/dropdown-item.uts

@@ -0,0 +1,25 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-11-18 09:30:08
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-11-18 09:30:08
+ * @FilePath     : /uview-ultra/uni_modules/uview-ultra/components/up-dropdown-item/dropdown-item.uts
+ */
+export default {
+    // dropdown-item组件
+    dropdownItem: {
+        // #ifdef VUE3
+        modelValue: '',
+        // #endif
+        // #ifdef VUE2
+        value: '',
+        // #endif
+        title: '',
+        options: [] as UTSJSONObject[],
+        disabled: false,
+        height: 'auto',
+        closeOnClickOverlay: true
+    }
+} as UTSJSONObject

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

@@ -0,0 +1,47 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // #ifdef VUE3
+        // 当前选中项的value值
+        modelValue: {
+            type: [Number, String, Array],
+            default: ''
+        },
+		// #endif
+		// #ifdef VUE2
+		// 当前选中项的value值
+        value: {
+            type: [Number, String, Array],
+            default: ''
+        },
+		// #endif
+        // 菜单项标题
+        title: {
+            type: [String, Number],
+            default: ''
+        },
+        // 选项数据，如果传入了默认slot，此参数无效
+        options: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        // 是否禁用此菜单项
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        // 下拉弹窗的高度
+        height: {
+            type: [Number, String],
+            default: 'auto'
+        },
+        // 点击遮罩是否可以收起弹窗
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: true
+        }
+    }
+})