fusions-ui 1.2.4 → 1.2.6

package/components/fu-icon/props.js

@@ -0,0 +1,55 @@
+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,6 +1,6 @@
 <template>
-	<fu-transition mode="fade" :show="show" :duration="fade? duration : 0" :styles="wrapStyle" v-if="show">
-		<view class="fu-image" :class="[`fu-image--${elId}`]" :style="[wrapStyle, backgroundStyle]" @tap="onClick">
+	<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" 
@@ -15,13 +15,13 @@
 			<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-icons :name="loadingIcon" size="20" color="#999999"></fu-icons>
+					<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-icons :name="errorIcon" size="20" color="#999999"></fu-icons>
+					<fu-icon :name="errorIcon" size="20" color="#999999"></fu-icon>
 				</slot>
 			</view>
 			<view class="fu-image__inner" :style="[wrapStyle]" v-if="dim"></view>
@@ -52,8 +52,8 @@
 	 * 	@value top right 裁剪 不缩放图片，只显示图片的右上边区域
 	 * 	@value bottom left 裁剪	不缩放图片，只显示图片的左下边区域
 	 * 	@value bottom right 裁剪 不缩放图片，只显示图片的右下边区域
-	 * @property {String,Number} width 宽度，单位任意，如果为数值，则为px单位 （默认 '100%' ）
-	 * @property {String,Number} height 高度，单位任意，如果为数值，则为px单位 （默认 'auto' ）
+	 * @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 ）
@@ -69,6 +69,7 @@
 	 * @property {String} bgColor 背景颜色，用于深色页面加载图片时，为了和背景色融合
 	 * @property {String,Number} dim 定义图片模糊 默认0
 	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * 
 	 * @event {Function} click 点击图片时触发
 	 * @event {Function} error 图片加载失败时触发
 	 * @event {Function} load 图片加载成功时触发
@@ -76,11 +77,12 @@
 	 */
 	export default {
 		name: 'FuImage',
-		emits: ['click', 'load', 'error'],
 		mixins: [mpMixin, mixin, props],
+		emits: ['click', 'load', 'error'],
 		data() {
 			const elId = this.$fu.uuid()
 			return {
+				elId,
 				// 图片是否加载错误，如果是，则显示错误占位图
 				isError: false,
 				// 初始化组件时，默认为加载中状态
@@ -95,7 +97,6 @@
 				show: false,
 				// 是否开启图片出现在可视范围进行加载（另一种懒加载）
 				observeShow: !this.observeLazyLoad,
-				elId,
 				// 因为props的值无法修改，故需要一个中间值
 				imgWidth: this.width,
 				// 因为props的值无法修改，故需要一个中间值
@@ -139,16 +140,18 @@
 			})
 		},
 		methods: {
-			// 点击图片
-			onClick(e) {
+			// 点击图片触发
+			handleClick(e) {
 				this.$emit('click', e)
 			},
+			
 			// 图片加载失败
 			onErrorHandler(err) {
 				this.loading = false
 				this.isError = true
 				this.$emit('error', err)
 			},
+			
 			// 图片加载完成，标记loading结束
 			onLoadHandler() {
 				this.loading = false
@@ -156,6 +159,7 @@
 				this.$emit('load')
 				this.removeBgColor()
 			},
+			
 			// 移除图片的背景色
 			removeBgColor() {
 				// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
@@ -163,6 +167,7 @@
 					backgroundColor: 'transparent'
 				};
 			},
+			
 			// 观察图片是否在可见视口
 			observerFn(){
 				// 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载

package/components/fu-image/props.js

@@ -1,91 +1,142 @@
 export default {
     props: {
-        // 图片地址
+        /**
+		 * @description 图片地址
+		 */
         src: {
             type: String,
             default: ''
         },
-        // 裁剪模式（默认 'aspectFill'）
+		/**
+		 * @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
         },
-        // 图片形状，circle-圆形，square-方形
+		/**
+		 * @description 图片形状
+		 * @values 'circle' - 圆形, 'square' - 方形
+		 * @default 'square'
+		 */
         shape: {
             type: String,
             default: 'square'
         },
-        // 圆角，单位任意
+        /**
+		 * @description 设置圆角，单位任意
+		 */
         radius: {
             type: [String,Number],
             default: 0
         },
-        // 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+        /**
+		 * @description 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+		 * @default true
+		 */
         lazyLoad: {
             type: Boolean,
             default: true
         },
-		// 是否开启observer懒加载，nvue不生效
+		/**
+		 * @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'
         },
-        // 是否显示加载中的图标或者自定义的slot
+        /**
+		 * @description 是否显示加载中的图标或者自定义的slot
+		 * @default true
+		 */
         showLoading: {
             type: Boolean,
             default: true
         },
-        // 是否显示加载错误的图标或者自定义的slot
+        /**
+		 * @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
         },
-        // 过渡时间，单位ms
+        /**
+		 * @description 过渡时间，单位ms
+		 * @default 300
+		 */
         duration: {
             type: [String,Number],
             default: 300
         },
-        // 背景颜色，用于深色页面加载图片时，为了和背景色融合
+        /**
+		 * @description 背景颜色，用于深色页面加载图片时，为了和背景色融合
+		 */
         bgColor: {
             type: String,
             default: ''
         },
-		// 图片模糊 默认0
+		/**
+		 * @description 图片模糊
+		 */
 		dim: {
 			type: [String,Number],
 			default: 0

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

@@ -27,10 +27,11 @@
 	 * IndexAnchor 列表锚点
 	 * @description 此组件需配合fu-index-list组件一起使用
 	 * @property {String,Number} text 列表锚点文本内容
-	 * @property {String} color 列表锚点文字颜色 ( 默认 '#5c5e62' )
-	 * @property {String,Number} size 列表锚点文字大小，单位默认px ( 默认 14 )
-	 * @property {String} bgColor 列表锚点背景颜色 ( 默认 '#f6f6f6' )
-	 * @property {String,Number} height 列表锚点高度，单位默认px ( 默认 32 )
+	 * @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 {
@@ -71,7 +72,7 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
+	@import '../../libs/style/components.scss';
 
 	.fu-index-anchor {
 		@include flex;

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

@@ -1,26 +1,40 @@
 export default {
 	props: {
-		// 列表锚点文本内容
+		/**
+		 * @description 列表锚点文本内容
+		 */
 		text: {
 			type: [String, Number],
 			default: ''
 		},
-		// 列表锚点文字颜色
+		/**
+		 * @description 列表锚点文字颜色
+		 * @default '#606266'
+		 */
 		color: {
 			type: String,
-			default: '#5c5e62'
+			default: '#606266'
 		},
-		// 列表锚点文字大小，单位默认px
+		/**
+		 * @description 列表锚点文字大小
+		 * @default 14
+		 */
 		size: {
 			type: [String, Number],
 			default: 14
 		},
-		// 列表锚点背景颜色
+		/**
+		 * @description 列表锚点背景颜色
+		 * @default '#f6f6f6'
+		 */
 		bgColor: {
 			type: String,
 			default: '#f6f6f6'
 		},
-		// 列表锚点高度，单位默认px
+		/**
+		 * @description 列表锚点高度
+		 * @default 32
+		 */
 		height: {
 			type: [String, Number],
 			default: 32

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

@@ -1,11 +1,11 @@
 <template>
 	<!-- #ifdef APP-NVUE -->
 	<cell ref="fu-index-item">
-		<!-- #endif -->
+	<!-- #endif -->
 		<view :id="`fu-index-item-${id}`" class="fu-index-item" :class="[`fu-index-item-${id}`]">
 			<slot />
 		</view>
-		<!-- #ifdef APP-NVUE -->
+	<!-- #ifdef APP-NVUE -->
 	</cell>
 	<!-- #endif -->
 </template>
@@ -74,6 +74,6 @@
 	}
 </script>
 
-<style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
+<style>
+
 </style>

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

@@ -75,6 +75,9 @@
 </template>
 
 <script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
 	const indexList = () => {
 		const indexList = [];
 		const charCodeOfA = 'A'.charCodeAt(0);
@@ -83,9 +86,6 @@
 		}
 		return indexList;
 	}
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
 	// #ifdef APP-NVUE
 	// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
 	const dom = uni.requireNativePlugin('dom')
@@ -93,11 +93,11 @@
 	/**
 	 * IndexList 索引列表
 	 * @description 此组件通过折叠面板收纳内容区域
-	 * @property {String} inactiveColor	右边锚点非激活的颜色 ( 默认 '#686b6f' )
-	 * @property {String} activeColor 右边锚点激活的颜色 ( 默认 '#2979ff' )
+	 * @property {String} inactiveColor	右边锚点非激活的颜色 (默认 '#606266')
+	 * @property {String} activeColor 右边锚点激活的颜色 (默认 '#2979ff')
 	 * @property {Array} indexList 索引字符列表，数组形式
-	 * @property {Boolean} sticky = [true|false] 是否开启锚点自动吸顶 ( 默认 true )
-	 * @property {String,Number} customNavHeight 自定义导航栏的高度 ( 默认 0 )
+	 * @property {Boolean} sticky = [true|false] 是否开启锚点自动吸顶 (默认 true)
+	 * @property {String,Number} customNavHeight 自定义导航栏的高度 (默认 0)
 	 * @event {Function} select 选中右边索引字符时触发
 	 * */
 	export default {
@@ -361,8 +361,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-index-list {
 

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

@@ -1,26 +1,39 @@
 export default {
 	props: {
-		// 右边锚点非激活的颜色
+		/**
+		 * @description 右边锚点非激活的颜色
+		 * @default '#606266'
+		 */
 		inactiveColor: {
 			type: String,
-			default: '#686b6f'
+			default: '#606266'
 		},
-		// 右边锚点激活的颜色
+		/**
+		 * @description 右边锚点激活的颜色
+		 * @default '#2979ff'
+		 */
 		activeColor: {
 			type: String,
 			default: '#2979ff'
 		},
-		// 索引字符列表，数组形式
+		/**
+		 * @description 索引字符列表，数组形式
+		 */
 		indexList: {
 			type: Array,
 			default: () => []
 		},
-		// 是否开启锚点自动吸顶
+		/**
+		 * @description 是否开启锚点自动吸顶
+		 * @default true
+		 */
 		sticky: {
 			type: Boolean,
 			default: true
 		},
-		// 自定义导航栏的高度
+		/**
+		 * @description 自定义导航栏的高度
+		 */
 		customNavHeight: {
 			type: [String,Number],
 			default: 0