fusions-ui 1.2.6 → 1.2.8

package/components/fu-icon/props.js

@@ -1,55 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 图标名称
-		 */
-		name: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 图标颜色
-		 * @default '#333333'
-		 */
-		color: {
-			type: String,
-			default: '#333333'
-		},
-		/**
-		 * @description 图标大小
-		 * @default 16
-		 */
-		size: {
-			type: [Number, String],
-			default: 16
-		},
-		/**
-		 * @description 自定义图标
-		 */
-		fontFamily: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 图片模式，当name为图片地址时生效
-		 */
-		imgMode: {
-			type: String,
-			default: 'aspectFill'
-		},
-		/**
-		 * @description 显示图片小图标时，图片的宽度
-		 */
-		width: {
-			type: [String, Number],
-			default: () => ''
-		},
-		/**
-		 * @description 显示图片小图标时，图片的高度
-		 */
-		height: {
-			type: [String, Number],
-			default: () => ''
-		}
-	}
-}

package/components/fu-image/fu-image.vue

@@ -1,268 +0,0 @@
-<template>
-	<fu-transition mode="fade" :show="show" :duration="fade? duration : 0" :customStyle="wrapStyle" v-if="show">
-		<view class="fu-image" :class="[`fu-image--${elId}`]" :style="[wrapStyle, backgroundStyle]" @tap="handleClick">
-			<image 
-				class="fu-image__image" 
-				:src="src" 
-				:mode="mode" 
-				@error="onErrorHandler" 
-				@load="onLoadHandler"
-				:show-menu-by-longpress="showMenuByLongpress" 
-				:lazy-load="lazyLoad" 
-				:style="[imageStyle]" 
-				:webp="webp"
-				v-if="!isError && observeShow"></image>
-			<view v-if="showLoading && loading" class="fu-image__loading"
-				:style="{borderRadius: shape == 'circle' ? '50%' : $fu.addUnit(this.radius), backgroundColor: this.bgColor}">
-				<slot name="loading">
-					<fu-icon :name="loadingIcon" size="20" color="#999999"></fu-icon>
-				</slot>
-			</view>
-			<view v-if="showError && isError && !loading" class="fu-image__error"
-				:style="{borderRadius: shape == 'circle' ? '10000px' : $fu.addUnit(this.radius)}">
-				<slot name="error">
-					<fu-icon :name="errorIcon" size="20" color="#999999"></fu-icon>
-				</slot>
-			</view>
-			<view class="fu-image__inner" :style="[wrapStyle]" v-if="dim"></view>
-		</view>
-	</fu-transition>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-	/**
-	 * Image 图片
-	 * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
-	 * @property {String} src 图片地址
-	 * @property {String} mode 裁剪模式（默认 'aspectFill' ），详细见官网说明 https://uniapp.dcloud.net.cn/component/image.html#image
-	 * 	@value scaleToFill 缩放	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
-	 * 	@value aspectFit 缩放 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
-	 * 	@value aspectFill 缩放 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
-	 * 	@value widthFix 缩放 宽度不变，高度自动变化，保持原图宽高比不变
-	 * 	@value heightFix 缩放 高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
-	 * 	@value top 裁剪	不缩放图片，只显示图片的顶部区域
-	 * 	@value bottom 裁剪 不缩放图片，只显示图片的底部区域
-	 * 	@value center 裁剪 不缩放图片，只显示图片的中间区域
-	 * 	@value left 裁剪 不缩放图片，只显示图片的左边区域
-	 * 	@value right 裁剪 不缩放图片，只显示图片的右边区域
-	 * 	@value top left 裁剪 不缩放图片，只显示图片的左上边区域
-	 * 	@value top right 裁剪 不缩放图片，只显示图片的右上边区域
-	 * 	@value bottom left 裁剪	不缩放图片，只显示图片的左下边区域
-	 * 	@value bottom right 裁剪 不缩放图片，只显示图片的右下边区域
-	 * @property {String,Number} width 设置宽度，单位任意，如果为数值，则为px单位 （默认 '100%' ）
-	 * @property {String,Number} height 设置高度，单位任意，如果为数值，则为px单位 （默认 'auto' ）
-	 * @property {String} shape = [circle|square] 图片形状，circle-圆形，square-方形 （默认 'square' ）
-	 * @property {String,Number} radius	圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
-	 * @property {Boolean} lazyLoad = [true|false] 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
-	 * @property {Boolean} observeLazyLoad = [true|false] 是否开启observer懒加载，nvue不生效（默认 false）
-	 * @property {Boolean} showMenuByLongpress = [true|false] 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
-	 * @property {String} loadingIcon 加载中的图标 （默认 'image' ）
-	 * @property {String} errorIcon 加载失败的图标 （默认 'error' ）
-	 * @property {Boolean} showLoading = [true|false] 是否显示加载中的图标或者自定义的slot （默认 true ）
-	 * @property {Boolean} showError = [true|false] 是否显示加载错误的图标或者自定义的slot （默认 true ）
-	 * @property {Boolean} fade = [true|false] 是否需要淡入效果 （默认 true ）
-	 * @property {Boolean} webp = [true|false] 只支持网络资源，只对微信小程序有效 （默认 false ）
-	 * @property {String,Number} duration 搭配fade参数的过渡时间，单位ms （默认 300 ）
-	 * @property {String} bgColor 背景颜色，用于深色页面加载图片时，为了和背景色融合
-	 * @property {String,Number} dim 定义图片模糊 默认0
-	 * @property {Object,String} customStyle 定义需要用到的外部样式
-	 * 
-	 * @event {Function} click 点击图片时触发
-	 * @event {Function} error 图片加载失败时触发
-	 * @event {Function} load 图片加载成功时触发
-	 * @example <fu-image width="100%" height="300px" :src="src"></fu-image>
-	 */
-	export default {
-		name: 'FuImage',
-		mixins: [mpMixin, mixin, props],
-		emits: ['click', 'load', 'error'],
-		data() {
-			const elId = this.$fu.uuid()
-			return {
-				elId,
-				// 图片是否加载错误，如果是，则显示错误占位图
-				isError: false,
-				// 初始化组件时，默认为加载中状态
-				loading: true,
-				// 不透明度，为了实现淡入淡出的效果
-				opacity: 1,
-				// 过渡时间，因为props的值无法修改，故需要一个中间值
-				durationTime: this.duration,
-				// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
-				backgroundStyle: {},
-				// 用于fade模式的控制组件显示与否
-				show: false,
-				// 是否开启图片出现在可视范围进行加载（另一种懒加载）
-				observeShow: !this.observeLazyLoad,
-				// 因为props的值无法修改，故需要一个中间值
-				imgWidth: this.width,
-				// 因为props的值无法修改，故需要一个中间值
-				imgHeight: this.height
-			};
-		},
-		computed: {
-			wrapStyle() {
-				let style = {};
-				// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上px单位
-				style.width = this.$fu.addUnit(this.width);
-				style.height = this.mode !== 'widthFix'? this.height? this.$fu.addUnit(this.height): 'auto': 'auto';
-				style['backdrop-filter'] = `blur(${this.$fu.addUnit(this.dim)})`;
-				// 如果是显示圆形，设置一个很多的半径值即可
-				style.borderRadius = this.shape == 'circle' ? '10000px' : this.$fu.addUnit(this.radius)
-				// 如果设置圆角，必须要有hidden，否则可能圆角无效
-				style.overflow = this.radius > 0 ? 'hidden' : 'visible';
-				if (this.fade) {
-					style.opacity = this.opacity
-					// nvue下，这几个属性必须要分开写
-					style.transitionDuration = `${this.durationTime}ms`
-					style.transitionTimingFunction = 'ease-in-out'
-					style.transitionProperty = 'opacity'
-				}
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle));
-			},
-			imageStyle() {
-				let style = {};
-				style.borderRadius = this.shape == 'circle' ? '10000px' : this.$fu.addUnit(this.radius);
-				// #ifdef APP-NVUE
-				style.width = this.$fu.addUnit(this.imgWidth);
-				style.height = this.$fu.addUnit(this.imgHeight);
-				// #endif
-				return style;
-			}
-		},
-		mounted() {
-			this.show = true;
-			this.$nextTick(()=>{
-				if(this.observeLazyLoad) this.observerFn();
-			})
-		},
-		methods: {
-			// 点击图片触发
-			handleClick(e) {
-				this.$emit('click', e)
-			},
-			
-			// 图片加载失败
-			onErrorHandler(err) {
-				this.loading = false
-				this.isError = true
-				this.$emit('error', err)
-			},
-			
-			// 图片加载完成，标记loading结束
-			onLoadHandler() {
-				this.loading = false
-				this.isError = false
-				this.$emit('load')
-				this.removeBgColor()
-			},
-			
-			// 移除图片的背景色
-			removeBgColor() {
-				// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
-				this.backgroundStyle = {
-					backgroundColor: 'transparent'
-				};
-			},
-			
-			// 观察图片是否在可见视口
-			observerFn(){
-				// 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载
-				this.$nextTick(() => {
-					uni.$once('onLazyLoadReachBottom', () => {
-						if (!this.observeShow) this.observeShow = true
-					})
-				})
-				setTimeout(() => {
-					// #ifndef APP-NVUE
-					this.disconnectObserver(this.observerName)
-					const contentObserver = uni.createIntersectionObserver(this)
-					contentObserver.relativeToViewport({
-						bottom: this.thresholdValue
-					}).observe(`.fu-image--${this.elId}`, (res) => {
-						if (res.intersectionRatio > 0) {
-							// 懒加载状态改变
-							this.observeShow = true
-							// 如果图片已经加载，去掉监听，减少性能消耗
-							this.disconnectObserver(this.observerName)
-						}
-					})
-					this[this.observerName] = contentObserver
-					// #endif
-					// #ifdef APP-NVUE
-					this.observeShow = true;
-					// #endif
-				}, 50)
-			},
-			
-			disconnectObserver(observerName) {
-				const observer = this[observerName]
-				observer && observer.disconnect()
-			}
-		},
-		watch: {
-			src: {
-				immediate: true,
-				handler(n) {
-					if (!n) {
-						// 如果传入null或者''，或者false，或者undefined，标记为错误状态
-						this.isError = true
-					} else {
-						this.isError = false;
-						this.loading = true;
-					}
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	$fu-image-error-top:0px !default;
-	$fu-image-error-left:0px !default;
-	$fu-image-error-width:100% !default;
-	$fu-image-error-hight:100% !default;
-	$fu-image-error-background-color: #f2f3f4 !default;
-	$fu-image-error-color: #959698 !default;
-	$fu-image-error-font-size: 23px !default;
-
-	.fu-image {
-		position: relative;
-		transition: opacity 0.5s ease-in-out;
-
-		&__image {
-			width: 100%;
-			height: 100%;
-			/* #ifndef APP-NVUE */
-			display: block;
-			/* #endif */
-		}
-
-		&__loading,
-		&__error {
-			position: absolute;
-			top: $fu-image-error-top;
-			left: $fu-image-error-left;
-			width: $fu-image-error-width;
-			height: $fu-image-error-hight;
-			display: flex;
-			/* #ifdef APP-NVUE */
-			flex-direction: row;
-			/* #endif */
-			align-items: center;
-			justify-content: center;
-			background-color: $fu-image-error-background-color;
-			color: $fu-image-error-color;
-			font-size: $fu-image-error-font-size;
-		}
-		
-		&__inner {
-			position: fixed;
-			top: 0;
-			left: 0;
-		}
-	}
-</style>

package/components/fu-image/props.js

@@ -1,145 +0,0 @@
-export default {
-    props: {
-        /**
-		 * @description 图片地址
-		 */
-        src: {
-            type: String,
-            default: ''
-        },
-		/**
-		 * @description 裁剪模式
-		 * @default 'aspectFill'
-		 */
-        mode: {
-            type: String,
-            default: 'aspectFill'
-        },
-        /**
-		 * @description 设置宽度，单位任意
-		 * @default '100%'
-		 */
-        width: {
-            type: [String,Number],
-            default: '100%'
-        },
-        /**
-		 * @description 设置高度，单位任意
-		 * @default 120
-		 */
-        height: {
-            type: [String,Number],
-            default: 150
-        },
-		/**
-		 * @description 图片形状
-		 * @values 'circle' - 圆形, 'square' - 方形
-		 * @default 'square'
-		 */
-        shape: {
-            type: String,
-            default: 'square'
-        },
-        /**
-		 * @description 设置圆角，单位任意
-		 */
-        radius: {
-            type: [String,Number],
-            default: 0
-        },
-        /**
-		 * @description 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
-		 * @default true
-		 */
-        lazyLoad: {
-            type: Boolean,
-            default: true
-        },
-		/**
-		 * @description  是否开启 observer 懒加载，nvue不生效
-		 * @default false
-		 */
-		observeLazyLoad: {
-			type: Boolean,
-			default: false
-		},
-        /**
-		 * @description 开启长按图片显示识别微信小程序码菜单
-		 * @default true
-		 */
-        showMenuByLongpress: {
-            type: Boolean,
-            default: true
-        },
-        /**
-		 * @description 加载中的图标
-		 * @default 'image'
-		 */
-        loadingIcon: {
-            type: String,
-            default: 'image'
-        },
-        /**
-		 * @description 加载失败的图标
-		 * @default 'error'
-		 */
-        errorIcon: {
-            type: String,
-            default: 'error'
-        },
-        /**
-		 * @description 是否显示加载中的图标或者自定义的slot
-		 * @default true
-		 */
-        showLoading: {
-            type: Boolean,
-            default: true
-        },
-        /**
-		 * @description 是否显示加载错误的图标或者自定义的slot
-		 * @default true
-		 */
-        showError: {
-            type: Boolean,
-            default: true
-        },
-        /**
-		 * @description 是否需要淡入效果
-		 * @default true
-		 */
-        fade: {
-            type: Boolean,
-            default: true
-        },
-        /**
-		 * @description 只支持网络资源，只对微信小程序有效
-		 * @default true
-		 */
-        webp: {
-            type: Boolean,
-            default: true
-        },
-        /**
-		 * @description 过渡时间，单位ms
-		 * @default 300
-		 */
-        duration: {
-            type: [String,Number],
-            default: 300
-        },
-        /**
-		 * @description 背景颜色，用于深色页面加载图片时，为了和背景色融合
-		 */
-        bgColor: {
-            type: String,
-            default: ''
-        },
-		/**
-		 * @description 图片模糊
-		 */
-		dim: {
-			type: [String,Number],
-			default: 0
-		}
-    }
-}

package/components/fu-index-anchor/fu-index-anchor.vue

@@ -1,91 +0,0 @@
-<template>
-	<!-- #ifdef APP-NVUE -->
-	<header>
-	<!-- #endif -->
-	<view 
-		:ref="`fu-index-anchor-${text}`" 
-		:class="['fu-index-anchor', {'fu-index-anchor-sticky': parentData.sticky}]"
-		:style="{
-			height: $fu.addUnit(height),
-			backgroundColor: bgColor
-		}">
-		<text class="fu-index-anchor__text" :style="{ fontSize: $fu.addUnit(size), color: color }">{{ text }}</text>
-	</view>
-	<!-- #ifdef APP-NVUE -->
-	</header>
-	<!-- #endif -->
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom')
-	// #endif
-	/**
-	 * IndexAnchor 列表锚点
-	 * @description 此组件需配合fu-index-list组件一起使用
-	 * @property {String,Number} text 列表锚点文本内容
-	 * @property {String} color 列表锚点文字颜色 (默认 '#606266')
-	 * @property {String,Number} size 列表锚点文字大小 (默认 14)
-	 * @property {String} bgColor 列表锚点背景颜色 (默认 '#f6f6f6')
-	 * @property {String,Number} height 列表锚点高度 (默认 32)
-	 * 
-	 * @example <fu-index-anchor :text="indexList[index]"></fu-index-anchor>
-	 */
-	export default {
-		name: 'FuIndexAnchor',
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				parentData: {
-					sticky: true
-				}
-			}
-		},
-		created() {
-			this.init()
-		},
-		methods: {
-			init() {
-				// 此处会活动父组件实例，并赋值给实例的parent属性
-				const indexList = this.$fu.$parent.call(this, 'FuIndexList');
-				if (!indexList) { 
-					return this.$fu.error('fu-index-anchor必须要搭配fu-index-list组件使用')
-				}
-				this.parentData.sticky = indexList.sticky;
-				// 将当前实例放入到fu-index-list中
-				indexList.anchors.push(this)
-				const indexListItem = this.$fu.$parent.call(this, 'FuIndexItem');
-				// #ifndef APP-NVUE
-				// 只有在非nvue下，fu-index-anchor才是嵌套在fu-index-item中的
-				if (!indexListItem) {
-					return this.$fu.error('fu-index-anchor必须要搭配fu-index-item组件使用')
-				}
-				// 设置fu-index-item的id为anchor的text标识符，因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性
-				indexListItem.id = this.text.charCodeAt(0);
-				// #endif
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-
-	.fu-index-anchor {
-		@include flex;
-		align-items: center;
-		padding-left: 15px;
-		z-index: 1;
-		&-sticky {
-			position: sticky;
-			top: 0;
-		}
-		&__text {
-			@include flex;
-			align-items: center;
-		}
-	}
-</style>

package/components/fu-index-anchor/props.js

@@ -1,43 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 列表锚点文本内容
-		 */
-		text: {
-			type: [String, Number],
-			default: ''
-		},
-		/**
-		 * @description 列表锚点文字颜色
-		 * @default '#606266'
-		 */
-		color: {
-			type: String,
-			default: '#606266'
-		},
-		/**
-		 * @description 列表锚点文字大小
-		 * @default 14
-		 */
-		size: {
-			type: [String, Number],
-			default: 14
-		},
-		/**
-		 * @description 列表锚点背景颜色
-		 * @default '#f6f6f6'
-		 */
-		bgColor: {
-			type: String,
-			default: '#f6f6f6'
-		},
-		/**
-		 * @description 列表锚点高度
-		 * @default 32
-		 */
-		height: {
-			type: [String, Number],
-			default: 32
-		}
-	}
-}

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

@@ -1,79 +0,0 @@
-<template>
-	<!-- #ifdef APP-NVUE -->
-	<cell ref="fu-index-item">
-	<!-- #endif -->
-		<view :id="`fu-index-item-${id}`" class="fu-index-item" :class="[`fu-index-item-${id}`]">
-			<slot />
-		</view>
-	<!-- #ifdef APP-NVUE -->
-	</cell>
-	<!-- #endif -->
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	// #ifdef APP-NVUE
-	// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
-	const dom = uni.requireNativePlugin('dom')
-	// #endif
-	/**
-	 * IndexItem 组件
-	 * @description 此组件需配合fu-index-list组件一起使用
-	 */
-	export default {
-		name: 'FuIndexItem',
-		mixins: [mpMixin, mixin],
-		data() {
-			return {
-				// 本组件到滚动条顶部的距离
-				top: 0,
-				height: 0,
-				id: ''
-			}
-		},
-		created() {
-			// 子组件fu-index-anchor的实例
-			this.anchor = {};
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init() {
-				// 此处会活动父组件实例，并赋值给实例的parent属性
-				this.getParentData('FuIndexList')
-				if (!this.parent) {
-					return this.$fu.error('fu-index-item必须要搭配fu-index-list组件使用')
-				}
-				this.$fu.sleep().then(() =>{
-					this.getIndexItemRect().then(size => {
-						// 由于对象的引用特性，此处会同时生效到父组件的children数组的本实例的top属性中，供父组件判断读取
-						this.top = Math.ceil(size.top);
-						this.height = Math.ceil(size.height);
-					})
-				})
-			},
-			getIndexItemRect() {
-				return new Promise(resolve => {
-					// #ifndef APP-NVUE
-					this.$fuGetRect('.fu-index-item').then(size => {
-						resolve(size)
-					})
-					// #endif
-
-					// #ifdef APP-NVUE
-					const ref = this.$refs['fu-index-item']
-					dom.getComponentRect(ref, res => {
-						resolve(res.size)
-					})
-					// #endif
-				}) 
-			}
-		}
-	}
-</script>
-
-<style>
-
-</style>