fusions-ui 1.2.4 → 1.2.7

package/components/fu-loading/fu-loading.vue

@@ -1,31 +1,34 @@
 <template>
-	<view class="fu-loading" :class="customClass" :style="[$fu.addStyle(customStyle)]" v-if="show">
-		<view class="fu-loading__flower"
-			:class="[mode === 'over'? `fu-loading__${mode} fu-loading__${mode}--animation`: `fu-loading__flower--${mode}`]"
-			ref="ani"
-			:style="{
-				color: color,
-				background: mode === 'over'? color: 'transparent',
-				width: $fu.addUnit(size),
-				height: $fu.addUnit(size),
-				borderTopColor: color,
-				borderBottomColor: otherBorderColor,
-				borderLeftColor: otherBorderColor,
-				borderRightColor: otherBorderColor,
-				'animation-duration': `${duration}ms`,
-				'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
-			}" v-if="!webviewHide">
-			<block v-if="mode === 'flower'">
-				<!-- #ifndef APP-NVUE -->
-				<view v-for="(item,index) in array12" :key="index" class="fu-loading__dot"></view>
-				<!-- #endif -->
-				<!-- #ifdef APP-NVUE -->
-				<!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
-				<loading-indicator class="fu-loading-indicator" :animating="true" :style="{ color: color, width: $fu.addUnit(size), height: $fu.addUnit(size) }" v-if="!webviewHide"/>
-				<!-- #endif -->
-			</block>
+	<fu-transition :show="true">
+		<view class="fu-loading" :class="[customClass]" :style="[$fu.addStyle(customStyle)]" v-if="show">
+			<view 
+				class="fu-loading__flower"
+				:class="[mode === 'over'? `fu-loading__${mode} fu-loading__${mode}--animation`: `fu-loading__flower--${mode}`]"
+				ref="ani"
+				:style="{
+					color: color,
+					background: mode === 'over'? color: 'transparent',
+					width: $fu.addUnit(size),
+					height: $fu.addUnit(size),
+					borderTopColor: color,
+					borderBottomColor: otherBorderColor,
+					borderLeftColor: otherBorderColor,
+					borderRightColor: otherBorderColor,
+					'animation-duration': `${duration}ms`,
+					'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
+				}" v-if="!webviewHide">
+				<block v-if="mode === 'flower'">
+					<!-- #ifndef APP-NVUE -->
+					<view v-for="(item,index) in array12" :key="index" class="fu-loading__dot"></view>
+					<!-- #endif -->
+					<!-- #ifdef APP-NVUE -->
+					<!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
+					<loading-indicator class="fu-loading-indicator" :animating="true" :style="{ color: color, width: $fu.addUnit(size), height: $fu.addUnit(size) }" v-if="!webviewHide"/>
+					<!-- #endif -->
+				</block>
+			</view>
 		</view>
-	</view>
+	</fu-transition>
 </template>
 
 <script>
@@ -50,8 +53,10 @@
 	 * @property {String,Number} duration 动画执行周期时间（默认 1200）
 	 * @property {String} inactiveColor	暗边颜色（仅mode=circle时有效） 
 	 * @property {String} timingFunction 动画模式 （默认 'linear' ）
-	 * @property {String} customClass 定义需要用到的外部样式
+	 * @property {String} customClass 定义需要用到的外部样式类
 	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * 
+	 * @example <fu-loading></fu-loading>
 	 */
 	export default {
 		name: "FuLoading",

package/components/fu-loading/props.js

@@ -1,37 +1,57 @@
 export default {
 	props: {
-		// 是否显示
+		/**
+		 * @description 是否显示
+		 * @default true
+		 */
 		show: {
 			type: Boolean,
 			default: true
 		},
-		// 动画类型
-		// circle 圆圈形状 semicircle 半圆形状 flower 花朵形状  over翻转效果
+		/**
+		 * @description 动画类型
+		 * @values 'circle' - 圆圈形状, 'semicircle' - 半圆形状, 'flower' - 花朵形状, 'over' - 翻转效果
+		 * @default 'flower'
+		 */
 		mode: {
 		  type: String,
 		  default: 'flower'
 		},
-		// 暗边颜色（仅mode=circle时有效）
+		/**
+		 * @description 加载颜色
+		 * @default '#a5a6a8'
+		 */
 		color: {
 		  type: String,
 		  default: '#a5a6a8'
 		},
-		// 动画大小（默认 20）
+		/**
+		 * @description 加载动画大小
+		 * @default 20
+		 */
 		size: {
 		  type: [String, Number],
 		  default: 20
 		},
-		// 动画模式
+		/**
+		 * @description 动画模式
+		 * @default 'linear'
+		 */
 		timingFunction: {
 			type: String,
 			default: 'linear'
 		},
-		// 动画执行周期时间
+		/**
+		 * @description 动画执行周期时间
+		 * @default 1200
+		 */
 		duration: {
 			type: [String, Number],
 			default: 1200
 		},
-		// mode=circle时的暗边颜色
+		/**
+		 * @description 暗边颜色（仅mode=circle时生效）
+		 */
 		inactiveColor: {
 			type: String,
 			default: ''

package/components/fu-loading-more/fu-loading-more.vue

@@ -1,68 +1,64 @@
 <template>
-	<view class="fu-load-more">
+	<view class="fu-loading-more" :class="[customClass]" :style="[$fu.addStyle(this.customStyle)]">
 		<fu-loading 
 			:mode="mode" 
 			:color="color" 
 			:size="iconSize" 
 			:show="loadingType == 1? true :false">
 		</fu-loading>
-		<text class="fu-load-more__text" :style="textStyle">
+		<text 
+			class="fu-loading-more__text" 
+			:style="{
+				color: color,
+				fontSize: $fu.addUnit(size)
+			}">
 			{{ loadingType == 0? contentText.contentdown: (loadingType  == 1? contentText.contentrefresh : contentText.contentnomore) }}
 		</text>
 	</view>
 </template>
 
 <script>
+	import mixin from '../../libs/mixin/mixin.js'
 	import mpMixin from '../../libs/mixin/mpMixin.js'
 	import props from './props.js'
 	/**
 	 * LoadingMore加载更多
 	 * @description 此组件一般用于标识页面底部加载数据时的状态
 	 * @property {String,Number} loadingType = [0|1|2] 组件状态  默认0 上拉的状态：0-loading前；1-loading中；2-没有更多了
-	 * @property {String} color 定义颜色（默认 '#777777'）
+	 * @property {String} color 定义颜色（默认 '#a5a6a8'）
 	 * @property {String,Number} size 定义字体大小（默认 12）
-	 * @property {String,Number} opacity 定义字体透明度（默认 1）
 	 * @property {Object} contentText 定义文字描述 （ 默认{contentdown: "上拉显示更多", contentrefresh: "正在努力加载", contentnomore: "已经到底了"}）
 	 * @property {String,Number} iconSize 定义图标大小（默认 18）
 	 * @property {String} mode = [circle|semicircle|flower|over] 动画类型（默认 flower）
 	 * 	@value circle 圆圈形状
 	 * 	@value semicircle 半圆形状
-	 * 	@value flower 经典类似花朵的形状
+	 * 	@value flower 花朵形状
 	 * 	@value over  翻转效果
+	 * @property {String} customClass 定义需要用到的外部类
+	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * 
 	 * @example <fu-loading-more :loadingType="1"></fu-loading-more>
 	 */
 	export default {
 		name: "FuLoadingMore",
-		mixins: [mpMixin, props],
+		mixins: [mixin, mpMixin, props],
 		data() {
 			return {};
-		},
-		computed: {
-			textStyle() {
-				let obj = {
-					color: this.color,
-					opacity: this.opacity,
-					fontSize: this.$fu.addUnit(this.size)
-				}
-				return obj
-			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.fu-load-more {
-		display: flex;
-		/* #ifdef APP */
-		flex-direction: row;
-		/* #endif */
-		height: 40px;
+	@import '../../libs/style/components.scss';
+	
+	.fu-loading-more {
+		@include flex(row);
 		align-items: center;
 		justify-content: center;
+		height: 40px;
 		
 		&__text {
 			font-size: 14px;
-			color: #777777;
 			margin-left: 5px;
 		}
 	}

package/components/fu-loading-more/props.js

@@ -1,36 +1,50 @@
 export default {
 	props: {
-		//组件状态 上拉的状态：0-loading前；1-loading中；2-没有更多了
+		/**
+		 * @description 加载状态
+		 * @values 0 - loading前, 1 - loading中, 2 - 没有更多了
+		 * @default 0
+		 */
 		loadingType: {
 			type: [String,Number],
 			default: 0
 		},
-		// 动画类型 circle 圆圈形状 semicircle 半圆形状 flower 经典类似花朵的形状  over翻转效果
+		/**
+		 * @description 动画类型
+		 * @values 'circle' - 圆圈形状, 'semicircle' - 半圆形状, 'flower' - 花朵形状, 'over' - 翻转效果
+		 * @default 'flower'
+		 */
 		mode: {
 			type: String,
 			default: 'flower'
 		},
-		// 定义颜色  默认#777777
+		/**
+		 * @description 文本&字体颜色
+		 * @default '#a5a6a8'
+		 */
 		color: {
 			type: String,
-			default: "#777777"
+			default: "#a5a6a8"
 		},
-		// 定义字体大小 默认12
+		/**
+		 * @description 字体大小
+		 * @default 12
+		 */
 		size: {
 			type: [String,Number],
 			default: 12
 		},
-		// 定义字体透明度 默认1
-		opacity: {
-			type: [String,Number],
-			default: 1
-		},
-		// 定义图标大小（默认 18）
+		/**
+		 * @description 图标大小
+		 * @default 18
+		 */
 		iconSize: {
 			type: [String,Number],
 			default: 18
 		},
-		// 定义文字描述
+		/**
+		 * @description 文字描述
+		 */
 		contentText: {
 			type: Object,
 			default () {
@@ -38,7 +52,7 @@ export default {
 					contentdown: "上拉显示更多",
 					contentrefresh: "正在努力加载",
 					contentnomore: "已经到底了"
-				};
+				}
 			}
 		}
 	}

package/components/fu-modal/fu-modal.vue

@@ -4,7 +4,7 @@
 		mode="center" 
 		:zIndex="zIndex" 
 		:customStyle="{
-			borderRadius: '6px', 
+			borderRadius: '10px', 
 			overflow: 'hidden',
 			marginTop: `-${$fu.addUnit(negativeTop)}`
 		}" 
@@ -66,10 +66,11 @@
 	 * @property {String,Number} negativeTop 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
 	 * @property {String,Number} width modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
 	 * @property {String} align = [left|center|right] 文本对齐方式 （默认'left'） 
-	 * 	@value left 靠左显示
-	 * 	@value center 居中显示
-	 * 	@value right 靠右显示
+	 * 	@value left 左对齐
+	 * 	@value center 居中
+	 * 	@value right 右对齐
 	 * @property {String,Object} textStyle 文本扩展样式
+	 * 
 	 * @event {Function} confirm 点击确认按钮时触发
 	 * @event {Function} cancel 点击取消按钮时触发
 	 * @event {Function} close 点击遮罩关闭出发，isMaskClick为true有效
@@ -132,8 +133,8 @@
 </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-modal-border-radius: 6px;
 	$fu-bg-color: #f3f4f6;
 	$fu-content-color: #606266;
@@ -142,7 +143,9 @@
 		@include flex(column);
 		width: 650rpx;
 		border-radius: $fu-modal-border-radius;
+		/* #ifndef APP-NVUE */
 		overflow: hidden;
+		/* #endif */
 		
 		&__title {
 			font-size: 16px;
@@ -150,6 +153,8 @@
 			color: $fu-content-color;
 			text-align: center;
 			padding-top: 25px;
+			position: relative;
+			z-index: 1;
 		}
 
 		&__content {

package/components/fu-modal/props.js

@@ -1,81 +1,125 @@
 export default {
 	props: {
-		// 标题
+		/**
+		 * @description 标题
+		 */
 		title: {
 			type: [String],
 			default: ''
 		},
-		// 弹窗内容
+		/**
+		 * @description 弹窗内容
+		 */
 		content: {
 			type: String,
 			default: ''
 		},
-		// 确认文案
+		/**
+		 * @description 确认文案
+		 * @default '确认'
+		 */
 		confirmText: {
 			type: String,
 			default: '确认'
 		},
-		// 取消文案
+		/**
+		 * @description 取消文案
+		 * @default '取消'
+		 */
 		cancelText: {
 			type: String,
 			default: '取消'
 		},
-		// 是否显示确认按钮
+		/**
+		 * @description 是否显示确认按钮
+		 * @default true
+		 */
 		showConfirmButton: {
 			type: Boolean,
 			default: true
 		},
-		// 是否显示取消按钮
+		/**
+		 * @description 是否显示取消按钮
+		 * @default true
+		 */
 		showCancelButton: {
 			type: Boolean,
-			default: false
+			default: true
 		},
-		// 确认按钮颜色
+		/**
+		 * @description 确认按钮颜色
+		 */
 		confirmColor: {
 			type: String,
 			default: ''
 		},
-		// 取消文字颜色
+		/**
+		 * @description 取消文字颜色
+		 * @default '#999999'
+		 */
 		cancelColor: {
 			type: String,
 			default: '#999999'
 		},
-		// 对调确认和取消的位置
+		/**
+		 * @description 对调确认和取消的位置
+		 * @default false
+		 */
 		buttonReverse: {
 			type: Boolean,
 			default: false
 		},
-		// 层级
+		/**
+		 * @description 层级
+		 * @default 10075
+		 */
 		zIndex: {
 			type: [String, Number],
 			default: 10075
 		},
-		// 是否异步关闭，只对确定按钮有效
+		/**
+		 * @description 是否异步关闭，只对确定按钮有效
+		 * @default false
+		 */
 		asyncClose: {
 			type: Boolean,
 			default: false
 		},
-		// 是否允许点击遮罩关闭modal
+		/**
+		 * @description 是否允许点击遮罩关闭modal
+		 * @default true
+		 */
 		isMaskClick: {
 			type: Boolean,
 			default: true
 		},
-		// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+		/**
+		 * @description 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+		 */
 		negativeTop: {
 			type: [String, Number],
 			default: 0
 		},
-		// modal宽度，不支持百分比，可以数值，px，rpx单位
+		/**
+		 * @description modal宽度，不支持百分比，可以数值，px，rpx单位
+		 * @default '650rpx'
+		 */
 		width: {
 			type: [String, Number],
 			default: '650rpx'
 		},
-		// 文本对齐方式，默认left
+		/**
+		 * @description 文本对齐方式
+		 * @values 'left' - 左对齐, 'center' - 居中, 'right' - 右对齐
+		 * @default 'left'
+		 */
 		align: {
 			type: String,
 			default: 'left'
 		},
-		// 文本自定义样式
+		/**
+		 * @description 文本自定义样式
+		 */
 		textStyle: {
 			type: [Object, String],
 			default: ''