fusions-ui 1.2.3 → 1.2.6

package/components/fu-landscape/fu-landscape.vue

@@ -1,167 +0,0 @@
-<template>
-	<view class="fu-landscape-class fu-landscape">
-		<view v-if="show" class="fu-landscape__container" :style="[containerStyle]">
-			<slot></slot>
-
-			<view class="fu-landscape__icon fu-icon-close-fill" :class="[{
-			  'fu-landscape__icon--left-top': closePosition === 'leftTop',
-			  'fu-landscape__icon--right-top': closePosition === 'rightTop',
-			  'fu-landscape__icon--bottom': closePosition === 'bottom'
-			}]" :style="[closeBtnStyle]" @click="close" v-if="closeBtn">
-				<fu-icons name="close" :size="closeBtnStyle.fontSize" :color="closeBtnStyle.color"></fu-icons>
-			</view>
-		</view>
-		<view v-if="showMask" class="fu-landscape__mask" :class="[{'fu-landscape__mask--show': show}]" :style="[maskStyle]" @tap="closeMask"></view>
-	</view>
-</template>
-
-<script>
-	/** Landscape 压屏窗
-	 * @description 此组件一般用于活动等场景
-	 * @property {Boolean} closeBtn = [true|false] 显示关闭图标（默认 true）
-	 * @property {String} closeColor 关闭图标颜色
-	 * @property {String,Number} closeSize 关闭图标大小
-	 * @property {String} closePosition 关闭图标位置
-	 * 	@value leftTop 左上角
-	 * 	@value rightTop 右上角
-	 * 	@value bottom 底部
-	 * @property {String,Number} closeTop 关闭图标top值（注：当关闭图标在leftTop或者rightTop时生效）
-	 * @property {String,Number} closeRight 关闭图标right值（注：当关闭图标在RightTop时生效）
-	 * @property {String,Number} closeBottom 关闭图标bottom值（注：当关闭图标在bottom时生效）
-	 * @property {String,Number} closeLeft 关闭图标left值（注：当关闭图标在leftTop时生效）
-	 * @property {Boolean} showMask = [true|false] 显示遮罩（默认 true）
-	 * @property {Boolean} maskCloseable = [true|false] 点击遮罩可以关闭（默认 true）
-	 * @property {Number} zIndex 层级（默认 10024）
-	 */
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
-	export default {
-		name: 'fuLandscape',
-		emits: ['close'],
-		mixins: [mpMixin, props],
-		data() {
-			return {
-				show: false
-			}
-		},
-		computed: {
-			containerStyle() {
-				let style = {}
-				style.zIndex = this.zIndex || 10024
-				return style
-			},
-			closeBtnStyle() {
-				let style = {}
-				if (this.closePosition === 'leftTop') {
-					if (this.closeTop) {
-						style.top = this.$fu.addUnit(this.closeTop)
-					}
-					if (this.closeLeft) {
-						style.left = this.$fu.addUnit(this.closeLeft)
-					}
-				} else if (this.closePosition === 'rightTop') {
-					if (this.closeTop) {
-						style.top = this.$fu.addUnit(this.closeTop)
-					}
-					if (this.closeRight) {
-						style.right = this.$fu.addUnit(this.closeRight)
-					}
-				} else if (this.closePosition === 'bottom') {
-					if (this.closeBottom) {
-						style.bottom = this.$fu.addUnit(this.closeBottom)
-					}
-				}
-				if (this.closeSize) {
-					style.fontSize = this.$fu.addUnit(this.closeSize)
-				}
-				if (this.closeColor) {
-					style.color = this.closeColor
-				}
-				return style
-			},
-			maskStyle() {
-				let style = {}
-				style.zIndex = this.zIndex ? this.zIndex - 1 : 10024 - 1
-				return style
-			}
-		},
-		methods: {
-			// 打开
-			open() {
-				this.show = true;
-			},
-			
-			// 关闭
-			close() {
-				this.show = false;
-				this.$emit('close')
-			},
-			// 点击遮罩关闭
-			closeMask() {
-				if (!this.maskCloseable) return
-				this.close()
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.fu-landscape {
-		width: 100%;
-		overflow: hidden;
-
-		&__container {
-			max-width: 100%;
-			position: fixed;
-			display: inline-flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%, -50%);
-		}
-
-		&__icon {
-			position: absolute;
-			text-align: center;
-			font-size: 50rpx;
-			color: #FFFFFF;
-
-			&--left-top {
-				top: -100rpx;
-				left: 20rpx;
-			}
-
-			&--right-top {
-				top: -100rpx;
-				right: 20rpx;
-			}
-
-			&--bottom {
-				left: 50%;
-				bottom: -100rpx;
-				transform: translateX(-50%);
-			}
-		}
-
-		&__mask {
-			position: fixed;
-			width: 100%;
-			height: 100%;
-			background-color: rgba(0, 0, 0, 0.5);
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			opacity: 0;
-			transform: scale3d(1, 1, 0);
-			transition: all 0.25s ease-in;
-
-			&--show {
-				opacity: 1 !important;
-				transform: scale3d(1, 1, 1);
-			}
-		}
-	}
-</style>

package/components/fu-landscape/props.js

@@ -1,64 +0,0 @@
-export default {
-	props: {
-	  // 显示关闭图标
-	  closeBtn: {
-	    type: Boolean,
-	    default: true
-	  },
-	  // 关闭图标颜色
-	  closeColor: {
-	    type: String,
-	    default: ''
-	  },
-	  // 关闭图标大小
-	  closeSize: {
-	    type: [Number,String],
-	    default: 0
-	  },
-	  // 关闭图标位置
-	  // leftTop -> 左上角 rightTop -> 右上角 bottom -> 底部
-	  closePosition: {
-	    type: String,
-	    default: 'rightTop'
-	  },
-	  // 关闭图标top值
-	  // 当关闭图标在leftTop或者rightTop时生效
-	  closeTop: {
-	    type: [Number,String],
-	    default: 0
-	  },
-	  // 关闭图标right值
-	  // 当关闭图标在RightTop时生效
-	  closeRight: {
-	    type: [Number,String],
-	    default: 0
-	  },
-	  // 关闭图标bottom值
-	  // 当关闭图标在bottom时生效
-	  closeBottom: {
-	    type: [Number,String],
-	    default: 0
-	  },
-	  // 关闭图标left值
-	  // 当关闭图标在leftTop时生效
-	  closeLeft: {
-	    type: [Number,String],
-	    default: 0
-	  },
-	  // 显示遮罩
-	  showMask: {
-	    type: Boolean,
-	    default: true
-	  },
-	  // 点击遮罩可以关闭
-	  maskCloseable: {
-	    type: Boolean,
-	    default: true
-	  },
-	  // zIndex
-	  zIndex: {
-	    type: Number,
-	    default: 0
-	  }
-	}
-}

package/components/fu-tabbar/fu-tabbar.vue

@@ -1,333 +0,0 @@
-<template>
-	<view class="fu-tabbar" :class="customClass" :style="[tabbarStyle]" @touchmove.stop.prevent="() => {}">
-		<view class="fu-tabbar__wrapper" :class="{'fu-border-top': border}" :style="[tabbarWrapperStyle, {paddingBottom: `${safeAreaInsets}px`}]">
-			<view 
-				class="fu-tabbar__wrapper__item" 
-				:class="{'fu-tabbar__content__circle': midButton && item.midButton}" 
-				:style="{ background: bgColor }"
-				@tap.stop="handleClick(index)"
-				v-for="(item,index) in list" :key="index">
-				<view :class="[midButton && item.midButton? 'fu-tabbar__content__circle__button': 'fu-tabbar__wrapper__item__button']">
-					<fu-image :width="iconSize" :height="iconSize" :src="getIconPath(index)" v-if="isImg(getIconPath(index))"></fu-image>
-					<fu-icons :name="getIconPath(index)" :size="midButton && item.midButton? midButtonSize: iconSize" :color="getColor(index)" v-else></fu-icons>
-				</view>
-				<view class="fu-tabbar__wrapper__item__text" :style="{color: getColor(index)}">
-					<text>{{ item[keyName] || '' }}</text>
-				</view>
-			</view>
-			<view class="fu-tabbar__wrapper__circle__border" :class="{'fu-order': border}" :style="{ background: bgColor, left: midButtonLeft}" v-if="midButton"></view>
-		</view>
-		
-		<!-- 加上一个48rpx的高度，是为了增高有凸起按钮时防止塌陷的高度（即按钮凸出来部分的高度） -->
-		<!-- calc计算0时单位不一致会计算失败，所以这里+1px -->
-		<view class="fu-fixed-placeholder" :style="[tabbarPlaceholderStyle, {paddingBottom: `${safeAreaInsets}px`}]"></view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-	/**
-	 * Tabbar 底部导航栏
-	 * @description 此组件提供了自定义tabbar的能力
-	 * @property {String,Number} v-model双向绑定当前激活项的值（默认 0）
-	 * @property {Boolean} show 是否显示（默认 true）
-	 * @property {Array} list 各项的配置参数
-	 * @property {String,Number} zIndex 元素层级z-index（默认 1）
-	 * @property {String,Number} height tabbar的高度，默认50px，单位任意，如果为数值，则为px单位
-	 * @property {Boolean} midButton 是否显示中部的凸起按钮（默认false）
-	 * @property {String} bgColor 整个tabbar的背景颜色（默认 #ffffff）
-	 * @property {Boolean} border 是否显示上方边框（默认 true）
-	 * @property {String} keyName 从list元素对象中读取的键名（默认 'text' ）
-	 * @property {Function} beforeSwitch 切换前回调，
-	 * @property {String,Number} iconSize fusions内置图标或者绝对路径的图片 默认图片宽度（高度等比例缩放）
-	 * @property {String} activeColor 文字和字体图标激活时的颜色
-	 * @property {String} inactiveColor 文字和字体图标未激活时的颜色
-	 * @property {Boolean} hideTabbar 是否隐藏原生tabbar（默认 false）
-	 */
-	export default {
-		name: 'FuTabbar',
-		emits: ['change', 'update:modelValue'],
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				pageUrl: '', // 当前页面的URL
-				midButtonLeft: '50%', // 通过css居中凸起按钮的外层元素有误差，故通过js计算将其居中
-				safeAreaInsets: 0
-			}
-		},
-		mounted() {
-			// 是否隐藏原生tabBar
-			// 注意:如果当前页面不是tabbar页面,浏览器控制台报错: {errMsg: 'hideTabBar:fail not TabBar page'}
-			if(this.hideTabbar) uni.hideTabBar()
-			// 获取引入了fu-tabbar页面的路由地址,此地址没有路径前面的"/"
-			const pages = getCurrentPages();
-			// 页面栈中的最后一个即为当前页面, route属性为页面路径
-			this.pageUrl = pages[pages.length - 1].route;
-			if(this.midButton) this.getMidButtonLeft()
-			const fixSize = () => {
-				// #ifdef MP-WEIXIN
-				const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } = uni.getWindowInfo()
-				// #endif
-				// #ifndef MP-WEIXIN
-				const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync()
-				// #endif
-				// 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
-				if (safeArea) {
-					// #ifdef MP-WEIXIN
-					this.safeAreaInsets = screenHeight - safeArea.bottom
-					// #endif
-					// #ifndef MP-WEIXIN
-					this.safeAreaInsets = safeAreaInsets.bottom
-					// #endif
-				} else {
-					this.safeAreaInsets = 0
-				}
-			}
-			fixSize()
-			// #ifdef H5 && VUE2
-			window.addEventListener('resize', fixSize)
-			this.$once('hook:beforeDestroy', () => {
-				window.removeEventListener('resize', fixSize)
-			})
-			// #endif
-		},
-		computed: {
-			tabbarStyle() {
-				const style = {
-					zIndex: this.zIndex
-				};
-				// 合并来自父组件的customStyle样式
-				return uni.$fu.deepMerge(style, uni.$fu.addStyle(this.customStyle))
-			},
-			
-			tabbarPlaceholderStyle() {
-				return { 
-					height: `calc(${uni.$fu.addUnit(this.height)} + ${this.midButton? '48rpx': '1px'})`
-				}
-			},
-			
-			tabbarWrapperStyle() {
-				return { 
-					height: uni.$fu.addUnit(this.height), background: this.bgColor
-				}
-			},
-			
-			/**
-			 * 计算当前iten的icon路径
-			 */
-			getIconPath() {
-				return (index) => {
-					// 遍历fu-tabbar的每一项item时, 判断是否传入了pagePath属性 
-					// 如果传入了和data中的pageUrl属性对比 
-					// 如果相等, 即可判断当前的item对应当前的tabbar页面,设置高亮图标
-					// 采用这个方法,可以无需使用v-model绑定的value值
-					const pagePath = this.list[index]?.pagePath;
-					// 如果定义了pagePath属性,意味使用系统自带tabbar方案,是否则使用一个页面多个组件模拟tabbar页面的方案
-					// 这两个方案对处理tabbar中的item的激活与否方式不一样
-					if(pagePath) {
-						if(pagePath === this.pageUrl || pagePath === `/${this.pageUrl}`) {
-							return this.list[index].selectedIconPath;
-						} else {
-							return this.list[index].iconPath;
-						}
-					} else {
-						// 普通方案,索引等于v-model值时，即为激活项
-						return index == this.modelValue? this.list[index].selectedIconPath: this.list[index].iconPath;
-					}
-				}
-			},
-			
-			/**
-			 * 计算当前item的颜色
-			 */
-			getColor() {
-				return (index) => {
-					// 判断方法同理于getIconPath
-					const pagePath = this.list[index]?.pagePath;
-					if(pagePath) {
-						if(pagePath === this.pageUrl || pagePath === `/${this.pageUrl}`) return this.activeColor
-					} else {
-						return index == this.modelValue? this.activeColor: this.inactiveColor
-					}
-				}
-			}
-		},
-		methods: {
-			/**
-			 * 点击Tabbar Item
-			 */
-			async handleClick(index) {
-				if(this.beforeSwitch && typeof this.beforeSwitch === 'function') {
-					// 执行回调,同时传入索引当做参数
-					let beforeSwitchResult = this.beforeSwitch(index);
-					// 判断是否返回了Promise
-					if( typeof beforeSwitchResult === 'object' && beforeSwitchResult !== null && typeof beforeSwitchResult.then === 'function' ) {
-						await beforeSwitchResult.then(() => {
-							// Promise返回成功
-							this.switchTab(index)
-						}).catch(() => {})
-					} else if( beforeSwitchResult === true ) {
-						// 如果返true
-						this.switchTab(index);
-					}
-				} else {
-					this.switchTab(index);
-				}
-			},
-			
-			/**
-			 * 切换Tab
-			 */
-			switchTab(index) {
-				// 事件和修改v-model绑定的值
-				this.$emit('change', index);
-				// 如果有配置pagePath属性，使用uni.switchTab进行跳转
-				if(this.list[index]?.pagePath) {
-					uni.switchTab({
-						url: this.list[index].pagePath
-					})
-				} else {
-					// 如果配置了pagePath属性,将不会双向绑定v-model传入的value值
-					// 因为这个模式下, 不再需要v-model绑定的value值了,而是通过getCurrentPages()适配
-					this.$emit('update:modelValue', index)
-				}
-			},
-			
-			/**
-			 * 判断list元素对象中传入的iconPath和selectedIconPath属性，是否图片路径，只要带有"/"均认为图片形式
-			 */
-			isImg(str) {
-				return str.indexOf('/') !== -1
-			},
-			
-			/**
-			 * 获取凸出按钮外层元素的left值，让其水平居中
-			 */
-			getMidButtonLeft() {
-				const windowWidth = uni.$fu.sys().windowWidth;
-				// 由于安卓中css计算left: 50%的结果有误差,故此js计算
-				this.midButtonLeft = `${windowWidth / 2}px`;
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
-	
-	.fu-fixed-placeholder {
-		/* #ifndef APP-NVUE */
-		box-sizing: content-box;
-		/* #endif */
-		height: 50px;
-	}
-	
-	.fu-tabbar {
-		
-		&__wrapper {
-			@include flex;
-			align-items: center;
-			position: relative;
-			position: fixed;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			z-index: 998;
-			/* #ifndef APP-NVUE */
-			box-sizing: content-box;
-			/* #endif */
-			
-			&__circle__border {
-				border-radius: 100%;
-				width: 55px;
-				height: 55px;
-				top: -24px;
-				position: absolute;
-				z-index: 4;
-				background-color: #ffffff;
-				// 由于安卓的无能，导致只有3个tabbar item时，此css计算方式有误差
-				// 故使用js计算的形式来定位，此处不注释，是因为js计算有延后，避免出现位置闪动
-				left: 50%;
-				transform: translateX(-50%);
-				&:after {
-					border-radius: 100px;
-				}
-			}
-			
-			&__item {
-				flex: 1;
-				@include flex;
-				justify-content: center;
-				flex-direction: column;
-				align-items: center;
-				position: relative;
-				height: 100%;
-				
-				&__button {
-					position: absolute;
-					top: 3px;
-					left: 50%;
-					transform: translateX(-50%);
-				}
-				
-				&__text {
-					color: #999999;
-					font-size: 10px;
-					line-height: normal;
-					position: absolute;
-					bottom: 3px;
-					left: 50%;
-					transform: translateX(-50%);
-					width: 100%;
-					text-align: center;
-				}
-			}
-			
-			&__circle {
-				@include flex;
-				flex-direction: column;
-				justify-content: space-between;
-				position: relative;
-				z-index: 10;
-				/* #ifndef APP-NVUE */
-				height: calc(100% - 1px);
-				/* #endif */
-				&__button {
-					@include flex;
-					width: 45px;
-					height: 45px;
-					border-radius: 100%;
-					justify-content: center;
-					align-items: center;
-					position: absolute;
-					background-color: #ffffff;
-					top: -20px;
-					left: 50%;
-					z-index: 6;
-					transform: translateX(-50%);
-				}
-			}
-		}
-	}
-	
-	.fu-border-top {
-		border-top-width: 1px;
-	}
-	
-	.fu-border-top::after {
-		content: " ";
-		position: absolute;
-		left: 0;
-		top: 0;
-		pointer-events: none;
-		box-sizing: border-box;
-		transform-origin: 0 0;
-		width: 199.8%;
-		height: 199.7%;
-		transform: scale(0.5);
-		border: 0 solid rgba(0, 0, 0, 0.33);
-		z-index: 2;
-	}
-</style>

package/components/fu-tabbar/props.js

@@ -1,78 +0,0 @@
-export default {
-	props: {
-		// v-model双向绑定当前激活项的值
-		modelValue: {
-			type: [String,Number],
-			default: 0
-		},
-		// 是否显示（默认 true）
-		show: {
-			type: Boolean,
-			default: true
-		},
-		list: {
-			type: Array,
-			default: () => []
-		},
-		// 元素层级z-index（默认 1）
-		zIndex: {
-			type: [String,Number],
-			default: 1
-		},
-		// tabbar的高度，默认50px，单位任意，如果为数值，则为px单位
-		height: {
-			type: [String,Number],
-			default: 50
-		},
-		// 是否显示中部的凸起按钮（默认false）
-		midButton: {
-			type: Boolean,
-			default: false
-		},
-		// 凸起的图标的大小
-		midButtonSize: {
-			type: [String,Number],
-			default: 45
-		},
-		// 整个tabbar的背景颜色（默认 #ffffff）
-		bgColor: {
-			type: String,
-			default: '#ffffff'
-		},
-		// 是否显示上方边框（默认 true）
-		border: {
-			type: Boolean,
-			default: true
-		},
-		// 从list元素对象中读取的键名（默认 'text' ）
-		keyName: {
-			type: String,
-			default: 'text'
-		},
-		// 切换前回调
-		beforeSwitch: {
-			type: Function,
-			default: null
-		},
-		// fusions内置图标或者绝对路径的图片 默认图片宽度（高度等比例缩放）
-		iconSize: {
-			type: [String,Number],
-			default: 24
-		},
-		// 文字和字体图标激活时的颜色
-		activeColor: {
-			type: String,
-			default: ''
-		},
-		// 文字和字体图标未激活时的颜色
-		inactiveColor: {
-			type: String,
-			default: ''
-		},
-		// 是否隐藏原生tabbar（默认 false）
-		hideTabbar: {
-			type: Boolean,
-			default: false
-		}
-	}
-}

package/libs/css/style.h5.scss

@@ -1,35 +0,0 @@
-/* H5的时候，隐藏滚动条 */
-::-webkit-scrollbar {
-	display: none;  
-	width: 0 !important;  
-	height: 0 !important;  
-	-webkit-appearance: none;  
-	background: transparent;  
-}
-
-/* 双标签 start*/
-.capsule {
-  display: inline-flex;
-  vertical-align: middle;
-  width: 20%;
-  min-width: 136rpx;
-  height: 45rpx;
-  
-  .capsule-tag {
-    margin: 0;
-    
-    &:first-child {
-      border-top-right-radius: 0rpx;
-      border-bottom-right-radius: 0rpx;
-    }
-    
-    &:last-child {
-      
-      &::after {
-        border-top-left-radius: 0rpx;
-        border-bottom-left-radius: 0rpx;
-      }
-    }
-  }
-}
-/* 双标签 end*/