fusions-ui 1.2.4 → 1.2.7

package/components/fu-upload/props.js

@@ -1,6 +1,8 @@
 export default {
 	props: {
-		// value 组件数据，通常用来回显 ,类型由return-type属性决定
+		/**
+		 * @description value 组件数据，通常用来回显 ,类型由return-type属性决定
+		 */
 		value: {
 			type: [Array,Object],
 			default () {
@@ -13,49 +15,74 @@ export default {
 				return []
 			}
 		},
-		// 组件禁用（默认 false）
+		/**
+		 * @description 组件禁用
+		 * @default false
+		 */
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		// 禁用图片预览，仅mode为grid时生效（默认 false）
+		/**
+		 * @description 禁用图片预览，仅mode为grid时生效
+		 * @default false
+		 */
 		disablePreview: {
 			type: Boolean,
 			default: false
 		},
-		// 是否显示删除按钮（默认 true）
+		/**
+		 * @description 是否显示删除按钮
+		 * @default true
+		 */
 		delIcon: {
 			type: Boolean,
 			default: true
 		},
-		// 是否自动上传，值为true则只触发@select，可自行上传（默认 false）
+		/**
+		 * @description 是否自动上传，值为true则只触发@select，可自行上传
+		 * @default false
+		 */
 		autoUpload: {
 			type: Boolean,
 			default: false
 		},
-		// 最大选择个数，h5会自动忽略多选的部分（默认 9）
+		/**
+		 * @description 最大选择个数，h5会自动忽略多选的部分
+		 * @default 9
+		 */
 		maxCount: {
 			type: [String,Number],
 			default: 9
 		},
-		// 选择文件类型，可选值：image/video/all；（默认 image）
+		/**
+		 * @description 选择文件类型，可选值：image/video/all
+		 * @default 'image'
+		 */
 		fileType: {
 			type: String,
 			default: 'image'
 		},
-		// 选择文件后的文件列表样式，可选值：grid/list；（默认 grid）
+		/**
+		 * @description 选择文件后的文件列表样式，可选值：grid/list
+		 * @default 'grid'
+		 */
 		mode: {
 			type: String,
 			default: 'grid'
 		},
-		// 选择文件后缀，根据 fileType 属性而不同
+		/**
+		 * @description 选择文件后缀，根据 fileType 属性而不同
+		 */
 		fileExtname: {
 			type: [Array,String],
 			default () {
 				return []
 			}
 		},
-		// 定义列表样式，mode为list时的样式
+		/**
+		 * @description 定义列表样式，mode为list时的样式
+		 */
 		listStyles: {
 			type: Object,
 			default () {
@@ -69,7 +96,9 @@ export default {
 				}
 			}
 		},
-		// 自定义图片样式 选择文件后缀，根据 fileType 属性而不同
+		/**
+		 * @description 自定义图片样式 选择文件后缀，根据 fileType 属性而不同
+		 */
 		imageStyles: {
 			type: Object,
 			default () {
@@ -79,42 +108,61 @@ export default {
 				}
 			}
 		},
-		// 是否只读（默认 false）
+		/**
+		 * @description 是否只读
+		 * @default false
+		 */
 		readonly: {
 			type: Boolean,
 			default: false
 		},
-		// 返回类型数据格式，当为 object 时，只能单选，且会覆盖，可选值：array/object（默认 array）
+		/**
+		 * @description 返回类型数据格式，当为 object 时，只能单选，且会覆盖，可选值：array/object
+		 * @default 'array'
+		 */
 		returnType: {
 			type: String,
 			default: 'array'
 		},
-		// original原图，compressed 压缩图，默认二者都有
+		/**
+		 * @description original原图，compressed 压缩图，默认二者都有
+		 */
 		sizeType: {
 			type: Array,
 			default () {
 				return ['original', 'compressed']
 			}
 		},
-		// album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
-		// 注意：sourceType 值在 H5 平台根据浏览器的不同而表现不同，一般不可限制仅使用相册，部分浏览器也无法限制是否使用相机
+		/**
+		 * @description album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
+		 * 注意：sourceType 值在 H5 平台根据浏览器的不同而表现不同，一般不可限制仅使用相册，部分浏览器也无法限制是否使用相机
+		 */
 		sourceType: {
 			type: Array,
 			default () {
 				return  ['album', 'camera']
 			}
 		},
-		// 相机类型，仅fileType为video有效，可选值：front/back；(默认 back)
+		/**
+		 * @description 相机类型，仅fileType为video有效，可选值：front/back
+		 * @default 'back'
+		 */
 		camera: {
 			type: String,
 			default: 'back'
 		},
-		// 是否压缩所选视频源文件，仅fileType为video有效，(默认 true)
+		/**
+		 * @description 是否压缩所选视频源文件，仅fileType为video有效
+		 * @default true
+		 */
 		compressed: {
 			type: Boolean,
 			default: true
 		},
-		// 是否显示已上传的文件列表（默认 true）
+		/**
+		 * @description 是否显示已上传的文件列表
+		 * @default true
+		 */
 		showFileList: {
 			type: Boolean,
 			default: true

package/components/fu-upload/upload-file.vue

@@ -46,27 +46,39 @@
 		name: "uploadFile",
 		emits:['uploadFiles', 'choose', 'delFile'],
 		props: {
-			// 数组
+			/**
+			 * @description 数组
+			 */
 			fileList: {
 				type: Array,
 				default: () => []
 			},
-			// 是否禁用（默认 false）
+			/**
+			 * @description 是否禁用
+			 * @default false
+			 */
 			disabled: {
 				type: Boolean,
 				default: false
 			},
-			// 是否显示删除图标（默认 true）
+			/**
+			 * @description 是否显示删除图标
+			 */
 			delIcon: {
 				type: Boolean,
 				default: true
 			},
-			// 最大限制数量
+			/**
+			 * @description 最大限制数量
+			 * @default 9
+			 */
 			maxCount: {
 				type: [Number, String],
 				default: 9
 			},
-			// list样式
+			/**
+			 * @description list样式
+			 */
 			listStyles: {
 				type: Object,
 				default () {
@@ -80,12 +92,18 @@
 					}
 				}
 			},
-			// 是否只读（默认 false）
+			/**
+			 * @description 是否只读
+			 * @default false
+			 */
 			readonly:{
 				type:Boolean,
 				default: false
 			},
-			// 是否显示已上传的文件列表（默认 true）
+			/**
+			 * @description 是否显示已上传的文件列表
+			 * @default true
+			 */
 			showFileList: {
 				type: Boolean,
 				default: true
@@ -185,11 +203,10 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	
 	.fu-file-picker__files {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
+		@include flex(column);
 		justify-content: flex-start;
 	}
 
@@ -200,9 +217,7 @@
 	}
 
 	.file-picker__mask {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex;
 		justify-content: center;
 		align-items: center;
 		position: absolute;
@@ -220,9 +235,7 @@
 	}
 
 	.fu-file-picker__item {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex;
 		align-items: center;
 		padding: 8px 10px;
 		padding-right: 5px;
@@ -287,8 +300,8 @@
 	}
 
 	.icon-del-box {
+		@include flex;
 		/* #ifndef APP-NVUE */
-		display: flex;
 		margin: auto 0;
 		/* #endif */
 		align-items: center;

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

@@ -41,27 +41,40 @@
 		name: "UploadImage",
 		emits: ['choose', 'uploadFiles', 'delFile'],
 		props: {
-			// 数组
+			/**
+			 * @description 数组
+			 */
 			list: {
 				type: Array,
 				default: () => []
 			},
-			// 是否禁用（默认 false）
+			/**
+			 * @description 是否禁用
+			 * @default false
+			 */
 			disabled: {
 				type: Boolean,
 				default: false
 			},
-			// 是否禁用预览（默认 false）
+			/**
+			 * @description 是否禁用预览
+			 * @default false
+			 */
 			disablePreview: {
 				type: Boolean,
 				default: false
 			},
-			// 最大限制数量（默认 9）
+			/**
+			 * @description 最大限制数量
+			 * @default 9
+			 */
 			maxCount: {
 				type: [Number, String],
 				default: 9
 			},
-			// 自定义样式
+			/**
+			 * @description 自定义样式
+			 */
 			imageStyles: {
 				type: Object,
 				default () {
@@ -72,17 +85,26 @@
 					}
 				}
 			},
-			// 是否显示删除图标（默认 true）
+			/**
+			 * @description 是否显示删除图标
+			 * @default true
+			 */
 			delIcon: {
 				type: Boolean,
 				default: true
 			},
-			// 是否只读（默认 false）
+			/**
+			 * @description 是否只读
+			 * @default false
+			 */
 			readonly:{
 				type: Boolean,
 				default: false
 			},
-			// 是否显示已上传的文件列表（默认 true）
+			/**
+			 * @description 是否显示已上传的文件列表
+			 * @default true
+			 */
 			showFileList: {
 				type: Boolean,
 				default: true
@@ -94,7 +116,7 @@
 					width: 'auto',
 					height: 'auto',
 					border: {}
-				}
+				};
 				return this.$fu.deepMerge(styles, this.$fu.addStyle(this.imageStyles))
 			},
 			boxStyle() {
@@ -183,9 +205,11 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	
 	.fu-upload-image {
+		@include flex;
 		/* #ifndef APP-NVUE */
-		display: flex;
 		box-sizing: border-box;
 		/* #endif */
 		flex-wrap: wrap;
@@ -226,9 +250,7 @@
 		}
 		
 		&__mask {
-			/* #ifndef APP-NVUE */
-			display: flex;
-			/* #endif */
+			@include flex;
 			justify-content: center;
 			align-items: center;
 			position: absolute;
@@ -248,9 +270,7 @@
 	}
 	
 	.add-wrap {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex;
 		align-items: center;
 		justify-content: center;
 	}
@@ -261,9 +281,7 @@
 	}
 	
 	.icon-del-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex;
 		align-items: center;
 		justify-content: center;
 		position: absolute;

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

@@ -99,6 +99,8 @@
 	 * @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>
@@ -361,7 +363,7 @@
 			current(newVal){
 				if(!this.touching) 
 					this.$nextTick(()=>{
-						this.init(newVal?newVal:0);
+						this.init(newVal? newVal: 0);
 					})
 			},
 			list(newVal) {
@@ -375,15 +377,15 @@
 				if(!this.chain) {// 解决：非联动，内容过多的情况，滚动一段距离，再切换未滚动到顶部的BUG
 					this.contentScrollTopTwo = 0 - Math.random() * 4 - 4;
 				}
-				this.$emit('change',newVal);
+				this.$emit('change', newVal);
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
-	@import '../../libs/css/color.scss';
+	@import '../../libs/style/components.scss';
+	@import '../../libs/style/color.scss';
 	
 	.fu-vtabs {
 		@include flex;

package/components/fu-vtabs/props.js

@@ -1,76 +1,111 @@
 export default {
 	props: {
-		// 列表数据
+		/**
+		 * @description 列表数据
+		 */
 		list: {
 			type: Array,
 			default: () => []
 		},
-		// 从list元素对象中读取的键名，默认name
+		/**
+		 * @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
 		},
-		// 整个列表的高度，默认auto屏幕高度
+		/**
+		 * @description 整个列表的高度，默认auto屏幕高度
+		 * @default 'auto'
+		 */
 		height: {
 			type: [String,Number],
 			default: 'auto'
 		},
-		// 左边列表的宽度，默认200rpx
+		/**
+		 * @description 左边列表的宽度
+		 * @default '180rpx'
+		 */
 		barWidth: {
 			type: [String,Number],
 			default: '180rpx'
 		},
-		// 左边列表是否允许滚动
+		/**
+		 * @description 左边列表是否允许滚动
+		 * @default true
+		 */
 		barScrollable: {
 			type: Boolean,
 			default: true
 		},
-		// 背景颜色 默认主题颜色 $bg-color
+		/**
+		 * @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-waterfall/fu-waterfall.vue

@@ -41,13 +41,14 @@
 	 * @property {Array} value/modelValue 瀑布流数组数据，仅vue生效 （默认 [] ）
 	 * @property {String} idKey 数据的id值，根据id值对数据执行删除操作
 	 * @property {String} idPrefix 前置标识
-	 * @property {Number} addTime 每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，默认200 单位ms
-	 * @property {String,Number} columnCount 瀑布流的列数，默认2
-	 * @property {String,Number} columnGap 列与列的间隙，默认20
+	 * @property {Number} addTime 每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，单位ms（默认 200）
+	 * @property {String,Number} columnCount 瀑布流的列数（默认2）
+	 * @property {String,Number} columnGap 列与列的间（默认 15）
 	 * @property {Boolean} showScrollbar = [true|false] 是否显示滚动条，仅nvue生效（默认 false）
-	 * @property {String,Number} columnWidth 列宽，单位px，仅nvue生效（默认"auto"）
+	 * @property {String,Number} columnWidth 列宽，单位px，仅nvue生效（默认 'auto'）
 	 * @property {String,Number} width 瀑布流的宽度，仅nvue生效 
 	 * @property {String,Number} height 瀑布流的高度，仅nvue生效
+	 * 
 	 * @event {Function} changeList 处理数据时触发，为了兼容某些端不支持插槽回传参数的情况（仅vue生效）例：列表数据，columnCount=2时、第一次返回{list1:{...}}，第二次返回{list2:{...}}...；返回后需要手动追加对应的列数据
 	 * @event {Function} finish 瀑布流加载完成触发事件（vue生效）
 	 * @event {Function} clear 清空数据列表触发事件（vue生效）
@@ -105,8 +106,8 @@
 			
 			/**
 			 * 计算列
-			 * @param {Object} size       列数
-			 * @param {Object} isCreate   是否初始化创建(created生命周期)
+			 * @param {Object} size 列数
+			 * @param {Object} isCreate 是否初始化创建(created生命周期)
 			 */
 			calculateColumn: function(size) {
 				this.colunmList = [];
@@ -214,10 +215,11 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	
 	/* 瀑布流最外层 */
 	.fu-waterfall {
-		display: flex;
-		flex-direction: row;
+		@include flex(row);
 		align-items: flex-start;
 		
 		&__column {
@@ -225,8 +227,8 @@
 			flex: 1;
 			// #ifndef APP-NVUE
 			height: auto;
-			// #endif
 			overflow: hidden;
+			// #endif
 		}
 	}