fusions-ui 1.2.7 → 1.2.8

package/components/vtabs/src/composables/use-vtabs.ts

@@ -0,0 +1,276 @@
+import { getCurrentInstance, computed, ref, type SetupContext, onMounted, nextTick, watch, provide } from 'vue';
+import type { VtabsProps, VtabsEmits } from '../vtabs';
+import { debounce, throttle } from '../../../../utils/applyEven';
+import { useCommon } from '../../../../hooks';
+import { badgeProps } from '../../../badge/src/badge';
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+export const useVtabs = (props : VtabsProps, $emit : SetupContext<VtabsEmits>['emit']) => {
+	const instance = getCurrentInstance();
+	const { getRect } = useCommon();
+	const children = ref<any>([]);
+	const activeIndex = ref(0);
+	// 微信小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
+	const contentScrollTop = ref(0);
+	const contentScrollTopTwo = ref(0); //针对非联动
+	const contentScrollTo = ref('');
+	const scrolling = ref(false);
+	const barScrolling = ref(false);
+	const touching = ref(false);
+	const hasHeight = ref(0);
+	const scrollViewHeight = ref(0);
+	const barScrollTop = ref(0);
+	const barScrollToView = ref('');
+	const timer = ref<any>(null);
+	const timer4 = ref<any>(null);
+	const tabsRect = ref<any>(null)
+
+	const scrollX = computed(() => {
+		let value : boolean;
+		// #ifdef APP-NVUE
+		value = true;
+		// #endif
+		value = false;
+		return value
+	});
+
+	// 设置高度
+	const getHeight = (): string => {
+		const isEmpty = uni.$fu.isNull(props.height)
+		if (isEmpty || props.height === 'auto') {
+			return uni.$fu.addUnit(uni.$fu.sys().windowHeight)
+		}
+		return uni.$fu.getPx(props.height, true)
+	};
+	
+	// 获取导航菜单的尺寸
+	const getTabsRect = (): Promise<any> => {
+		return queryRect('fu-vtabs__bar')
+	};
+	
+	// 获取所有标签的尺寸
+	const getAllItemRect = () => {
+		return new Promise(resolve => {
+			const promiseAllArr = props.list.map((_, index) => queryRect(`fu-vtabs__bar-item--${index}`, true))
+			Promise.all(promiseAllArr).then(sizes => resolve(sizes))
+		})
+	};
+	
+	// 获取各个标签的尺寸
+	const queryRect = (el: string, item?: any) => {
+		const refs = instance?.proxy?.$refs;
+		
+		return new Promise(resolve => {
+			// #ifndef APP-NVUE
+			// $fuGetRect为fusions-ui自带的节点查询简化方法
+			// 组件内部一般用this.$fuGetRect，对外的为getRect，二者功能一致，名称不同
+			getRect(`.${el}`).then(size => {
+				resolve(size)
+			})
+			// #endif
+			// #ifdef APP-NVUE
+			// nvue下，使用dom模块查询元素高度
+			// 返回一个promise，让调用此方法的主体能使用then回调
+			const target = item? refs?.[el]?.[0]: refs?.[el];
+			dom.getComponentRect(target, (res: any) => {
+				resolve(res.size)
+			})
+			// #endif
+		})
+	};
+	
+	// 设置左侧菜单滚动条的位置，目标：将当前的选项移到中间位置
+	const setBarScrollTop = () => {
+		const tabRect = props.list[activeIndex.value] as any;
+		if(!tabRect?.rect) return
+		const offsetTop = props.list.slice(0, activeIndex.value).reduce((total: number, item: any) => {
+			return total + item.rect.height;
+		}, 0);
+		const scrollViewHeightVal = uni.$fu.getPx(getHeight());
+		const tabRectHeight = tabRect.rect.height as number;
+		let barScrollTopVal = (tabRectHeight / 2 + Number(offsetTop)) - scrollViewHeightVal / 2;
+		// 先给一点随机值，避免出现不能滚动的BUG
+		barScrollTopVal = Math.min(barScrollTopVal, scrollViewHeight.value - (tabsRect.value?.height || 0));
+		barScrollTop.value = Math.max(0, barScrollTopVal);
+		// 已经不能滚动的时候，就使用scroll-into-view的方式进行定位，避免失效
+		if(Number(barScrollTop) >= (scrollViewHeight.value - tabsRect.value?.height)) {
+			timer.value && clearTimeout(timer.value);
+			timer.value = setTimeout(()=>{
+				barScrollToView.value = `bar_${activeIndex.value}`;
+			}, 400)
+		}
+	};
+	
+	// 重新计算尺寸
+	const resize = async () => {
+		// 如果list数组长度为0就不处理 || 选中目标未变则不处理
+		if (props.list.length == 0 || !props.barScrollable) return;
+		// 避免滑太快，修复位置
+		const [tabsRectData, itemRect] =  await Promise.all([getTabsRect(), getAllItemRect()])
+		tabsRect.value = tabsRectData;
+		scrollViewHeight.value = 0;
+		(itemRect as any).map((item: any, index: number) => {
+			scrollViewHeight.value += item.height;
+			(props.list[index] as any).rect = item;
+		})
+		setBarScrollTop()
+	};
+	
+	// 左侧菜单点击
+	const handleClick = async (currentIndex: number) => {
+		if (currentIndex == activeIndex.value) return;
+		touching.value = true;
+		activeIndex.value = currentIndex;
+		if(props.chain) {
+			// 给一点随机值，避免出现不能滚动的BUG。微信端必须用此方法
+			const randomOffset = Math.random() * 4 - 4;
+			const targetTop = children.value[currentIndex].top;
+			const fixedHeight = uni.$fu.getPx(props.hdHeight);
+			
+			// 设置滚动位置
+			contentScrollTop.value = targetTop - fixedHeight - randomOffset;
+			// #ifndef MP-WEIXIN
+			contentScrollTo.value = `content_${currentIndex}`;
+			// #endif
+		}
+		
+		// 清理并设置新的定时器
+		timer && clearTimeout(timer.value)
+		throttle(() => {
+			resize()
+		}, 300, false);
+		
+		// 设置防抖以更新 touching 状态
+		debounce(() => {
+			touching.value = false;
+		}, 900)
+	};
+	
+	// 内容滚动
+	const scrollHandler = (e: any) => {
+		if (touching.value || scrolling.value) return;
+		// 每过一定时间取样一次，减少资源损耗以及可能带来的卡顿
+		scrolling.value = true;
+		uni.$fu.sleep(80).then(() => {
+			scrolling.value = false;
+		})
+		const scrollTop = e.detail.scrollTop;
+		let childrenList = children.value;
+		const len = children.value.length;
+		let top = 0;
+		let activeIdx = 0;
+		const computedChildren = childrenList.map((item: any) => {
+			if (item.height > 0) hasHeight.value = item.height;
+			item.height = item.height > 0? item.height: hasHeight.value;
+			const child = { height: item.height, top };
+			// 进行累加，给下一个item提供计算依据
+			top += item.height;
+			return child;
+		})
+		for (let i = 0; i < len; i++) {
+			const item = computedChildren[i];
+			const nextItem = computedChildren[i + 1];
+			// 如果滚动条高度小于第一个item的top值，此时无需设置任意字母为高亮
+			if (scrollTop <= computedChildren[0].top) {
+				activeIdx = 0;
+				break
+			} else if (!nextItem) {
+				// 当不存在下一个item时，意味着历遍到了最后一个
+				activeIdx = len - 1;
+				break
+			} else if (scrollTop > item.top && scrollTop < nextItem.top) {
+				activeIdx = i;
+				break
+			}
+		}
+		activeIndex.value = activeIdx;
+		// 当前选中项索引必然来源于前后两个索引，满足才执行，避免闪烁的bug
+		timer4.value && clearTimeout(timer4.value);
+		timer4.value = setTimeout(()=>{
+			resize()
+		}, 100)
+	};
+	
+	// 内容滚动到底部触发
+	const scrolltolower = () => {
+		$emit('scrolltolower', activeIndex.value);
+	};
+	
+	const init = (index: number) => {
+		let num = 0;
+		clearInterval(timer.value);
+		timer.value = setInterval(async ()=>{
+			num++;
+			if(num > 50) clearInterval(timer.value);
+			if(children.value.length) {
+				clearInterval(timer.value);
+				await uni.$fu.sleep(300);
+				handleClick(index);
+			}
+		}, 100)
+	};
+	
+	const getDefaultBadgeValue = (key: string) => {
+	  const propConfig = badgeProps[key as keyof typeof badgeProps]
+	  return propConfig?.default
+	}
+	
+	const getBadgeValue = (item: any, key: string) => {
+		return item.badge?.[key] || getDefaultBadgeValue[key]
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		nextTick(() => {
+			init(Number(props.current))
+		})
+	});
+	
+	// watch监听事件
+	watch(() => props.current, (newVal) => {
+		if(!touching.value) {
+			nextTick(()=>{
+				init(Number(newVal? newVal: 0));
+			})
+		}
+	});
+	
+	watch(() => props.list,  (newVal) => {
+		if (newVal.length) {
+			uni.$fu.sleep(30).then(() => {
+				resize();
+			})
+		}
+	});
+	
+	watch(() => activeIndex.value, (newVal) => {
+		if(!props.chain) {// 解决：非联动，内容过多的情况，滚动一段距离，再切换未滚动到顶部的BUG
+			contentScrollTopTwo.value = 0 - Math.random() * 4 - 4;
+		}
+		$emit('change', newVal);
+	})
+	
+	// 提供父组件上下文
+	provide('vtabsContext', {
+		chain: props.chain,
+		children
+	})
+
+	return {
+		children,
+		activeIndex,
+		contentScrollTop,
+		contentScrollTopTwo,
+		contentScrollTo,
+		barScrollTop,
+		barScrollToView,
+		scrollX,
+		getHeight,
+		scrolltolower,
+		handleClick,
+		scrollHandler,
+		getBadgeValue
+	}
+}

package/components/vtabs/src/composables/vtabs-custom.ts

@@ -0,0 +1,54 @@
+import { Ref, computed } from 'vue';
+import type { VtabsProps } from '../vtabs';
+
+export const useVtabsCustomStyle = (props: VtabsProps, activeIndex: Ref<string | number>, getHeight: { (): string; (): string; (): any; }) => {
+	const vtabsStyle = computed(() => {
+		const style: Record<string, any> = {};
+		style.height = getHeight();
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle));
+	});
+	
+	const getBarStyle = computed(() => {
+		const style: Record<string, any> = {};
+		style.width = uni.$fu.getPx(props.barWidth, true);
+		style.background = props.barBgColor;
+		style.height = getHeight();
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.barStyle));
+	});
+	
+	const itemStyle = computed(() => {
+		return (index: number) => {
+			const { barItemStyle, barItemActiveStyle, list } = props;
+			const isActive = index === activeIndex.value;
+			const listItem = list[index] as any;
+			const style = listItem?.disabled ? { color: '#cfd0d3' } : {};
+			
+			const itemStyleConfig = isActive? barItemActiveStyle: (barItemStyle as any)?.background? barItemStyle: { ...(barItemStyle as {}), background: 'transparent' }
+			
+			return uni.$fu.deepMerge(style, uni.$fu.addStyle(itemStyleConfig));
+		} 
+	});
+	
+	// nvue设置字体样式必须要text标签上进行
+	const textStyle = computed(() => {
+		return () => {
+			const style: Record<string, any> = {};
+			style.width = uni.$fu.getPx(props.barWidth, true);
+			return style;
+		}
+	});
+	
+	const getContentStyle = computed(() => {
+		const style: Record<string, any> = {};
+		style.height = getHeight();
+		return style;
+	});
+	
+	return {
+		vtabsStyle,
+		getBarStyle,
+		itemStyle,
+		textStyle,
+		getContentStyle
+	}
+}

package/components/vtabs/src/vtabs.ts

@@ -0,0 +1,130 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const vtabsProps = {
+	/**
+	 * @description 列表数据
+	 */
+	list: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 从list元素对象中读取的键名
+	 * @default 'name'
+	 */
+	keyName: {
+		type: String,
+		default: 'name'
+	},
+	/**
+	 * @description 当前选中项
+	 */
+	current: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 头部内容的高度
+	 */
+	hdHeight: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 是否联动，默认开启联动
+	 * @default true
+	 */
+	chain: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 整个列表的高度，默认auto屏幕高度
+	 * @default 'auto'
+	 */
+	height: {
+		type: [String, Number],
+		default: 'auto'
+	},
+	/**
+	 * @description 左边列表的宽度
+	 * @default '180rpx'
+	 */
+	barWidth: {
+		type: [String, Number],
+		default: '180rpx'
+	},
+	/**
+	 * @description 左边列表是否允许滚动
+	 * @default true
+	 */
+	barScrollable: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 背景颜色
+	 */
+	barBgColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 左边列表的自定义样式
+	 */
+	barStyle: {
+		type: [String, Object],
+		default: ''
+	},
+	/**
+	 * @description 左边列表项的自定义样式
+	 */
+	barItemStyle: {
+		type: [String, Object],
+		default: ''
+	},
+	/**
+	 * @description 左边选择项激活时的自定义样式
+	 */
+	barItemActiveStyle: {
+		type: [String, Object],
+		default: ''
+	},
+	/**
+	 * @description 左边选择项激活时的左边线条自定义样式
+	 */
+	barItemActiveLineStyle: {
+		type: [String, Object],
+		default: ''
+	},
+	/**
+	 * @description 菜单项中的徽标自定义样式，比如定位位置
+	 */
+	barItemBadgeStyle: {
+		type: [String, Object],
+		default: ''
+	},
+	/**
+	 * @description 右边区域自定义样式
+	 */
+	contentStyle: {
+		type: [String, Object],
+		default: ''
+	},
+	...componentProps
+};
+
+export const vtabsEmits = {
+	/**
+	 * @description 选项改变时触发
+	 */
+	change: (_e: any) => true,
+	/**
+	 * @description 内容滚动到底部触发
+	 */
+	scrolltolower: (_e: any) => true
+};
+
+export type VtabsProps = ExtractPropTypes<typeof vtabsProps>;
+export type VtabsEmits = typeof vtabsEmits;

package/components/vtabs/src/vtabs.vue

@@ -0,0 +1,189 @@
+<template>
+	<view class="fu-vtabs" :style="[vtabsStyle]">
+		<scroll-view
+			class="fu-vtabs__bar"
+			ref="fu-vtabs__bar"
+			:style="[getBarStyle]"
+			:scroll-y="barScrollable" 
+			:scroll-x="scrollX"
+			:show-scrollbar="false"
+			:scroll-with-animation="true"
+			:scroll-top="barScrollTop"
+			:scroll-into-view="barScrollToView">
+			<view
+				:ref="`fu-vtabs__bar-item--${index}`"
+				:id="`bar_${index}`"
+				:class="[
+					'fu-vtabs__bar-item',
+					`fu-vtabs__bar-item--${index}`,
+					index == activeIndex && 'fu-vtabs__bar-item-active'
+				]"
+				:style="[itemStyle(index)]"
+				v-for="(item,index) in list"
+				:key="index"
+				@tap.stop="handleClick(index)">
+				<view class="fu-vtabs__bar-item--line" v-if="index == activeIndex" :style="[$fu.addStyle(barItemActiveLineStyle)]"></view>
+				<text :class="['fu-vtabs__bar-item--value', index == activeIndex && 'fu-vtabs__bar-item-active--value']" :style="[itemStyle(index), textStyle()]">{{ item[keyName] }}</text>
+				<view class="fu-vtabs__bar-item--badge" :style="[$fu.addStyle(barItemBadgeStyle)]" v-if="!!((item as any)?.badge && ((item as any)?.badge.isDot || (item as any)?.badge.value))">
+					<!-- 标记 -->
+					<fu-badge
+						:isDot="getBadgeValue(item, 'isDot')" 
+						:value="getBadgeValue(item, 'value')" 
+						:max="getBadgeValue(item, 'max')"
+						:type="getBadgeValue(item, 'type')"
+						:showZero="getBadgeValue(item, 'showZero')"
+						:bgColor="getBadgeValue(item, 'bgColor')"
+						:color="getBadgeValue(item, 'color')"
+						:shape="getBadgeValue(item, 'shape')"
+						:numberType="getBadgeValue(item, 'numberType')"
+						:inverted="getBadgeValue(item, 'inverted')"
+						:absolute="getBadgeValue(item, 'absolute')"
+						:offset="getBadgeValue(item, 'offset')"
+					></fu-badge>
+				</view>
+			</view>
+		</scroll-view>
+		<scroll-view
+			class="fu-vtabs__content"
+			:style="[getContentStyle, $fu.addStyle(contentStyle)]"
+			:scroll-y="true" 
+			:scroll-x="scrollX"
+			:show-scrollbar="false"
+			:scroll-top="contentScrollTop"
+			:scroll-into-view="contentScrollTo"
+			:scroll-with-animation="true"
+			@scroll="scrollHandler"
+			@scrolltolower="scrolltolower"
+			v-if="chain">
+			<slot />
+		</scroll-view>
+		<scroll-view 
+			v-else
+			class="fu-vtabs__content"
+			:style="[getContentStyle, $fu.addStyle(contentStyle)]"
+			:scroll-y="true" 
+			:scroll-x="scrollX"
+			:show-scrollbar="false"
+			:scroll-top="contentScrollTopTwo"
+			@scrolltolower="scrolltolower">
+			<slot />
+		</scroll-view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * 垂直选项卡
+	 * @description 此组件兼容所有端，提供了分类展示和联动等功能
+	 * @tutorial http://www.fusions.top/components/vtabs.html
+	 * @property {Array} list 选项数组，元素为对象，如[{name:'fusions-ui介绍'}]（默认 [] ）
+	 * @property {String} keyName 从list元素对象中读取的键名（默认 name ）
+	 * @property {Number} current 当前选中项，从0开始（默认 0 ）
+	 * @property {String | Number} hdHeight 头部内容的高度，头部有内容必传，否则会有联动误差（默认 0 ）
+	 * @property {Boolean} chain = [true|false] 是否开启联动，开启后右侧区域可以滑动查看内容（默认 true ）
+	 * @property {String | Number} height 整个列表的高度，默认auto或空则为屏幕高度（默认 auto屏幕高度 ）
+	 * @property {String | Number} barWidth 左侧选项区域的宽度（默认 180rpx ）
+	 * @property {Boolean} barScrollable = [true|false] 左侧选项区域是否允许滚动 （默认 true ）
+	 * @property {String} barBgColor 左侧选项区域的背景颜色
+	 * @property {Object} barStyle 左侧选项区域的自定义样式
+	 * @property {Object} barItemStyle 左侧选项区域每个选项的自定义样式
+	 * @property {Object} barItemActiveStyle 左侧选项区域选中选项的自定义样式
+	 * @property {Object} barItemActiveLineStyle 左侧选项区域选中选项竖线条的自定义样式
+	 * @property {Object} barItemBadgeStyle 左侧选项区域选中选项徽标的自定义样式，主要用于设置位置
+	 * @property {Object} contentStyle 右侧区域自定义样式
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
+	 * 
+	 * @event {Function} change 选项改变时触发
+	 * @event {Function} scrolltolower 内容滚动到底部触发
+	 * @example <fu-vtabs :list="list"><fu-vtabs-item>...</fu-vtabs-item></fu-vtabs>
+	 */
+	import { vtabsEmits, vtabsProps } from './vtabs';
+	import { useVtabs, useVtabsCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuVtabs', options: { virtualHost: true } });
+	
+	const props = defineProps(vtabsProps);
+	const $emit = defineEmits(vtabsEmits);
+	
+	const {
+		activeIndex,
+		contentScrollTop,
+		contentScrollTopTwo,
+		contentScrollTo,
+		barScrollTop,
+		barScrollToView,
+		scrollX,
+		getHeight,
+		scrolltolower,
+		handleClick,
+		scrollHandler,
+		getBadgeValue
+	} = useVtabs(props, $emit);
+	
+	const {
+		vtabsStyle,
+		getBarStyle,
+		itemStyle,
+		textStyle,
+		getContentStyle
+	} = useVtabsCustomStyle(props, activeIndex, getHeight);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
+	
+	.fu-vtabs {
+		@include components.flex;
+		
+		&__bar {
+			background: #f3f4f6;
+			
+			&-item {
+				@include components.flex;
+				position: relative;
+				align-items: center;
+				justify-content: center;
+				padding: 35rpx 12rpx 35rpx 20rpx;
+				
+				&--value {
+					/* #ifdef APP-NVUE */
+					padding: 0 12rpx;
+					/* #endif */
+					font-size: 14px;
+					color: #66696d;
+				}
+				
+				&-active {
+					background: #ffffff;
+					
+					&--value {
+						color: $fu-color-primary;
+					}
+				}
+				
+				&--line {
+					position: absolute;
+					width: 2px;
+					left: 0;
+					top: 0;
+					bottom: 0;
+					z-index: 1;
+					background-color: $fu-color-primary;
+				}
+				
+				&--badge {
+					position: absolute;
+					top: 4px;
+					right: 10px;
+					z-index: 1;
+				}
+			}
+		}
+		
+		&__content {
+			flex: 1;
+			background: #ffffff;
+		}
+	}
+</style>

package/components/vtabs-item/index.ts

@@ -0,0 +1 @@
+export * from './src/vtabs-item'

package/components/vtabs-item/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-vtabs-item'