fusions-ui 1.2.4 → 1.2.7

package/components/fu-swiper/props.js

@@ -1,104 +1,160 @@
 export default {
 	props: {
-		// 轮播图列表数据
-		// [{image: xxx.jpg, title: 'xxxx'}]  ['xxxx', 'xxxx', 'xxxx']
+		/**
+		 * @description 轮播图列表数据 如：[{image: xxx.jpg, title: 'xxxx'}]  ['xxxx', 'xxxx', 'xxxx']
+		 */
 		list: {
 			type: Array,
 			default: () => []
 		},
-		// 圆角的值
+		/**
+		 * @description 设置圆角
+		 * @default 5
+		 */
 		radius: {
 			type: [String, Number],
 			default: 5
 		},
-		// 初始化时，默认显示第几项
+		/**
+		 * @description 初始化时，默认显示第几项
+		 */
 		current: {
 			type: Number,
 			default: 0
 		},
-		// 高度
+		/**
+		 * @description 设置高度
+		 * @default 160
+		 */
 		height: {
 			type: [String, Number],
-			default: 125
+			default: 160
 		},
-		// 背景色
+		/**
+		 * @description 背景颜色
+		 * @default '#f2f3f4'
+		 */
 		bgColor: {
 			type: String,
 			default: '#f2f3f4'
 		},
-		// 图片的属性名
-		nameKey: {
+		/**
+		 * @description 图片的属性名
+		 * @default 'image'
+		 */
+		keyName: {
 			type: String,
 			default: 'image'
 		},
-		// 是否显示标题
+		/**
+		 * @description 是否显示标题
+		 * @default false
+		 */
 		showTitle: {
 			type: Boolean,
 			default: false
 		},
-		// 标题的属性名
+		/**
+		 * @description 是否显示标题
+		 * @default 'title'
+		 */
 		keyTitle: {
 			type: String,
 			default: 'title'
 		},
-		// 自定义标题样式
+		/**
+		 * @description 定义需要用到的外部标题样式
+		 */
 		titleStyle: {
 			type: Object,
 			default: () => {}
 		},
-		// 指示器模式
-		// rect: 方形; round: 圆角方形; dot: 点; number: 轮播图下标
+		/**
+		 * @description 指示器模式
+		 * @values 'rect' - 方形, 'round' - 圆角方形, 'dot' - 点, 'number' - 轮播图下标
+		 * @default 'round'
+		 */
 		mode: {
 			type: String,
 			default: 'round'
 		},
-		// 是否显示指示灯（默认 true）
+		/**
+		 * @description 是否显示指示灯
+		 * @default true
+		 */
 		indicator: {
 			type: Boolean,
 			default: true
 		},
-		// 指示器位置
-		// topLeft \ topCenter \ topRight \ bottomLeft \ bottomCenter \ bottomRight
+		/**
+		 * @description 指示器位置
+		 * @values 'topLeft' - 指示器位于左上角, 'topCenter' - 指示器位于上方中间位置, 'topRight' - 指示器位于右上角, 'bottomLeft' - 指示器位于左下角, 'bottomCenter' - 指示器位于底部中间位置, 'bottomRight' - 指示器位于右下角
+		 * @default 'bottomCenter'
+		 */
 		indicatorPosition: {
 			type: String,
 			default: 'bottomCenter'
 		},
-		// 开启3D缩放效果
+		/**
+		 * @description 开启3D缩放效果
+		 * @default false
+		 */
 		effect3D: {
 			type: Boolean,
 			default: false
 		},
-		// 在3D缩放模式下，item之间的间隔
+		/**
+		 * @description 在3D缩放模式下，item之间的间隔
+		 * @default 25
+		 */
 		effect3DPreviousSpacing: {
 			type: [String, Number],
 			default: 25
 		},
-		// 自定播放
+		/**
+		 * @description 自动播放
+		 * @default true
+		 */
 		autoplay: {
 			type: Boolean,
 			default: true
 		},
-		// 图片之间播放间隔多久
+		/**
+		 * @description 图片之间播放间隔多久
+		 * @default 3000
+		 */
 		interval: {
 			type: Number,
 			default: 3000
 		},
-		// 轮播间隔时间
+		/**
+		 * @description 轮播间隔时间
+		 * @default 500
+		 */
 		duration: {
 			type: Number,
 			default: 500
 		},
-		// 是否衔接滑动
+		/**
+		 * @description 是否衔接滑动
+		 * @default true
+		 */
 		circular: {
 			type: Boolean,
 			default: true
 		},
-		// 图片裁剪模式
+		/**
+		 * @description 图片裁剪模式
+		 * @default 'aspectFill'
+		 */
 		imgMode: {
 			type: String,
 			default: 'aspectFill'
 		},
-		// 是否加载中
+		/**
+		 * @description 是否加载中
+		 * @default false
+		 */
 		loading: {
 			type: Boolean,
 			default: false

package/components/fu-switch/fu-switch.vue

@@ -1,7 +1,12 @@
 <template>
-	<view class="fu-switch" :class="[innerValue? 'fu-switch__on': '', disabled? 'fu-switch__disabled': '', `fu-switch__${shape}`]" :style="[switchStyle]" @tap="click">
+	<view class="fu-switch" :class="[innerValue? 'fu-switch__on': '', disabled? 'fu-switch__disabled': '', `fu-switch__${shape}`]" :style="[switchStyle]" @tap="handleClick">
 		<view class="fu-switch__node" :class="[`fu-switch__node__${shape}`]" :style="[switchNodeStyle]">
-			<fu-loading class="fu-switch__node__loading" :show="loading" mode="circle" :size="size * 0.6" :color="loadingColor"></fu-loading>
+			<fu-loading 
+				:show="loading" 
+				mode="circle" 
+				:size="size * 0.6" 
+				:color="innerValue? activeColor: '#a8a9ab'">
+			</fu-loading>
 		</view>
 
 		<!-- 左图标 -->
@@ -19,19 +24,22 @@
 	 * Switch 开关选择器
 	 * @description 此组件选择开关一般用于只有两个选择，且只能选其一的场景。
 	 * @property {Boolean,String,Number} value	通过v-model双向绑定的值 （默认 false ）
-	 * @property {String} shape = [circle|square] circle 圆角 square 方形  (默认 circle)
+	 * @property {String} shape = [circle|square] 设置形状（默认 'circle'）
+	 * 	@value circle 圆角
+	 * 	@value square 方形
 	 * @property {Boolean} disabled = [true|false] 是否禁用（默认 false）
 	 * @property {String,Number} size 尺寸（默认 20）
-	 * @property {String} activeColor 打开时的背景颜色
-	 * @property {String} inactiveColor 关闭时的背景颜色
+	 * @property {String} activeColor 打开时的背景颜色（默认 '#2979ff'）
+	 * @property {String} inactiveColor 关闭时的背景颜色（默认 '#d6d6d6'）
 	 * @property {Number,String,Boolean} activeValue 激活时的值 (默认 true)
 	 * @property {Number,String,Boolean} inactiveValue 关闭时的值（默认false）
 	 * @property {String} leftIcon 左图标
 	 * @property {String} rightIcon 右图标
 	 * @property {Boolean} loading = [true|false] 是否为加载状态
 	 * @property {Boolean} vibrateShort = [true|false] 点击手机是否震动（默认 false）
+	 * 
 	 * @event {Function} change 在switch打开或关闭时触发
-	 * @example <fu-switch v-model="checked" activeColor="red" inactiveColor="#eeeeee" />
+	 * @example <fu-switch v-model="checked"></fu-switch>
 	 */
 	export default {
 		name: 'FuSwitch',
@@ -46,10 +54,13 @@
 			this.innerValue = this.value || this.modelValue;
 		},
 		computed: {
+			isActive() {
+				return this.innerValue === this.activeValue;
+			},
 			switchStyle() {
 				let style = {};
 				style.fontSize = this.$fu.addUnit(this.size);
-				style.backgroundColor = this.innerValue? this.activeColor? this.activeColor: '#2979ff' : this.inactiveColor? this.inactiveColor : '#d6d6d6';
+				style.backgroundColor = this.isActive? this.activeColor: this.inactiveColor;
 				return style
 			},
 
@@ -65,16 +76,13 @@
 				style.fontSize = this.$fu.addUnit(this.size - 20)
 				style.lineHeight = this.$fu.addUnit(this.size)
 				return style
-			},
-			loadingColor() {
-				return this.innerValue ? this.activeColor || '#2979ff' : ''
 			}
 		},
 		methods: {
-			click() {
+			handleClick() {
 				if (!this.disabled && !this.loading) {
 					if (this.vibrateShort) uni.vibrateShort()
-					const oldVal = this.innerValue? this.activeValue : this.inactiveValue;
+					const oldVal = this.isActive? this.inactiveValue: this.activeValue;
 					this.$emit('input', oldVal)
 					this.$emit('update:modelValue', oldVal)
 					// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的

package/components/fu-switch/props.js

@@ -1,5 +1,8 @@
 export default {
 	props: {
+		/**
+		 * @description value / v-model 绑定的值
+		 */
 		value: {
 			type: [Boolean,String,Number],
 			default: false
@@ -8,57 +11,89 @@ export default {
 			type: [Boolean,String,Number],
 			default: false
 		},
-		// circle 圆角 square 方形
+		/**
+		 * @description 设置形状
+		 * @values 'circle' - 圆角, 'square' - 方形
+		 * @default 'circle'
+		 */
 		shape: {
 		  type: String,
 		  default: 'circle'
 		},
-		// 是否禁用
+		/**
+		 * @description 是否禁用
+		 * @default false
+		 */
 		disabled: {
 		  type: Boolean,
 		  default: false
 		},
-		// 尺寸
+		/**
+		 * @description 设置尺寸
+		 * @default 20
+		 */
 		size: {
 		  type: [String,Number],
 		  default: 20
 		},
-		// 打开时的背景颜色
+		/**
+		 * @description 打开时的背景颜色
+		 * @default '#2979ff'
+		 */
 		activeColor: {
 		  type: String,
-		  default: ''
+		  default: '#2979ff'
 		},
-		// 关闭时的背景颜色
+		/**
+		 * @description 关闭时的背景颜色
+		 * @default '#d6d6d6'
+		 */
 		inactiveColor: {
 		  type: String,
-		  default: ''
+		  default: '#d6d6d6'
 		},
-		// 激活时的值
+		/**
+		 * @description 激活时的值
+		 * @default true
+		 */
 		activeValue: {
 		  type: [Number,String,Boolean],
 		  default: true
 		},
-		// 关闭时的值
+		/**
+		 * @description 关闭时的值
+		 * @default false
+		 */
 		inactiveValue: {
 		  type: [Number,String,Boolean],
 		  default: false
 		},
-		// 左图标
+		/**
+		 * @description 左图标
+		 */
 		leftIcon: {
 		  type: String,
 		  default: ''
 		},
-		// 右图标
+		/**
+		 * @description 右图标
+		 */
 		rightIcon: {
 		  type: String,
 		  default: ''
 		},
-		// 是否为加载状态
+		/**
+		 * @description 是否为加载状态
+		 * @default false
+		 */
 		loading: {
 		  type: Boolean,
 		  default: false
 		},
-		// 点击手机是否震动
+		/**
+		 * @description 点击手机是否震动
+		 * @default false
+		 */
 		vibrateShort: {
 		  type: Boolean,
 		  default: false

package/components/fu-tabs/fu-tabs.vue

@@ -6,7 +6,7 @@
 				<scroll-view ref="fu-tabs__wrapper__scroll-view" class="fu-tabs__wrapper__scroll-view" :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation :show-scrollbar="false">
 					<view ref="fu-tabs__wrapper__nav" class="fu-tabs__wrapper__nav" :style="{flex: scrollable ? '' : 1}">
 						<view :ref="`fu-tabs__wrapper__nav__item-${index}`" class="fu-tabs__wrapper__nav__item" :class="[`fu-tabs__wrapper__nav__item-${index}`, item.disabled && 'fu-tabs__wrapper__nav__item--disabled']"
-							:style="[{flex: scrollable ? '' : 1, padding}, itemStyle]" v-for="(item, index) in list" :key="index" @tap="clickHandler(item, index)">
+							:style="[{flex: scrollable ? '' : 1, padding}, itemStyle]" v-for="(item, index) in list" :key="index" @tap="handleClick(item, index)">
 							<text class="fu-tabs__wrapper__nav__item__text" :class="[item.disabled && 'fu-tabs__wrapper__nav__item__text--disabled']" :style="[textStyle(index)]">{{ item[keyName] }}</text>
 							
 							<!-- 徽标 -->
@@ -27,27 +27,7 @@
 								v-if="!!(item.badge && (item.badge.isDot || item.badge.value))">
 							</fu-badge>
 						</view>
-						<!-- #ifdef APP-NVUE -->
-						<view ref="fu-tabs__wrapper__nav__line" class="fu-tabs__wrapper__nav__line"
-							:style="[{
-								width:`${lineWidth}px`,
-								height: firstTime? 0: `${lineHeight}px`,
-								background: lineColor,
-								backgroundSize: lineBgSize
-							}]">
-						<!-- #endif -->
-						<!-- #ifndef APP-NVUE -->
-						<view ref="fu-tabs__wrapper__nav__line" class="fu-tabs__wrapper__nav__line"
-							:style="[{
-								width: `${lineWidth}px`,
-								transform: `translate(${lineOffsetLeft}px)`,
-								transitionDuration: `${firstTime? 0 : duration}ms`,
-								height: firstTime? 0: `${lineHeight}px`,
-								background: lineColor,
-								backgroundSize: lineBgSize,
-							}]">
-						<!-- #endif -->
-						</view>
+						<view ref="fu-tabs__wrapper__nav__line" class="fu-tabs__wrapper__nav__line" :style="[lineStyle]"></view>
 					</view>
 				</scroll-view>
 			</view>
@@ -67,7 +47,7 @@
 	// #endif
 	/**
 	 * Tabs 标签
-	 * @description t此组件在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
+	 * @description 此组件在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
 	 * @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]
 	 * @property {String,Number} duration 滑块移动一次所需的时间，单位秒（默认 300 ）
 	 * @property {String,Object} activeStyle 菜单选择中时的样式（默认{ color: '#303133' }）
@@ -81,14 +61,15 @@
 	 * @property {String} scrollable = [true|false]	菜单是否可滚动，选项很少的时候设置为false整个tabs自动居中显示（默认：true）
 	 * @property {String,Number} current 当前选中标签的索引（默认 0 ）
 	 * @property {String} keyName 从list元素对象中读取的键名（默认 'name' ）
-	 * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
-	 * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
+	 * 
+	 * @event {Function} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
+	 * @event {Function} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
 	 * @example <fu-tabs :list="list" :current="current" @change="change"></fu-tabs>
 	 */
 	export default {
 		name: 'FuTabs',
-		emits: ['click','change'],
 		mixins: [mpMixin, props],
+		emits: ['click','change'],
 		data() {
 			return {
 				firstTime: true,
@@ -117,6 +98,21 @@
 			},
 			propsBadge() {
 				return fuBadgeProps
+			},
+			lineStyle() {
+				let style = {
+					width: `${this.lineWidth}px`,
+					height: this.firstTime? 0: `${this.lineHeight}px`,
+					background: this.lineColor,
+					backgroundSize: this.lineBgSize,
+				};
+
+				// #ifndef APP-NVUE
+				style.transform = `translate(${this.lineOffsetLeft}px)`;
+				style.transitionDuration = `${this.firstTime? 0 : this.duration}ms`;
+				// #endif
+				
+				return style
 			}
 		},
 		async mounted() {
@@ -133,7 +129,7 @@
 				// 获取下划线的数值px表示法
 				let lineWidth = this.$fu.getPx(this.lineWidth);
 				// 如果传的值未带单位+设置了全局单位，则带上单位计算，这样才没有误差
-				if (this.$fu.number(this.lineWidth) && 'px') {
+				if (this.$fu.checkNumber(this.lineWidth) && 'px') {
 					lineWidth = this.$fu.getPx(`${this.lineWidth}px`);
 				}
 				this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2;
@@ -149,6 +145,7 @@
 					}, 20);
 				}
 			},
+			
 			// nvue下设置滑块的位置
 			animation(x, duration = 0) {
 				// #ifdef APP-NVUE
@@ -161,8 +158,9 @@
 				})
 				// #endif
 			},
+			
 			// 点击某一个标签
-			clickHandler(item, index) {
+			handleClick(item, index) {
 				// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
 				this.$emit('click', {
 					...item,
@@ -191,11 +189,13 @@
 				})
 				// #endif
 			},
+			
 			init() {
 				this.$fu.sleep().then(() => {
 					this.resize()
 				})
 			},
+			
 			setScrollLeft() {
 				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
 				const tabRect = this.list[this.innerCurrent];
@@ -211,6 +211,7 @@
 				scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width);
 				this.scrollLeft = Math.max(0, scrollLeft);
 			},
+			
 			// 获取所有标签的尺寸
 			resize() {
 				// 如果不存在list，则不处理
@@ -231,12 +232,14 @@
 					this.setScrollLeft()
 				})
 			},
+			
 			// 获取导航菜单的尺寸
 			getTabsRect() {
 				return new Promise(resolve => {
 					this.queryRect('fu-tabs__wrapper__scroll-view').then(size => resolve(size))
 				})
 			},
+			
 			// 获取所有标签的尺寸
 			getAllItemRect() {
 				return new Promise(resolve => {
@@ -244,6 +247,7 @@
 					Promise.all(promiseAllArr).then(sizes => resolve(sizes))
 				})
 			},
+			
 			// 获取各个标签的尺寸
 			queryRect(el, item) {
 				// #ifndef APP-NVUE
@@ -289,13 +293,13 @@
 	}
 </script>
 <style lang="scss" scoped>
-	@import '../../libs/css/color.scss';
+	@import '../../libs/style/components.scss';
+	@import '../../libs/style/color.scss';
 	
 	.fu-tabs {
 
 		&__wrapper {
-			display: flex;
-			flex-direction: row;
+			@include flex(row);
 			align-items: center;
 
 			&__scroll-view-wrapper {
@@ -306,8 +310,7 @@
 			}
 
 			&__scroll-view {
-				display: flex;
-				flex-direction: row;
+				@include flex(row);
 				flex: 1;
 			}
 

package/components/fu-tabs/props.js

@@ -1,50 +1,72 @@
 export default {
 	props: {
-		// 滑块的移动过渡时间，单位ms
+		/**
+		 * @description 滑块的移动过渡时间，单位ms
+		 * @default 300
+		 */
 		duration: {
 			type: Number,
 			default: 300
 		},
-		// tabs标签数组
+		/**
+		 * @description tabs标签数组
+		 */
 		list: {
 			type: Array,
 			default: () => []
 		},
-		// 滑块颜色
+		/**
+		 * @description 滑块颜色
+		 */
 		lineColor: {
 			type: String,
 			default: ''
 		},
-		// 菜单选择中时的样式
+		/**
+		 * @description 菜单选择中时的样式
+		 */
 		activeStyle: {
 			type: [String,Object],
 			default: () => ({
 				color: '#303133'
 			})
 		},
-		// 菜单非选中时的样式
+		/**
+		 * @description 菜单非选中时的样式
+		 */
 		inactiveStyle: {
 			type: [String, Object],
 			default: () => ({
 				color: '#606266'
 			})
 		},
-		// 滑块长度
+		/**
+		 * @description 滑块长度
+		 * @default 20
+		 */
 		lineWidth: {
 			type: [String,Number],
 			default: 20
 		},
-		// 滑块高度
+		/**
+		 * @description 滑块高度
+		 * @default 3
+		 */
 		lineHeight: {
 			type: [String,Number],
 			default: 3
 		},
-		// 滑块背景显示大小，当滑块背景设置为图片时使用
+		/**
+		 * @description 滑块背景显示大小，当滑块背景设置为图片时使用
+		 * @default 'cover'
+		 */
 		lineBgSize: {
 			type: String,
 			default: 'cover'
 		},
-		// 菜单item的样式
+		/**
+		 * @description 菜单item的样式
+		 */
 		itemStyle: {
 			type: [String, Object],
 			default: () => ({
@@ -52,22 +74,33 @@ export default {
 				padding: '0 15px'
 			})
 		},
-		// 菜单是否可滚动
+		/**
+		 * @description 菜单是否可滚动
+		 * @default true
+		 */
 		scrollable: {
 			type: Boolean,
 			default: true
 		},
-		// 当前选中标签的索引
+		/**
+		 * @description 当前选中标签的索引
+		 */
 		current: {
 			type: [String,Number],
 			default: 0
 		},
-		// 默认读取的键名
+		/**
+		 * @description 默认读取的键名
+		 * @default 'name'
+		 */
 		keyName: {
 			type: String,
 			default: 'name'
 		},
-		// 各个元素的内边距可在itemStyle设置
+		/**
+		 * @description 各个元素的内边距可在itemStyle设置
+		 * @default '0 15px'
+		 */
 		padding: {
 			type: String,
 			default: '0 15px'