fusions-ui 1.2.6 → 1.2.8

package/components/fu-vtabs/fu-vtabs.vue

@@ -1,443 +0,0 @@
-<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="clickHandler(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(index)]">{{item[keyName]}}</text>
-				<view class="fu-vtabs__bar-item--badge" :style="[$fu.addStyle(barItemBadgeStyle)]" v-if="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))">
-					<!-- 标记 -->
-					<fu-badge
-						:show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))" 
-						:isDot="item.badge && item.badge.isDot || propsBadge.isDot" 
-						:value="item.badge && item.badge.value || propsBadge.value" 
-						:max="item.badge && item.badge.max || propsBadge.max"
-						:type="item.badge && item.badge.type || propsBadge.type"
-						:showZero="item.badge && item.badge.showZero || propsBadge.showZero"
-						:bgColor="item.badge && item.badge.bgColor || propsBadge.bgColor"
-						:color="item.badge && item.badge.color || propsBadge.color"
-						:shape="item.badge && item.badge.shape || propsBadge.shape"
-						:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
-						:offset="item.badge && item.badge.offset || propsBadge.offset"
-						:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
-						:absolute="item.badge && item.badge.absolute || propsBadge.absolute"
-					></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>
-	import { debounce, throttle } from '../../libs/function/applyEven.js'
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-	import fuBadgeProps from '../fu-badge/props.js'
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom')
-	// #endif
-	/**
-	 * 垂直选项卡
-	 * @description 此组件兼容所有端，提供了分类展示和联动等功能
-	 * @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 {Object,String} customStyle 定义需要用到的外部样式
-	 * 
-	 * @event {Function} change 选项改变时触发
-	 * @event {Function} scrolltolower 内容滚动到底部触发
-	 * @example <fu-vtabs :list="list"><fu-vtabs-item>...</fu-vtabs-item></fu-vtabs>
-	 */
-	export default {
-		name: 'FuVtabs',
-		mixins: [mpMixin, mixin, props],
-		emits: ['change', 'scrolltolower'],
-		created() {
-			this.children = [];
-		},
-		mounted() {
-			this.$nextTick(()=>{
-				this.init(this.current);
-			})
-		},
-		data() {
-			return {
-				activeIndex: 0,
-				// 微信小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
-				contentScrollTop: 0,
-				contentScrollTopTwo: 0,//针对非联动
-				contentScrollTo: '',
-				scrolling: false,
-				barScrolling: false,
-				touching: false,
-				hasHeight: 0,
-				scrollViewHeight: 0,
-				barScrollTop: 0,
-				barScrollToView: '',
-				timer: 0
-			}
-		},
-		computed: {
-			scrollX(){
-				// #ifdef APP-NVUE
-				return true;
-				// #endif
-				return false;
-			},
-			vtabsStyle() {
-				const style = {};
-				style.height = this.getHeight();
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle));
-			},
-			getBarStyle() {
-				const style = {};
-				style.width = this.$fu.getPx(this.barWidth, true);
-				style.background = this.barBgColor;
-				style.height = this.getHeight();
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.barStyle));
-			},
-			itemStyle(index) {
-				return (index) => {
-					const { activeIndex, barItemStyle, barItemActiveStyle, list } = this;
-					const isActive = index === activeIndex;
-					const style = list[index]?.disabled ? { color: '#cfd0d3' } : {};
-					
-					return this.$fu.deepMerge(
-					      style,
-					      this.$fu.addStyle(isActive? barItemActiveStyle: barItemStyle?.background? barItemStyle: { ...barItemStyle, background: 'transparent' }
-					    )
-					);
-				} 
-			},
-			// nvue设置字体样式必须要text标签上进行
-			textStyle(){
-				return index=>{
-					const style = {};
-					style.width = this.$fu.getPx(this.barWidth, true);
-					return style;
-				}
-			},
-			getContentStyle() {
-				const style = {};
-				style.height = this.getHeight();
-				return style;
-			},
-			propsBadge() {
-				return fuBadgeProps
-			}
-		},
-		methods: {
-			init(index){
-				let num = 0;
-				clearInterval(this.timer);
-				this.timer = setInterval(async ()=>{
-					num++;
-					if(num>50) clearInterval(this.timer);
-					if(this.children.length) {
-						clearInterval(this.timer);
-						await this.$fu.sleep(300);
-						this.clickHandler(index);
-					}
-				}, 100)
-			},
-			
-			// 内容滚动到底部触发
-			scrolltolower(){
-				this.$emit('scrolltolower', this.activeIndex);
-			},
-			
-			async resize() {
-				// 如果list数组长度为0就不处理 || 选中目标未变则不处理
-				if (this.list.length == 0 || !this.barScrollable) return;
-				// 避免滑太快，修复位置
-				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
-					this.tabsRect = tabsRect;
-					this.scrollViewHeight = 0;
-					itemRect.map((item, index) => {
-						this.scrollViewHeight += item.height;
-						this.list[index].rect = item;
-					})
-					this.setBarScrollTop()
-				})
-			},
-			
-			// 设置左侧菜单滚动条的位置，目标：将当前的选项移到中间位置
-			setBarScrollTop() {
-				const tabRect = this.list[this.activeIndex];
-				const offsetTop = this.list.slice(0, this.activeIndex).reduce((total, item) => {
-					return total + item.rect.height;
-				}, 0);
-				const scrollViewHeight = this.$fu.getPx(this.getHeight());
-				let barScrollTop = tabRect.rect.height / 2 + offsetTop - scrollViewHeight / 2;
-				// 先给一点随机值，避免出现不能滚动的BUG
-				barScrollTop = Math.min(barScrollTop, this.scrollViewHeight - this.tabsRect.height);
-				this.barScrollTop = Math.max(0, barScrollTop);
-				// 已经不能滚动的时候，就使用scroll-into-view的方式进行定位，避免失效
-				if(barScrollTop>=(this.scrollViewHeight - this.tabsRect.height)) {
-					this.timer && clearTimeout(this.timer);
-					this.timer = setTimeout(()=>{
-						this.barScrollToView = `bar_${this.activeIndex}`;
-					}, 400)
-				}
-			},
-			
-			// 左侧菜单点击
-			async clickHandler(currentIndex) {
-				if (currentIndex == this.activeIndex) return;
-				this.touching = true;
-				this.activeIndex = currentIndex;
-				if(this.chain) {
-					// 给一点随机值，避免出现不能滚动的BUG。微信端必须用此方法
-					const randomOffset = Math.random() * 4 - 4;
-					const targetTop = this.children[currentIndex].top;
-					const fixedHeight = this.$fu.getPx(this.hdHeight);
-					
-					// 设置滚动位置
-					this.contentScrollTop = targetTop - fixedHeight - randomOffset;
-					// #ifndef MP-WEIXIN
-					this.contentScrollTo = `content_${currentIndex}`;
-					// #endif
-				}
-				
-				// 清理并设置新的定时器
-				this.timer && clearTimeout(this.timer)
-				throttle(() => {
-					this.resize()
-				}, 300, false);
-				
-				// 设置防抖以更新 touching 状态
-				debounce(() => {
-					this.touching = false;
-				}, 900)
-			},
-			
-			// 内容滚动
-			scrollHandler(e) {
-				if (this.touching || this.scrolling) return;
-				// 每过一定时间取样一次，减少资源损耗以及可能带来的卡顿
-				this.scrolling = true;
-				this.$fu.sleep(80).then(() => {
-					this.scrolling = false;
-				})
-				const scrollTop = e.detail.scrollTop;
-				let children = this.children;
-				const len = children.length;
-				let top = 0;
-				let activeIndex = 0;
-				children = this.children.map((item, index) => {
-					if (item.height > 0) this.hasHeight = item.height;
-					item.height = item.height > 0? item.height: this.hasHeight;
-					const child = { height: item.height, top }
-					// 进行累加，给下一个item提供计算依据
-					top += item.height;
-					return child;
-				})
-				for (let i = 0; i < len; i++) {
-					const item = children[i];
-					const nextItem = children[i + 1];
-					// 如果滚动条高度小于第一个item的top值，此时无需设置任意字母为高亮
-					if (scrollTop <= children[0].top) {
-						activeIndex = 0;
-						break
-					} else if (!nextItem) {
-						// 当不存在下一个item时，意味着历遍到了最后一个
-						activeIndex = len - 1;
-						break
-					} else if (scrollTop > item.top && scrollTop < nextItem.top) {
-						activeIndex = i;
-						break
-					}
-				}
-				this.activeIndex = activeIndex;
-				// 当前选中项索引必然来源于前后两个索引，满足才执行，避免闪烁的bug
-				this.timer4 && clearTimeout(this.timer4);
-				this.timer4 = setTimeout(()=>{
-					this.resize()
-				}, 100)
-			},
-			
-			// 设置高度
-			getHeight() {
-				let height = 0;
-				const isEmpty = this.$fu.isNull(this.height);
-				if (isEmpty || this.height == 'auto') height = this.$fu.addUnit(this.$fu.sys().windowHeight);
-				else height = this.$fu.getPx(this.height, true)
-				return height;
-			},
-			
-			// 获取导航菜单的尺寸
-			getTabsRect() {
-				return new Promise(resolve => {
-					this.queryRect('fu-vtabs__bar').then(size => resolve(size))
-				})
-			},
-			
-			// 获取所有标签的尺寸
-			getAllItemRect() {
-				return new Promise(resolve => {
-					const promiseAllArr = this.list.map((item, index) => this.queryRect(`fu-vtabs__bar-item--${index}`, true))
-					Promise.all(promiseAllArr).then(sizes => resolve(sizes))
-				})
-			},
-			
-			// 获取各个标签的尺寸
-			queryRect(el, item) {
-				// #ifndef APP-NVUE
-				// $fuGetRect为fusions-ui自带的节点查询简化方法
-				// 组件内部一般用this.$fuGetRect，对外的为getRect，二者功能一致，名称不同
-				return new Promise(resolve => {
-					this.$fuGetRect(`.${el}`).then(size => {
-						resolve(size)
-					})
-				})
-				// #endif
-				// #ifdef APP-NVUE
-				// nvue下，使用dom模块查询元素高度
-				// 返回一个promise，让调用此方法的主体能使用then回调
-				return new Promise(resolve => {
-					dom.getComponentRect(item? this.$refs[el][0] : this.$refs[el], res => {
-						resolve(res.size)
-					})
-				})
-				// #endif
-			}
-		},
-		watch: {
-			current(newVal){
-				if(!this.touching) 
-					this.$nextTick(()=>{
-						this.init(newVal? newVal: 0);
-					})
-			},
-			list(newVal) {
-				if (newVal.length) {
-					this.$fu.sleep(30).then(res => {
-						this.resize();
-					})
-				}
-			},
-			activeIndex(newVal){
-				if(!this.chain) {// 解决：非联动，内容过多的情况，滚动一段距离，再切换未滚动到顶部的BUG
-					this.contentScrollTopTwo = 0 - Math.random() * 4 - 4;
-				}
-				this.$emit('change', newVal);
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
-	
-	.fu-vtabs {
-		@include flex;
-		
-		&__bar {
-			background: #f3f4f6;
-			
-			&-item {
-				@include 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-primary;
-					}
-				}
-				
-				&--line {
-					position: absolute;
-					width: 2px;
-					left: 0;
-					top: 0;
-					bottom: 0;
-					z-index: 1;
-					background-color: $fu-primary;
-				}
-				
-				&--badge {
-					position: absolute;
-					top: 4px;
-					right: 10px;
-					z-index: 1;
-				}
-			}
-		}
-		
-		&__content {
-			flex: 1;
-			background: #ffffff;
-		}
-	}
-</style>

package/components/fu-vtabs/props.js

@@ -1,114 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @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: ''
-		}
-	}
-}

package/components/fu-vtabs-item/fu-vtabs-item.vue

@@ -1,71 +0,0 @@
-<template>
-	<view ref="fu-vtabs-item" :id="`content_${index}`" class="fu-vtabs-item">
-		<slot />
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom');
-	// #endif
-	export default {
-		name: 'FuVtabsItem',
-		mixins: [mpMixin, mixin],
-		props: {
-			index: {
-				type: [Number,String],
-				default: 0
-			}
-		},
-		data(){
-			return {
-				// 记录item的离顶部的距离
-				top: 0,
-				// 记录item的高度
-				height: 0
-				// 是否为联动
-			}
-		},
-		mounted() {
-			this.init();
-		},
-		methods: {
-			async init(){
-				this.getParentData('FuVtabs');
-				if (!this.parent) {
-					return this.$fu.error('fu-vtabs必须要搭配fu-vtabs-item组件使用')
-				}
-				if(!this.parent.chain) return;
-				await this.$fu.sleep();
-				this.getItemRect().then(size=>{
-					// 由于对象的引用特性，此处会同时生效到父组件的children数组的本实例的top属性中，供父组件判断读取
-					this.top = size.top;
-					this.height = size.height;
-				});
-			},
-			
-			getItemRect(){
-				return new Promise(resolve => {
-					// #ifndef APP-NVUE
-					// 组件内部一般用this.$fuGetRect，对外的为getRect，二者功能一致，名称不同
-					this.$fuGetRect('.fu-vtabs-item').then(size => {
-						resolve(size)
-					})
-					// #endif
-					// #ifdef APP-NVUE
-					const ref = this.$refs['fu-vtabs-item']
-					dom.getComponentRect(ref, res => {
-						resolve(res.size)
-					})
-					// #endif
-				})
-			}
-		}
-	}
-</script>
-
-<style>
-	
-</style>