fusions-ui 1.2.4 → 1.2.7

package/components/fu-sign-board/fu-sign-board.vue

@@ -3,7 +3,7 @@
 		<!-- 签名canvas -->
 		<view class="fu-sign-board__content">
 			<view class="fu-sign-board__content__wrapper">
-				<canvas class="fu-sign-board__content__canvas" :canvas-id="canvasName" :disableScroll="true" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
+				<canvas class="fu-sign-board__content__canvas" :canvas-id="canvasId" :disableScroll="true" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
 			</view>
 		</view>
 
@@ -40,9 +40,10 @@
 	/**
 	 * @description SignBoard签名板
 	 * @property {Boolean} show = [true|false] 是否显示（默认 false）
-	 * @property {Array} signSelectColor 可选签名颜色
-	 * @property {Boolean} rotate 是否旋转输出图片
-	 * @property {String,Number} customBarHeight 自定义顶栏的高度
+	 * @property {Array} signSelectColor 可选签名颜色（默认 ['#060606', '#ec3930']）
+	 * @property {Boolean} rotate 是否旋转输出图片（默认 true）
+	 * @property {String,Number} customBarHeight 自定义顶栏的高度（默认 0）
+	 * 
 	 * @event {Function} save 保存时触发
 	 * @event {Function} close 关闭时触发
 	 */
@@ -51,8 +52,9 @@
 		emits: ['save', 'close'],
 		mixins: [mpMixin, mixin, props],
 		data() {
+			const canvasId = this.$fu.uuid();
 			return {
-				canvasName: 'fu-sign-canvas',
+				canvasId,
 				ctx: null,
 				canvasWidth: 0,
 				canvasHeight: 0,
@@ -94,7 +96,7 @@
 		},
 		created() {
 			// 创建canvas
-			this.ctx = uni.createCanvasContext(this.canvasName, this);
+			this.ctx = uni.createCanvasContext(this.canvasId, this);
 		},
 		methods: {
 			// 获取画板的相关信息
@@ -120,17 +122,19 @@
 				this.ctx.fill()
 				this.ctx.draw()
 			},
+			
 			// 开始画
 			onTouchStart(e) {
 				// #ifdef APP
 				if(e.type != 'onTouchstart') return false
 				// #endif
-				// #ifndef APP || MP-ALIPAY
-				if (e.type != 'touchstart') return false
-				// #endif
 				// #ifdef MP-ALIPAY
 				if(e.type != 'touchStart') return false
 				// #endif
+				// #ifndef APP || MP-ALIPAY
+				if (e.type != 'touchstart') return false
+				// #endif
+				
 				// 设置线条颜色
 				this.ctx.setFillStyle(this.currentSelectColor)
 				// 设置透明度
@@ -160,17 +164,18 @@
 
 				this.pointToLine(currentLine)
 			},
+			
 			// 正在画
 			onTouchMove(e) {
 				// #ifdef APP
 				if(e.type != 'onTouchmove') return false
 				// #endif
-				// #ifndef APP || MP-ALIPAY
-				if (e.type != 'touchmove') return false
-				// #endif
 				// #ifdef MP-ALIPAY
 				if(e.type != 'touchMove') return false
 				// #endif
+				// #ifndef APP || MP-ALIPAY
+				if (e.type != 'touchmove') return false
+				// #endif
 				if (e.cancelable) {
 					// 判断默认行为是否已经被禁用
 					if (!e.defaultPrevented) {
@@ -217,17 +222,18 @@
 
 				this.pointToLine(currentLine)
 			},
+			
 			// 移动结束
 			onTouchEnd(e) {
 				// #ifdef APP
 				if(e.type != 'onTouchend') return false
 				// #endif
-				// #ifndef APP || MP-ALIPAY
-				if (e.type != 'touchend') return false
-				// #endif
 				// #ifdef MP-ALIPAY
 				if(e.type != 'touchEnd') return false
 				// #endif
+				// #ifndef APP || MP-ALIPAY
+				if (e.type != 'touchend') return false
+				// #endif
 				let point = {
 					x: e.changedTouches[0].x,
 					y: e.changedTouches[0].y
@@ -260,15 +266,17 @@
 				this.linePrack = linePrack;
 				this.currentLine = [];
 			},
+			
 			// 重置绘画板
 			reDraw() {
 				this.initCanvas('#FFFFFF')
 			},
+			
 			// 保存
 			save() {
 				// 在组件内使用需要第二个参数this
 				uni.canvasToTempFilePath({
-					canvasId: this.canvasName,
+					canvasId: this.canvasId,
 					fileType: 'png',
 					quality: 1,
 					success: (res) => {
@@ -287,11 +295,12 @@
 					}
 				}, this)
 			},
+			
 			// 预览图片
 			previewImage() {
 				// 在组件内使用需要第二个参数this
 				uni.canvasToTempFilePath({
-					canvasId: this.canvasName,
+					canvasId: this.canvasId,
 					fileType: 'png',
 					quality: 1,
 					success: (res) => {
@@ -327,14 +336,17 @@
 					}
 				})
 			},
+			
 			// 切换画笔颜色
 			colorSwitch(color) {
 				this.currentSelectColor = color;
 			},
+			
 			// 绘制两点之间的线条
 			pointToLine(line) {
 				this.calcBethelLine(line)
 			},
+			
 			// 计算插值，让线条更加圆滑
 			calcBethelLine(line) {
 				if (line.length <= 1) {
@@ -424,12 +436,14 @@
 				}
 				this.currentLine = line;
 			},
+			
 			// 求两点之间的距离
 			distance(a, b) {
 				let x = b.x - a.x;
 				let y = b.y - a.y;
 				return Math.sqrt(x * x + y * y)
 			},
+			
 			// 计算点信息
 			ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
 				let a = [],
@@ -513,6 +527,7 @@
 				}
 				return a
 			},
+			
 			// 绘制贝塞尔曲线
 			drawBethel(point, is_fill, color) {
 				this.ctx.beginPath()
@@ -534,6 +549,7 @@
 				}
 				this.ctx.draw(true)
 			},
+			
 			// 旋转图片
 			async getRotateImage(dataUrl) {
 				// const url = await this.base64ToPath(dataUrl)
@@ -563,6 +579,7 @@
 					}, 50)
 				})
 			},
+			
 			// 将base64转换为本地
 			base64ToPath(dataUrl) {
 				return new Promise((resolve, reject) => {

package/components/fu-sign-board/props.js

@@ -1,21 +1,31 @@
 export default {
 	props: {
-		// 是否显示
+		/**
+		 * @description 是否显示
+		 * @default false
+		 */
 		show: {
 			type: Boolean,
 			default: false
 		},
-		// 可选签名颜色
+		/**
+		 * @description 可选签名颜色
+		 */
 		signSelectColor: {
 			type: Array,
-			default: () => (['#080808', '#E83A30'])
+			default: () => (['#060606', '#ec3930'])
 		},
-		// 是否旋转输出图片
+		/**
+		 * @description 是否旋转输出图片
+		 * @default true
+		 */
 		rotate: {
 			type: Boolean,
 			default: true
 		},
-		// 自定义顶栏的高度
+		/**
+		 * @description 自定义顶栏的高度
+		 */
 		customBarHeight: {
 			type: [Number,String],
 			default: 0

package/components/fu-skeleton/fu-skeleton.vue

@@ -73,18 +73,17 @@
 			// #endif
 		},
 		methods: {
-			/**
-			 * 初始化数据
-			 */
+			// 初始化数据
 			init() {
 				let elements = [];
-				if (!this.$fu.array(this.skeleton)) return this.$fu.error('skeleton参数必须为数组形式，参考文档示例：');
+				if (!this.$fu.isArray(this.skeleton)) return this.$fu.error('skeleton参数必须为数组形式，参考文档示例：');
 				this.skeleton.forEach(item => {
 					const elClass = this.getElCounts(item);
 					elements = elements.concat(elClass);
 				})
 				this.elements = [...elements];
 			},
+			
 			/**
 			 * 处理骨架屏参数内容
 			 * @param {Object} e 每项数据
@@ -92,11 +91,11 @@
 			getElCounts(e) {
 				let elements = [];
 				let children = [];
-				if (this.$fu.number(e)) return [{ type: 'gap', height: e }];
+				if (this.$fu.checkNumber(e)) return [{ type: 'gap', height: e }];
 				const type = e.type || 'line';
 				const num = e.num || 1;
 				const style = e.style || {};
-				const styleIsArray = this.$fu.array(style);
+				const styleIsArray = this.$fu.isArray(style);
 				const gap = e.gap || '20rpx';
 				const child = e.children || [];
 				for (let i = 0; i < child.length; i++) {
@@ -123,9 +122,8 @@
 				}
 				return elements;
 			},
-			/**
-			 * 创建动画
-			 */
+			
+			// 创建动画
 			createAnimation(opacity = 1) {
 				// loading结束之后或未开启动画不执行
 				if (!this.loading || !this.animate) return;
@@ -151,8 +149,7 @@
 	}
 </script>
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
-
+	@import '../../libs/style/components.scss';
 	$avatar: 100rpx;
 	$avatarSm: 50rpx;
 	$avatarLg: 200rpx;
@@ -237,6 +234,5 @@
 			background-position: 0 50%
 		}
 	}
-
 	/* #endif */
 </style>

package/components/fu-skeleton/props.js

@@ -1,21 +1,32 @@
 export default {
 	props: {
-		// 是否显示骨架
+		/**
+		 * @description 是否显示骨架
+		 * @default true
+		 */
 		loading: {
 			type: Boolean,
 			default: true
 		},
-		// 骨架内容 具体说明参考文档：
+		/**
+		 * @description 骨架内容 具体说明参考文档：
+		 */
 		skeleton: {
 			type: Array,
 			default: () => []
 		},
-		// 是否开启动画效果
+		/**
+		 * @description 是否开启动画效果
+		 * @default true
+		 */
 		animate: {
 			type: Boolean,
 			default: true
 		},
-		// 是否圆角骨架风格
+		/**
+		 * @description 是否圆角骨架风格
+		 * @default false
+		 */
 		round: {
 			type: Boolean,
 			default: false

package/components/fu-steps/fu-steps.vue

@@ -20,6 +20,7 @@
 	 * @property {String} activeIcon 激活状态的图标
 	 * @property {String} inactiveIcon 未激活状态图标 
 	 * @property {Boolean} dot 是否显示点类型 (默认 false )
+	 * 
 	 * @example <fu-steps current="0"><fu-steps-item title="已出库" desc="10:35" ></fu-steps-item></fu-steps>
 	 */
 	export default {
@@ -43,7 +44,7 @@
 			updateChildData() {
 				this.children.map(child => {
 					// 先判断子组件是否存在对应的方法
-					this.$fu.func((child || {}).updateFromParent()) && child.updateFromParent()
+					this.$fu.isFunc((child || {}).updateFromParent()) && child.updateFromParent()
 				})
 			},
 			// 接受子组件的通知，去修改其他子组件的数据
@@ -63,7 +64,7 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
+	@import '../../libs/style/components.scss';
 
 	.fu-steps {
 		@include flex;

package/components/fu-steps/props.js

@@ -1,36 +1,52 @@
 export default {
 	props: {
-		// 排列方向
+		/**
+		 * @description 排列方向
+		 * @values 'row' - 横向, 'column' - 竖向
+		 * @default 'row'
+		 */
 		direction: {
 			type: String,
 			default: 'row'
 		},
-		// 设置第几个步骤
+		/**
+		 * @description 设置第几个步骤
+		 */
 		current: {
 			type: [String, Number],
 			default: 0
 		},
-		// 激活状态颜色
+		/**
+		 * @description 激活状态颜色
+		 */
 		activeColor: {
 			type: String,
 			default: '#2979ff'
 		},
-		// 未激活状态颜色
+		/**
+		 * @description 未激活状态颜色
+		 */
 		inactiveColor: {
 			type: String,
 			default: '#969799'
 		},
-		// 激活状态的图标
+		/**
+		 * @description 激活状态的图标
+		 */
 		activeIcon: {
 			type: String,
 			default: ''
 		},
-		// 未激活状态图标
+		/**
+		 * @description 未激活状态图标
+		 */
 		inactiveIcon: {
 			type: String,
 			default: ''
 		},
-		// 是否显示点类型
+		/**
+		 * @description 是否显示点类型
+		 */
 		dot: {
 			type: Boolean,
 			default: false

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

@@ -9,11 +9,11 @@
 			<slot name="icon">
 				<view class="fu-steps-item__wrapper__dot" v-if="parentData.dot" :style="{ backgroundColor: statusColor }"></view>
 				<view class="fu-steps-item__wrapper__icon" v-else-if="parentData.activeIcon || parentData.inactiveIcon">
-					<fu-icons :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon" :size="iconSize" :color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor"></fu-icons>
+					<fu-icon :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon" :size="iconSize" :color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor" />
 				</view>
 				<view class="fu-steps-item__wrapper__circle" :style="{ backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent', borderColor: statusColor }" v-else>
 					<text class="fu-steps-item__wrapper__circle__text" :style="{ color: index == parentData.current ? '#ffffff' : parentData.inactiveColor }" v-if="statusClass === 'process' || statusClass === 'wait'">{{ index + 1}}</text>
-					<fu-icons :name="statusClass === 'error' ? 'cancel' : 'select'" size="12" :color="statusClass === 'error' ? '#f76c6c' : parentData.activeColor" v-else></fu-icons>
+					<fu-icon :name="statusClass === 'error' ? 'cancel' : 'select'" size="12" :color="statusClass === 'error' ? '#f76c6c' : parentData.activeColor" v-else />
 				</view>
 			</slot>
 		</view>
@@ -157,7 +157,7 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
+	@import '../../libs/style/components.scss';
 	
 	$fu-tips-color: #a7a8aa !default;
 	$fu-content-color: #77797e !default;

package/components/fu-steps-item/props.js

@@ -1,21 +1,31 @@
 export default {
 	props: {
-		// 标题
+		/**
+		 * @description 标题
+		 */
 		title: {
 			type: [String, Number],
 			default: ''
 		},
-		// 描述文本
+		/**
+		 * @description 描述文本
+		 */
 		desc: {
 			type: [String, Number],
 			default: ''
 		},
-		// 图标大小
+		/**
+		 * @description 图标大小
+		 * @default 18
+		 */
 		iconSize: {
 			type: [String, Number],
-			default: 17
+			default: 18
 		},
-		// 当前步骤是否处于失败状态
+		/**
+		 * @description 当前步骤是否处于失败状态
+		 * @default false
+		 */
 		error: {
 			type: Boolean,
 			default: false

package/components/fu-sticky/fu-sticky.vue

@@ -16,11 +16,12 @@
 	 * @property {String,Number} offsetTop 吸顶时与顶部的距离，单位px（默认 0 ）
 	 * @property {String,Number} customNavHeight 自定义导航栏的高度 （h5 默认44  其他默认 0 ）
 	 * @property {Boolean} disabled = [true|false] 是否禁用吸顶功能 （默认 false ）
-	 * @property {String} bgColor 组件背景颜色
-	 * @property {String,Number} zIndex	吸顶时的z-index值（默认 998）
+	 * @property {String} bgColor 背景颜色
+	 * @property {String,Number} zIndex	吸顶时的z-index值（默认 99）
 	 * @property {String,Number} index	自定义标识，用于区分是哪一个组件（默认 0）
 	 * @property {String} customClass 自定义外部样式类
 	 * @property {Object,String} customStyle 自定义外部的样式
+	 * 
 	 * @example <fu-sticky offsetTop="200"><view>此处吸顶</view></fu-sticky>
 	 */
 	export default {
@@ -139,7 +140,6 @@
 			setFixed(top) {
 				// 判断是否出于吸顶条件范围
 				const fixed = top <= this.stickyTop;
-				console.log(fixed);
 				this.fixed = fixed;
 			},
 			

package/components/fu-sticky/props.js

@@ -1,11 +1,15 @@
 export default {
 	props: {
-		// 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+		/**
+		 * @description 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+		 */
 		offsetTop: {
 		    type: [String, Number],
 		    default: 0
 		},
-		// 自定义导航栏的高度
+		/**
+		 * @description 自定义导航栏的高度
+		 */
 		customNavHeight: {
 			type: [String, Number],
 			// #ifdef H5
@@ -16,22 +20,32 @@ export default {
 			default: 0
 			// #endif
 		},
-		// 是否禁用吸顶功能
+		/**
+		 * @description 是否禁用吸顶功能
+		 * @default false
+		 */
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		// 吸顶区域的背景颜色
+		/**
+		 * @description 吸顶区域的背景颜色
+		 */
 		bgColor: {
 			type: String,
 			default: ''
 		},
-		// z-index值
+		/**
+		 * @description z-index值
+		 * @default 99
+		 */
 		zIndex: {
 			type: [String, Number],
-			default: 998
+			default: 99
 		},
-		// 列表中的索引值
+		/**
+		 * @description 列表中的索引值
+		 */
 		index: {
 			type: [String, Number],
 			default: 0

package/components/fu-subsection/fu-subsection.vue

@@ -1,19 +1,24 @@
 <template>
 	<view ref="fu-subsection" class="fu-subsection" :class="[`fu-subsection--${mode}`]" :style="[$fu.addStyle(this.customStyle), wrapperStyle]">
-		<view ref="fu-subsection__bar" class="fu-subsection__bar" :style="[barStyle]"
+		<view 
+			ref="fu-subsection__bar" 
+			class="fu-subsection__bar" 
+			:style="[barStyle]"
 			:class="[
 			mode === 'button' && 'fu-subsection--button__bar',
 			current === 0 && mode === 'subsection' && 'fu-subsection__bar--first',
 			current > 0 && current < list.length - 1 && mode === 'subsection' && 'fu-subsection__bar--center',
 			current === list.length - 1 && mode === 'subsection' && 'fu-subsection__bar--last'
 		]"></view>
-		<view :ref="`fu-subsection__item--${index}`" class="fu-subsection__item"
+		<view 
+			:ref="`fu-subsection__item--${index}`" 
+			class="fu-subsection__item"
 			:class="[
 			`fu-subsection__item--${index}`,
 			index < list.length - 1 && 'fu-subsection__item--no-border-right',
 			index === 0 && 'fu-subsection__item--first',
 			index === list.length - 1 && 'fu-subsection__item--last'
-		]" :style="[itemStyle(index)]" v-for="(item, index) in list" :key="index" @tap="clickHandler(index)">
+		]" :style="[itemStyle(index)]" v-for="(item, index) in list" :key="index" @tap="handleClick(index)">
 			<text class="fu-subsection__item__text" :style="[textStyle(index)]">{{ getText(item) }}</text>
 		</view>
 	</view>
@@ -44,6 +49,7 @@
 	 * @property {String,Object} customStyle 定义需要用到的外部样式
 	 * @property {String,Object} customItemStyle 自定义选项样式
 	 * @property {String} keyName 从`list`元素对象中读取的键名（默认 'name' ）
+	 * 
 	 * @event {Function} change 分段器选项发生改变时触发  回调 index：选项的index索引值，从0开始
 	 * @example <fu-subsection :list="list" :current="current" @change="sectionChange"></fu-subsection>
 	 */
@@ -152,7 +158,7 @@
 				// #endif
 			},
 			
-			clickHandler(index) {
+			handleClick(index) {
 				this.$emit("change", index);
 			}
 		},
@@ -188,21 +194,24 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	$padding: 3px;
+	$border-radius: 3px;
+	
 	.fu-subsection {
-		display: flex;
-		flex-direction: row;
+		@include flex(row);
 		position: relative;
-		overflow: hidden;
 		/* #ifndef APP-NVUE */
 		width: 100%;
 		box-sizing: border-box;
+		overflow: hidden;
 		/* #endif */
 		
 		&--button {
 			height: 32px;
 			background-color: rgb(238, 238, 239);
-			padding: 3px;
-			border-radius: 3px;
+			padding: $padding;
+			border-radius: $border-radius;
 			align-items: stretch;
 			
 			&__bar {
@@ -223,8 +232,8 @@
 			/* #endif */
 			
 			&--first {
-				border-top-left-radius: 3px;
-				border-bottom-left-radius: 3px;
+				border-top-left-radius: $border-radius;
+				border-bottom-left-radius: $border-radius;
 				border-top-right-radius: 0px;
 				border-bottom-right-radius: 0px;
 			}
@@ -239,17 +248,16 @@
 			&--last {
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
-				border-top-right-radius: 3px;
-				border-bottom-right-radius: 3px;
+				border-top-right-radius: $border-radius;
+				border-bottom-right-radius: $border-radius;
 			}
 		}
 		
 		&__item {
-			display: flex;
-			flex-direction: row;
-			flex: 1;
+			@include flex(row);
 			justify-content: center;
 			align-items: center;
+			flex: 1;
 			// vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
 			position: relative;
 			
@@ -258,20 +266,19 @@
 			}
 			
 			&--first {
-				border-top-left-radius: 3px;
-				border-bottom-left-radius: 3px;
+				border-top-left-radius: $border-radius;
+				border-bottom-left-radius: $border-radius;
 			}
 			
 			&--last {
-				border-top-right-radius: 3px;
-				border-bottom-right-radius: 3px;
+				border-top-right-radius: $border-radius;
+				border-bottom-right-radius: $border-radius;
 			}
 			
 			&__text {
+				@include flex(row);
 				font-size: 12px;
 				line-height: 12px;
-				display: flex;
-				flex-direction: row;
 				align-items: center;
 				transition-property: color;
 				transition-duration: 0.3s;