fusions-ui 1.2.3 → 1.2.6

package/components/fu-swipe-action-item/fu-swipe-action-item.vue

@@ -3,105 +3,129 @@
 	<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
 	<view class="fu-swipe">
 		<!--  #ifdef MP-WEIXIN || VUE3 -->
-		<view class="fu-swipe_box" :change:prop="wxsswipe.showWatch" :prop="is_show" :data-threshold="threshold"
-			:data-disabled="disabled" @touchstart="wxsswipe.touchstart" @touchmove="wxsswipe.touchmove"
+		<view 
+			class="fu-swipe_box" 
+			:change:prop="wxsswipe.showWatch" 
+			:prop="is_show" 
+			:data-threshold="threshold"
+			:data-disabled="disabled" 
+			@touchstart="wxsswipe.touchstart" 
+			@touchmove="wxsswipe.touchmove"
 			@touchend="wxsswipe.touchend">
-			<!-- #endif -->
-			<!--  #ifndef MP-WEIXIN || VUE3 -->
-			<view class="fu-swipe_box" :change:prop="renderswipe.showWatch" :prop="is_show" :data-threshold="threshold"
-				:data-disabled="disabled+''" @touchstart="renderswipe.touchstart" @touchmove="renderswipe.touchmove"
-				@touchend="renderswipe.touchend">
-				<!-- #endif -->
-				<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
-				<view class="fu-swipe_button-group button-group--left">
-					<slot name="left">
-						<view v-for="(item,index) in leftOptions" :key="index" :style="{
-					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
-					}" class="fu-swipe_button button-hock" @touchstart="appTouchStart"
-							@touchend="appTouchEnd($event,index,item,'left')"
-							@click.stop="onClickForPC(index,item,'left')">
-							<text class="fu-swipe_button-text"
-								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
-						</view>
-					</slot>
-				</view>
-				<view class="fu-swipe_text--center">
-					<slot></slot>
-				</view>
-				<view class="fu-swipe_button-group button-group--right">
-					<slot name="right">
-						<view v-for="(item,index) in rightOptions" :key="index" :style="{
-					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
-					}" class="fu-swipe_button button-hock" @touchstart="appTouchStart"
-							@touchend="appTouchEnd($event,index,item,'right')"
-							@click.stop="onClickForPC(index,item,'right')"><text class="fu-swipe_button-text"
-								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
-						</view>
-					</slot>
-				</view>
-			</view>
-		</view>
 		<!-- #endif -->
-		<!-- app nvue端 使用 bindingx -->
-		<!-- #ifdef APP-NVUE -->
-		<view ref="selector-box--hock" class="fu-swipe" @horizontalpan="touchstart" @touchend="touchend">
-			<view ref='selector-left-button--hock' class="fu-swipe_button-group button-group--left">
+		<!--  #ifndef MP-WEIXIN || VUE3 -->
+		<view 
+			class="fu-swipe_box" 
+			:change:prop="renderswipe.showWatch" 
+			:prop="is_show" 
+			:data-threshold="threshold"
+			:data-disabled="disabled + ''" 
+			@touchstart="renderswipe.touchstart" 
+			@touchmove="renderswipe.touchmove"
+			@touchend="renderswipe.touchend">
+		<!-- #endif -->
+			<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
+			<view class="fu-swipe_button-group button-group--left">
 				<slot name="left">
-					<view v-for="(item,index) in leftOptions" :key="index" :style="{
-				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
-				}" class="fu-swipe_button button-hock" @click.stop="onClick(index,item,'left')"><text
-							class="fu-swipe_button-text"
-							:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF', fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
+					<view 
+						class="fu-swipe_button button-hock" 
+						:style="{backgroundColor: item.style && item.style.backgroundColor? item.style.backgroundColor: '#C7C6CD'}" 
+						v-for="(item,index) in leftOptions" :key="index"
+						@touchstart="appTouchStart"
+						@touchend="appTouchEnd($event,index,item,'left')"
+						@click.stop="handleClickForPC(index,item,'left')">
+						<text class="fu-swipe_button-text" :style="{color: item.style && item.style.color? item.style.color: '#FFFFFF', fontSize: item.style && item.style.fontSize? item.style.fontSize: '16px'}">{{ item.text }}</text>
 					</view>
 				</slot>
 			</view>
-			<view ref='selector-right-button--hock' class="fu-swipe_button-group button-group--right">
+			<view class="fu-swipe_text--center">
+				<slot></slot>
+			</view>
+			<view class="fu-swipe_button-group button-group--right">
 				<slot name="right">
-					<view v-for="(item,index) in rightOptions" :key="index" :style="{
-				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
-				}" class="fu-swipe_button button-hock" @click.stop="onClick(index,item,'right')"><text
-							class="fu-swipe_button-text"
-							:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
+					<view 
+						class="fu-swipe_button button-hock"
+						:style="{backgroundColor: item.style && item.style.backgroundColor? item.style.backgroundColor: '#C7C6CD'}" 
+						v-for="(item,index) in rightOptions" :key="index"
+						@touchstart="appTouchStart"
+						@touchend="appTouchEnd($event,index,item,'right')"
+						@click.stop="handleClickForPC(index,item,'right')">
+						<text class="fu-swipe_button-text" :style="{color: item.style && item.style.color? item.style.color: '#FFFFFF', fontSize: item.style && item.style.fontSize? item.style.fontSize: '16px'}">{{ item.text }}</text>
 					</view>
 				</slot>
 			</view>
-			<view ref='selector-content--hock' class="fu-swipe_box">
-				<slot></slot>
-			</view>
 		</view>
-		<!-- #endif -->
-		<!-- 其他平台使用 js ，长列表性能可能会有影响-->
-		<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
-		<view class="fu-swipe">
-			<view class="fu-swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
-				:style="{transform:moveLeft}" :class="{ani:ani}">
-				<view class="fu-swipe_button-group button-group--left" :class="[elClass]">
-					<slot name="left">
-						<view v-for="(item,index) in leftOptions" :key="index" :style="{
-					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
-					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
-					}" class="fu-swipe_button button-hock" @touchstart="appTouchStart"
-							@touchend="appTouchEnd($event,index,item,'left')"><text class="fu-swipe_button-text"
-								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
-						</view>
-					</slot>
+	</view>
+	<!-- #endif -->
+	<!-- app nvue端 使用 bindingx -->
+	<!-- #ifdef APP-NVUE -->
+	<view ref="selector-box--hock" class="fu-swipe" @horizontalpan="touchstart" @touchend="touchend">
+		<view ref='selector-left-button--hock' class="fu-swipe_button-group button-group--left">
+			<slot name="left">
+				<view 
+					class="fu-swipe_button button-hock" 
+					:style="{backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'}" 
+					v-for="(item,index) in leftOptions" :key="index"
+					@click.stop="handleClick(index,item,'left')">
+					<text class="fu-swipe_button-text" :style="{color: item.style && item.style.color? item.style.color: '#FFFFFF', fontSize: item.style && item.style.fontSize? item.style.fontSize: '16px'}">{{ item.text }}</text>
 				</view>
-				<slot></slot>
-				<view class="fu-swipe_button-group button-group--right" :class="[elClass]">
-					<slot name="right">
-						<view v-for="(item,index) in rightOptions" :key="index" :style="{
-					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
-					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
-					}" @touchstart="appTouchStart" @touchend="appTouchEnd($event,index,item,'right')"
-							class="fu-swipe_button button-hock"><text class="fu-swipe_button-text"
-								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
-						</view>
-					</slot>
+			</slot>
+		</view>
+		<view ref='selector-right-button--hock' class="fu-swipe_button-group button-group--right">
+			<slot name="right">
+				<view 
+					class="fu-swipe_button button-hock" 
+					:style="{backgroundColor: item.style && item.style.backgroundColor ?item.style.backgroundColor : '#C7C6CD'}" 
+					v-for="(item,index) in rightOptions" :key="index"
+					@click.stop="handleClick(index,item,'right')">
+					<text class="fu-swipe_button-text" :style="{color: item.style && item.style.color? item.style.color: '#FFFFFF', fontSize: item.style && item.style.fontSize? item.style.fontSize: '16px'}">{{ item.text }}</text>
 				</view>
+			</slot>
+		</view>
+		<view ref='selector-content--hock' class="fu-swipe_box">
+			<slot></slot>
+		</view>
+	</view>
+	<!-- #endif -->
+	
+	<!-- 其他平台使用 js ，长列表性能可能会有影响-->
+	<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
+	<view class="fu-swipe">
+		<view 
+			class="fu-swipe_box" 
+			:class="{ani:ani}"
+			:style="{transform:moveLeft}" 
+			@touchstart="touchstart" 
+			@touchmove="touchmove" 
+			@touchend="touchend">
+			<view class="fu-swipe_button-group button-group--left" :class="[elClass]">
+				<slot name="left">
+					<view 
+						class="fu-swipe_button button-hock" 
+						:style="{ backgroundColor: item.style && item.style.backgroundColor? item.style.backgroundColor: '#C7C6CD', fontSize: item.style && item.style.fontSize? item.style.fontSize: '16px'}" 
+						v-for="(item,index) in leftOptions" :key="index"
+						@touchstart="appTouchStart"
+						@touchend="appTouchEnd($event,index,item,'left')">
+						<text class="fu-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF'}">{{ item.text }}</text>
+					</view>
+				</slot>
+			</view>
+			<slot></slot>
+			<view class="fu-swipe_button-group button-group--right" :class="[elClass]">
+				<slot name="right">
+					<view 
+						class="fu-swipe_button button-hock" 
+						:style="{backgroundColor: item.style && item.style.backgroundColor? item.style.backgroundColor: '#C7C6CD', fontSize: item.style && item.style.fontSize? item.style.fontSize: '16px'}" 
+						v-for="(item,index) in rightOptions" :key="index" 
+						@touchstart="appTouchStart" 
+						@touchend="appTouchEnd($event,index,item,'right')">
+						<text class="fu-swipe_button-text" :style="{color: item.style && item.style.color? item.style.color: '#FFFFFF'}">{{ item.text }}</text>
+					</view>
+				</slot>
 			</view>
 		</view>
-		<!-- #endif -->
-
+	</view>
+	<!-- #endif -->
 </template>
 
 <script src="./wx.wxs" module="wxsswipe" lang="wxs"></script>
@@ -150,19 +174,6 @@
 		name:"FuSwipeActionItem",
 		mixins: [mpMixin, mpwxs, bindingx, mpother, props],
 		emits: ['click', 'change'],
-		// #ifndef VUE3
-		destroyed() {
-			if (this.__isUnmounted) return
-			this.uninstall()
-		},
-		// #endif
-		// #ifdef VUE3
-		unmounted() {
-			this.__isUnmounted = true
-			this.uninstall()
-		},
-		// #endif
-
 		methods: {
 			uninstall() {
 				if (this.swipeaction) {
@@ -186,10 +197,24 @@
 				}
 				return parent;
 			}
+		},
+		// #ifndef VUE3
+		destroyed() {
+			if (this.__isUnmounted) return
+			this.uninstall()
+		},
+		// #endif
+		// #ifdef VUE3
+		unmounted() {
+			this.__isUnmounted = true
+			this.uninstall()
 		}
+		// #endif
 	}
 </script>
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	
 	.fu-swipe {
 		position: relative;
 		/* #ifndef APP-NVUE */
@@ -198,18 +223,14 @@
 	}
 
 	.fu-swipe_box {
+		@include flex;
 		/* #ifndef APP-NVUE */
-		display: flex;
-		flex-shrink: 0;
-		// touch-action: none;
+		flex: 0 0 auto;
+		touch-action: none;
 		/* #endif */
 		position: relative;
 	}
 
-	.fu-swipe_content {
-		// border: 1px red solid;
-	}
-
 	.fu-swipe_text--center {
 		width: 100%;
 		/* #ifndef APP-NVUE */
@@ -218,11 +239,10 @@
 	}
 
 	.fu-swipe_button-group {
+		@include flex(row);
 		/* #ifndef APP-NVUE */
 		box-sizing: border-box;
-		display: flex;
 		/* #endif */
-		flex-direction: row;
 		position: absolute;
 		top: 0;
 		bottom: 0;
@@ -245,10 +265,7 @@
 		/* #ifdef APP-NVUE */
 		flex: 1;
 		/* #endif */
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
+		@include flex(row);
 		justify-content: center;
 		align-items: center;
 		padding: 0 20px;
@@ -256,7 +273,7 @@
 
 	.fu-swipe_button-text {
 		/* #ifndef APP-NVUE */
-		flex-shrink: 0;
+		flex: 0 0 auto;
 		/* #endif */
 		font-size: 14px;
 	}
@@ -274,8 +291,8 @@
 	}
 
 	.movable-view {
-		display: flex;
-		/* justify-content: center; */
+		@include flex;
+		justify-content: center;
 		position: relative;
 		flex: 1;
 		height: 45px;
@@ -283,26 +300,20 @@
 	}
 
 	.movable-view-button {
-		display: flex;
+		@include flex(row);
 		/* #ifndef APP-NVUE */
-		flex-shrink: 0;
+		flex: 0 0 auto;
 		/* #endif */
-		flex-direction: row;
 		height: 100%;
 		background: #C0C0C0;
 	}
 
-	/* .transition {
-		transition: all 0.3s;
-	} */
-
 	.movable-view-box {
 		/* #ifndef APP-NVUE */
-		flex-shrink: 0;
+		flex: 0 0 auto;
 		/* #endif */
 		height: 100%;
-		background-color: #fff;
+		background-color: #ffffff;
 	}
-
 	/* #endif */
 </style>

package/components/fu-swipe-action-item/mpwxs.js

@@ -67,7 +67,7 @@ mpMixins = {
 				})
 			}
 		},
-		onClickForPC(index, item, position) {
+		handleClickForPC(index, item, position) {
 			if (!is_pc) return
 			// #ifdef H5
 			this.$emit('click', {

package/components/fu-swipe-action-item/props.js

@@ -1,33 +1,49 @@
 export default {
 	props: {
-		// 控制开关
+		/**
+		 * @description 控制开关
+		 * @default 'none'
+		 */
 		show: {
 			type: String,
 			default: 'none'
 		},
-		// 禁用
+		/**
+		 * @description 是否禁用
+		 * @default false
+		 */
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		// 是否自动关闭
+		/**
+		 * @description 是否自动关闭
+		 * @default true
+		 */
 		autoClose: {
 			type: Boolean,
 			default: true
 		},
-		// 滑动缺省距离
+		/**
+		 * @description 滑动缺省距离
+		 * @default 20
+		 */
 		threshold: {
 			type: Number,
 			default: 20
 		},
-		// 左侧按钮内容
+		/**
+		 * @description 左侧按钮内容
+		 */
 		leftOptions: {
 			type: Array,
 			default () {
 				return []
 			}
 		},
-		// 右侧按钮内容
+		/**
+		 * @description 右侧按钮内容
+		 */
 		rightOptions: {
 			type: Array,
 			default () {

package/components/fu-swiper/fu-swiper.vue

@@ -100,7 +100,7 @@
 	 * @property {Array} list 轮播图列表数据
 	 * @property {String,Number} radius 圆角的值 (默认 5)
 	 * @property {Number} current 初始化时，默认显示第几项
-	 * @property {String,Number} height 高度 (默认 125)
+	 * @property {String,Number} height 高度 (默认 160)
 	 * @property {String} bgColor 背景色 (默认 #f2f3f4)
 	 * @property {String} keyName 图片的属性名 (默认 image)
 	 * @property {Boolean} showTitle = [true|false] 是否显示标题（默认 false）
@@ -127,8 +127,10 @@
 	 * @property {Boolean} circular = [true|false] 是否衔接滑动 (默认 true)
 	 * @property {String} imgMode 图片裁剪模式
 	 * @property {Boolean} loading 是否加载中（默认 false）
+	 * 
 	 * @event {Function} click 点击轮播图时触发
 	 * @event {Function} change 轮播图切换时触发
+	 * @example <fu-swiper :list="list"></fu-swiper>
 	 */
 	export default {
 		name: 'FuSwiper',
@@ -143,45 +145,39 @@
 		computed: {
 			indicatorStyle() {
 				let style = {}
-				if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent =
-					'flex-start'
-				if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style
-					.justifyContent = 'center'
-				if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style
-					.justifyContent = 'flex-end'
+				if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
+				if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent = 'center'
+				if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent = 'flex-end'
 				if (['topLeft', 'topCenter', 'topRight'].indexOf(this.indicatorPosition) >= 0) {
-					style.top = '12rpx'
-					style.bottom = 'auto'
+					style.top = '12rpx';
+					style.bottom = 'auto';
 				} else {
-					style.top = 'auto'
-					style.bottom = '12rpx'
+					style.top = 'auto';
+					style.bottom = '12rpx';
 				}
-				style.padding = `0 ${this.effect3D ? '74rpx' : '24rpx'}`
+				style.padding = `0 ${this.effect3D? '74rpx': '24rpx'}`;
 
 				return style
 			},
 			swiperTitleStyle() {
 				let style = {}
 				if (this.mode === 'none' || this.mode === '') style.paddingBottom = '12rpx'
-				if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode ===
-					'number') {
-					style.paddingBottom = '60rpx'
-				} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPosition) >= 0 && this
-					.mode !== 'number') {
-					style.paddingBottom = '40rpx'
+				if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode === 'number') {
+					style.paddingBottom = '60rpx';
+				} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode !== 'number') {
+					style.paddingBottom = '40rpx';
 				} else {
-					style.paddingBottom = '12rpx'
+					style.paddingBottom = '12rpx';
 				}
 
-				style = Object.assign(style, this.titleStyle)
-				return style
+				return Object.assign(style, this.titleStyle)
 			}
 		},
 		methods: {
 			getItemType(e) {
 				if (typeof e === 'string') return this.$fu.isVideo(this.getSource(e)) ? 'video' : 'image'
 				if (typeof e === 'object' && this.keyName) {
-					if (!e.type) return this.$fu.isVideo(this.getSource(e)) ? 'video' : 'image'
+					if (!e.type) return this.$fu.isVideo(this.getSource(e))? 'video': 'image'
 					if (e.type === 'image') return 'image'
 					if (e.type === 'video') return 'video'
 					return 'image'
@@ -236,15 +232,17 @@
 </script>
 
 <style lang="scss" scoped>
-	@import "../../libs/css/component.scss";
+	@import "../../libs/style/components.scss";
 
 	.fu-swiper {
 		@include flex;
 		justify-content: center;
 		align-items: center;
 		position: relative;
-		overflow: hidden;
 		transform: translateY(0);
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
 
 		&__wrap {
 			flex: 1;
@@ -256,7 +254,9 @@
 			&__wrap {
 				@include flex;
 				position: relative;
+				/* #ifndef APP-NVUE */
 				overflow: hidden;
+				/* #endif */
 				transition: transform 0.3s;
 				flex: 1;
 			
@@ -273,7 +273,9 @@
 						height: 100%;
 						flex: 1;
 						transition: all 0.5s;
+						/* #ifndef APP-NVUE */
 						overflow: hidden;
+						/* #endif */
 						box-sizing: content-box;
 						position: relative;
 					}