v-uni-app-ui 1.0.0 → 1.0.4

package/components/model/native/v-menu-slide/v-menu-slide.vue

@@ -0,0 +1,364 @@
+<template>
+	<view class="v-menu-slide" :class="[`v-menu-slide--${direction}`]">
+		<!-- 菜单标题区域 -->
+		<view :class="['menu-header', `menu-header--${direction}`]">
+			<view
+				v-for="(titleItem, index) in processedTitleItems"
+				:key="index"
+				:class="['menu-item', { 'menu-item--active': activeIndex === index }]"
+				@click="selectMenuItem(index)"
+			>
+				<slot name="title" :item="titleItem" :index="index" :active="activeIndex === index" :direction="direction">
+					<view class="menu-item__content" :class="[`menu-item__content--${direction}`]">
+						<text class="menu-item__text">{{ titleItem.title }}</text>
+					</view>
+				</slot>
+			</view>
+		</view>
+
+		<!-- 内容区域 -->
+		<view class="menu-content">
+			<swiper :current="activeIndex" :vertical="direction === 'y'" :duration="transitionDuration" @change="onSwiperChange" class="menu-content-swiper">
+				<swiper-item v-for="(contentItem, index) in processedContentItems" :key="index">
+					<view class="content-item">
+						<slot name="content" :item="contentItem" :index="index">
+							<text class="content-default-text">{{ contentItem.content || `内容 ${index + 1}` }}</text>
+						</slot>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue';
+
+const props = defineProps({
+	// 菜单项数据（合并格式）
+	items: {
+		type: Array,
+		default: () => []
+	},
+	// 菜单标题项数据（分开格式）
+	titleItems: {
+		type: Array,
+		default: () => []
+	},
+	// 菜单内容项数据（分开格式）
+	contentItems: {
+		type: Array,
+		default: () => []
+	},
+	// 排列方向：x（水平）或 y（垂直）
+	direction: {
+		type: String,
+		default: 'x',
+		validator: (value) => ['x', 'y'].includes(value)
+	},
+	// 默认激活的菜单项索引
+	defaultActive: {
+		type: Number,
+		default: 0
+	},
+	// 过渡动画时长（毫秒）
+	transitionDuration: {
+		type: Number,
+		default: 300
+	},
+	// 标题数据的关联键名
+	titleKey: {
+		type: String,
+		default: null
+	},
+	// 内容数据的关联键名
+	contentKey: {
+		type: String,
+		default: null
+	},
+	// 向后兼容的关联键名（如果设置了，会同时设置 titleKey 和 contentKey）
+	relationKey: {
+		type: String,
+		default: null
+	}
+});
+
+const emit = defineEmits(['update:active', 'change']);
+
+// 当前激活的菜单项索引
+const activeIndex = ref(props.defaultActive);
+
+// 计算实际使用的键名
+const effectiveTitleKey = computed(() => {
+	if (props.titleKey) return props.titleKey;
+	if (props.relationKey) return props.relationKey;
+	return null; // 默认按索引匹配
+});
+
+const effectiveContentKey = computed(() => {
+	if (props.contentKey) return props.contentKey;
+	if (props.relationKey) return props.relationKey;
+	return null; // 默认按索引匹配
+});
+
+// 检测数据格式
+const isSeparateFormat = computed(() => {
+	return props.titleItems.length > 0 && props.contentItems.length > 0;
+});
+
+// 处理标题项数据
+const processedTitleItems = computed(() => {
+	if (isSeparateFormat.value) {
+		return props.titleItems;
+	}
+	return props.items;
+});
+
+// 处理内容项数据
+const processedContentItems = computed(() => {
+	if (isSeparateFormat.value) {
+		// 分开格式：根据关联键匹配内容
+		if (effectiveTitleKey.value && effectiveContentKey.value && props.titleItems.length > 0 && props.contentItems.length > 0) {
+			return props.titleItems.map((titleItem) => {
+				const titleValue = titleItem[effectiveTitleKey.value];
+				const matchedContent = props.contentItems.find((contentItem) => contentItem[effectiveContentKey.value] === titleValue);
+				return matchedContent || { content: '暂无内容' };
+			});
+		}
+
+		// 分开格式：按索引匹配
+		return props.contentItems.length > 0 ? props.contentItems : props.titleItems.map(() => ({}));
+	}
+
+	// 合并格式：直接使用 items
+	return props.items;
+});
+
+// 选择菜单项
+const selectMenuItem = (index) => {
+	if (activeIndex.value === index) return;
+
+	activeIndex.value = index;
+	emit('update:active', index);
+	emit('change', index);
+};
+
+// Swiper 切换回调
+const onSwiperChange = (e) => {
+	const index = e.detail.current;
+	if (activeIndex.value === index) return;
+
+	activeIndex.value = index;
+	emit('update:active', index);
+	emit('change', index);
+};
+
+// 监听外部 active 变化
+watch(
+	() => props.defaultActive,
+	(newVal) => {
+		if (activeIndex.value !== newVal) {
+			activeIndex.value = newVal;
+		}
+	}
+);
+
+// 监听 items 变化
+watch(
+	() => [props.items, props.titleItems, props.contentItems],
+	() => {
+		// 数据变化时重置激活索引（可选）
+		const maxIndex = isSeparateFormat.value ? Math.min(props.titleItems.length, props.contentItems.length) - 1 : props.items.length - 1;
+
+		if (activeIndex.value > maxIndex) {
+			activeIndex.value = Math.max(0, maxIndex);
+		}
+	},
+	{ deep: true }
+);
+
+// 初始化
+onMounted(() => {
+	if (props.items.length === 0 && props.titleItems.length === 0) {
+		console.warn('v-menu-slide: 请提供菜单数据（items 或 titleItems/contentItems）');
+	}
+
+	// 数据格式检查
+	if (props.items.length > 0 && (props.titleItems.length > 0 || props.contentItems.length > 0)) {
+		console.warn('v-menu-slide: 检测到同时提供了 items 和 titleItems/contentItems，将优先使用 titleItems/contentItems');
+	}
+
+	// 键名检查
+	if (isSeparateFormat.value && effectiveTitleKey.value && effectiveContentKey.value) {
+		// 检查标题数据中是否包含指定的键
+		if (props.titleItems.length > 0 && !props.titleItems[0].hasOwnProperty(effectiveTitleKey.value)) {
+			console.warn(`v-menu-slide: 标题数据中未找到键 "${effectiveTitleKey.value}"，将按索引匹配`);
+		}
+
+		// 检查内容数据中是否包含指定的键
+		if (props.contentItems.length > 0 && !props.contentItems[0].hasOwnProperty(effectiveContentKey.value)) {
+			console.warn(`v-menu-slide: 内容数据中未找到键 "${effectiveContentKey.value}"，将按索引匹配`);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+/* 样式保持不变，与之前相同 */
+.v-menu-slide {
+	width: 100%;
+	height: 100%;
+	display: flex;
+
+	// 默认X轴方向
+	flex-direction: column;
+
+	// Y轴方向布局
+	&--y {
+		flex-direction: row;
+	}
+}
+
+// 菜单标题区域
+.menu-header {
+	display: flex;
+	background-color: #fff;
+	z-index: 10;
+
+	&--x {
+		flex-direction: row;
+		overflow-x: auto;
+		white-space: nowrap;
+		// 隐藏滚动条（H5和App兼容）
+		&::-webkit-scrollbar {
+			display: none;
+			width: 0;
+			height: 0;
+			color: transparent;
+		}
+	}
+
+	&--y {
+		flex-direction: column;
+		width: 200rpx; // Y轴方向时固定宽度
+		flex-shrink: 0; // 防止被压缩
+		overflow-y: auto;
+		// 隐藏滚动条（H5和App兼容）
+		&::-webkit-scrollbar {
+			display: none;
+			width: 0;
+			height: 0;
+			color: transparent;
+		}
+	}
+}
+
+// 菜单项
+.menu-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20rpx 30rpx;
+	position: relative;
+	transition: all 0.3s ease;
+	flex-shrink: 0; // 防止在x方向排列时被压缩
+
+	// Y轴方向时，菜单项内容横向排列
+	.menu-header--y & {
+		justify-content: flex-start;
+	}
+
+	&--active {
+		color: #007aff; // 激活状态颜色
+
+		&::after {
+			content: '';
+			position: absolute;
+			background-color: #007aff;
+			transition: all 0.3s ease;
+		}
+	}
+
+	// X方向激活指示器
+	.menu-header--x &--active::after {
+		bottom: 0;
+		left: 20%;
+		right: 20%;
+		height: 4rpx;
+	}
+
+	// Y方向激活指示器
+	.menu-header--y &--active::after {
+		top: 20%;
+		bottom: 20%;
+		left: 0;
+		width: 4rpx;
+	}
+}
+
+// 菜单项内容容器
+.menu-item__content {
+	display: flex;
+	align-items: center;
+
+	// Y轴方向时，内容横向排列
+	&--y {
+		flex-direction: row;
+	}
+}
+
+.menu-item__text {
+	font-size: 28rpx;
+	font-weight: 500;
+}
+
+// 内容区域
+.menu-content {
+	flex: 1;
+	position: relative;
+	overflow: hidden;
+}
+
+.menu-content-swiper {
+	width: 100%;
+	height: 100%;
+}
+
+.content-item {
+	width: 100%;
+	height: 100%;
+	padding: 20rpx;
+	box-sizing: border-box;
+	/* #ifdef H5 */
+	overflow: auto;
+	/* #endif */
+	// 隐藏滚动条（H5和App兼容）
+	&::-webkit-scrollbar {
+		display: none;
+		width: 0;
+		height: 0;
+		color: transparent;
+	}
+}
+
+.content-default-text {
+	font-size: 28rpx;
+	color: #666;
+}
+
+/* App和H5兼容性处理 */
+/* #ifdef APP-PLUS */
+.menu-header--x {
+	-webkit-overflow-scrolling: touch;
+}
+/* #endif */
+
+/* #ifdef H5 */
+// H5特定样式
+@media (hover: hover) {
+	.menu-item:hover {
+		background-color: #f5f5f5;
+	}
+}
+/* #endif */
+</style>

package/components/model/native/v-min-loading/v-min-loading.vue

@@ -0,0 +1,80 @@
+<template>
+	<view v-show="value" :class="['spinner', `spinner--type--${props.type}`]"></view>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+const props = defineProps({
+	value: {
+		type: Boolean,
+		default: false
+	},
+	type: {
+		type: String,
+		default: 'default'
+	},
+	customizeColor: {
+		type: String,
+		default: null
+	},
+	vacancyColor: {
+		type: String,
+		default: '#fff'
+	},
+	opacity: {
+		type: Number,
+		default: 0.5
+	}
+});
+
+const config = inject<any>('config');
+const type = props.customizeColor === null ? '1px solid transparent' : `1px solid ${props.customizeColor}`;
+</script>
+
+<style lang="scss" scoped>
+.spinner {
+	width: 20rpx;
+	height: 20rpx;
+	border-radius: 50%;
+	border-top-color: v-bind('props.vacancyColor') !important;
+	animation: spin 1s ease-in-out infinite;
+	margin: auto;
+	opacity: v-bind('props.opacity');
+
+	&--type--default {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.default");
+	}
+
+	&--type--warn {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.warn");
+	}
+
+	&--type--info {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.info");
+	}
+
+	&--type--delete {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.delete");
+	}
+
+	&--type--succeed {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.succeed");
+	}
+
+	&--type--customize {
+		border: v-bind('type');
+	}
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>

package/components/model/native/v-null/v-null.vue

@@ -0,0 +1,97 @@
+<template>
+	<view class="v-null">
+		<view class="v-null-content">
+			<slot>
+				<view class="v-null-icon" v-if="showIcon">
+					<slot name="icon">
+						<view class="v-null-default-icon"></view>
+					</slot>
+				</view>
+				<view class="v-null-text">{{ text }}</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+	text: {
+		type: String,
+		default: '暂无数据'
+	},
+	showIcon: {
+		type: Boolean,
+		default: true
+	},
+	iconSize: {
+		type: Number,
+		default: 40
+	},
+	textColor: {
+		type: String,
+		default: '#999999'
+	},
+	iconColor: {
+		type: String,
+		default: '#cccccc'
+	}
+});
+
+const config = inject<any>('config');
+const iconSizeStyle = computed(() => ({
+	width: `${props.iconSize}rpx`,
+	height: `${props.iconSize}rpx`
+}));
+</script>
+
+<style lang="scss" scoped>
+.v-null {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	text-align: center;
+	font-size: v-bind("config.fontSize.smallText");
+	color: v-bind('props.textColor');
+}
+
+.v-null-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.v-null-icon {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-bottom: 12rpx;
+}
+
+.v-null-default-icon {
+	width: v-bind('iconSizeStyle.width');
+	height: v-bind('iconSizeStyle.height');
+	background-color: v-bind('props.iconColor');
+	border-radius: 50%;
+	position: relative;
+	overflow: hidden;
+}
+
+.v-null-default-icon::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 60%;
+	height: 60%;
+	background-color: #fff;
+	border-radius: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.v-null-text {
+	color: v-bind('props.textColor');
+}
+</style>

package/components/model/native/v-overlay/v-overlay.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="v-overlay" :class="['v-overlay-open']" @click="handleOverlayClick">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref,computed,watch,inject } from 'vue';
+
+/**
+ * v-overlay 遮罩层
+ * value 是否显示遮罩层 默认值:false 可选值true显示、false隐藏
+ * zIndex 遮罩层z-index值 默认值:999
+ * opacity 遮罩层透明度 默认值:0.5
+ * closeOnClick 是否支持点击遮罩层关闭 默认值:true 可选值true支持关闭、false不支持关闭
+ * animation 遮罩层动画效果 默认值:'fade' 可选值'fade'淡入淡出等
+ */
+const props = defineProps({
+	value: {
+		type: Boolean,
+		default: false
+	},
+	zIndex: {
+		type: Number,
+		default: 999
+	},
+	opacity: {
+		type: Number,
+		default: 0.5
+	},
+	closeOnClick: {
+		type: Boolean,
+		default: true
+	},
+	animation: {
+		type: String,
+		default: 'fade'
+	}
+});
+const emits = defineEmits(['update:value','click']);
+
+const config = inject<any>('config');
+const isVisible = ref(props.value)
+const visible = ref(isVisible.value ? "flex" : "none");
+const backgroundColor = `rgba(0, 0, 0, ${props.opacity})`
+
+
+watch(()=>props.value,(newValue)=>{
+	isVisible.value = newValue
+	visible.value = newValue ? "flex" : "none"
+})
+watch(()=>isVisible.value,(newValue)=>{
+	emits('update:value', newValue)
+})
+
+const handleOverlayClick = () => {
+	if (props.closeOnClick) {
+		isVisible.value = false;
+		visible.value = "none"
+		emits('click', false);
+	}
+};
+
+</script>
+
+<style lang="scss" scoped>
+.v-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: v-bind("backgroundColor");
+	display: v-bind("visible");
+	justify-content: center;
+	align-items: center;
+	transition: opacity 0.3s ease;
+	opacity: v-bind("config.opacity.mask");
+	pointer-events: none;
+	z-index: v-bind("props.zIndex");
+}
+
+.v-overlay-open {
+	opacity: v-bind("backgroundColor");
+	pointer-events: all;
+}
+
+.v-overlay.fade {
+	opacity: v-bind("config.opacity.mask");
+	transition: opacity 0.3s ease;
+}
+
+.v-overlay.fade.v-overlay-open {
+	opacity: v-bind("backgroundColor");
+}
+</style>