uview-ultra-plus 1.0.0

package/uview-ultra/components/up-swipe-action-item/up-swipe-action-item.uvue

@@ -0,0 +1,382 @@
+<template>	
+	<view class="up-swipe-action-item" ref="up-swipe-action-item">
+		<view class="up-swipe-action-item__right">
+			<slot name="button">
+				<view v-for="(item,index) in options as UPSwipeActionItemOption[]" :key="index" class="up-swipe-action-item__right__button"
+					:ref="`up-swipe-action-item__right__button-${index}`" :style="[{
+						alignItems: item.style != null && item.style.borderRadius != null ? 'center' : 'stretch'
+					}]" @tap="buttonClickHandler(item, index)">
+					<view class="up-swipe-action-item__right__button__wrapper" :style="[{
+							backgroundColor: item.style != null && item.style.backgroundColor != null ? item.style.backgroundColor : '#C7C6CD',
+							borderRadius: item.style != null && item.style.borderRadius != null ? item.style.borderRadius : '0',
+							padding: item.style != null && item.style.borderRadius != null ? '0' : '0 15px',
+						}, item.style]">
+						<up-icon v-if="item.icon" :name="item.icon"
+							:color="item.style != null && item.style.color != null ? item.style.color : '#ffffff'"
+							:size="item.iconSize != null ? addUnit(item.iconSize.toString()) : item.style != null && item.style.fontSize != null ? parseFloat(getPx(item.style.fontSize.toString())) * 1.2 : 17"
+							:customStyle="{
+								marginRight: item.text != null ? '2px' : 0
+							}"></up-icon>
+						<text v-if="item.text" class="up-swipe-action-item__right__button__wrapper__text up-line-1"
+							:style="[{
+								color: item.style != null && item.style.color != null ? item.style.color : '#ffffff',
+								fontSize: item.style != null && item.style.fontSize != null ? item.style.fontSize : '16px',
+								lineHeight: item.style != null && item.style.fontSize != null ? item.style.fontSize : '16px',
+							}]">{{ item.text }}</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<view class="up-swipe-action-item__content" @click="clickHandler" @touchstart="touchstart" @touchmove="touchmove"
+			@touchend="touchend" :style="sliderStyle">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+<script>
+	import { UPSwipeActionItemOption } from './types'
+	import { touchMixin } from '../../libs/mixin/touch'
+	import { propsSwipeActionItem } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, getPx, sleep } from '../../libs/function/index';
+	// import other from './other';
+
+	/**
+	 * SwipeActionItem 滑动单元格子组件
+	 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
+	 * @tutorial https://uview-plus.jiangruyi.com/components/swipeAction.html
+	 * @property {Boolean}			show			控制打开或者关闭（默认 false ）
+	 * @property {String | Number}	index			标识符，如果是v-for，可用index索引
+	 * @property {Boolean}			disabled		是否禁用（默认 false ）
+	 * @property {Boolean}			autoClose		是否自动关闭其他swipe按钮组（默认 true ）
+	 * @property {Number}			threshold		滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
+	 * @property {Array}			options			右侧按钮内容
+	 * @property {String | Number}	duration		动画过渡时间，单位ms（默认 350 ）
+	 * @event {Function(index)}	open	组件打开时触发
+	 * @event {Function(index)}	close	组件关闭时触发
+	 * @example	<up-swipe-action><up-swipe-action-item :options="options1" ></up-swipe-action-item></up-swipe-action>
+	 */
+	export default {
+		name: 'up-swipe-action-item',
+		emits: ['click', 'update:show'],
+		mixins: [
+			mpMixin,
+			mixin,
+			// #ifndef APP-NVUE
+			touchMixin,
+			// #endif
+			propsSwipeActionItem
+		],
+		data() {
+			return {
+				// 按钮的尺寸信息
+				size: {},
+				// 父组件up-swipe-action的参数
+				parentData: {
+					autoClose: true,
+				},
+				// 当前状态，open-打开，close-关闭
+				status: '',
+				sliderStyle: {},
+				state: {
+					moving: false,
+					startX: 0,
+					startY: 0,
+					buttonsWidth: 0
+				}
+			}
+		},
+		watch: {
+			// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
+			// #ifndef APP-NVUE
+			// wxsInit(newValue, oldValue) {
+			// 	this.queryRect()
+			// },
+			// #endif
+			status(newValue) {
+				
+			},
+			show(newValue) {
+				if (newValue) {
+					this.status = 'open'
+				} else {
+					this.status = 'close'
+				}
+			},
+			status(newValue: string) {
+				if (newValue === 'open') {
+					this.$emit('update:show', true)
+					if (this.parent != null) {
+						this.parent?.$callMethod('setOpendItem', 1)
+					}
+				} else {
+					this.$emit('update:show', false)
+				}
+				if (this.disabled) return
+				// 打开或关闭单元格
+				if (newValue === 'close' && this.status === 'open') {
+					this.closeSwipeAction()
+				} else if(newValue === 'open' && this.status === 'close') {
+					this.openSwipeAction()
+				}
+			},
+			options() {
+				this.getBtnWidth()
+			}
+		},
+		computed: {
+			// wxsInit() {
+			// 	return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
+			// }
+		},
+		mounted() {
+			this.init()
+			this.getBtnWidth()
+		},
+		beforeUmount() {
+			this.closeHandler()
+		},
+		methods: {
+			addUnit(e: any) {
+				return addUnit(e)
+			},
+			getPx(e: any, s: boolean = false): string {
+				return getPx(e, s)
+			},
+			init() {
+				// 初始化父组件数据
+				this.updateParentData()
+				// #ifndef APP-NVUE
+				sleep().then(() => {
+					this.queryRect()
+				})
+				// #endif
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('up-swipe-action')
+			},
+			// #ifndef APP-NVUE
+			// 查询节点
+			queryRect() {
+				// this.upGetRects('.up-swipe-action-item__right__button').then(buttons => {
+				// 	this.size = {
+				// 		buttons,
+				// 		show: this.show,
+				// 		disabled: this.disabled,
+				// 		threshold: this.threshold,
+				// 		duration: this.duration
+				// 	}
+				// })
+			},
+			// #endif
+			// 按钮被点击
+			buttonClickHandler(item: UPSwipeActionItemOption , index: number) {
+				let ret = this.$emit('click', {
+					index,
+					name: this.name
+				}, () => {
+				})
+				if (this.closeOnClick) {
+					this.closeHandler()
+				}
+			},
+			clickHandler() {
+			},
+			closeHandler() {
+				this.closeSwipeAction()
+			},
+			setStatus(status: string) {
+				this.status = status
+			},
+			getBtnWidth() {
+				let view = uni.createSelectorQuery().in(this).select(".up-swipe-action-item__right");
+				view.fields({
+					size: true,
+					scrollOffset: true
+					}, (data: any) => {
+						this.state['buttonsWidth'] = (data as NodeInfo).width
+						// console.log("得到节点信息" + JSON.stringify(data));
+				}).exec();
+			},
+			// 开始触摸
+			touchstart(event: UniTouchEvent) {
+				// console.log(event)
+				// 标识当前为滑动中状态
+				this.state['moving'] = true
+				// 记录触摸开始点的坐标值
+				var touches = event.touches
+				this.state['startX'] = touches[0].pageX
+				this.state['startY'] = touches[0].pageY
+				
+				// 关闭其它
+				if (this.parent != null) {
+					this.parent?.$callMethod('closeOther', this)
+				}
+			},
+			touchmove(event: UniTouchEvent) {
+			    // console.log(event)
+				if (this.disabled || this.state['moving'] == null) return
+				var touches = event.touches
+				var pageX = touches[0].pageX
+				var pageY = touches[0].pageY
+				var moveX = pageX - this.state['startX'] as number
+				var moveY = pageY - this.state['startY'] as number
+			
+				// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
+				if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > this.threshold) {
+					event.preventDefault()
+					event.stopPropagation()
+				}
+				// 如果移动的X轴距离小于Y轴距离，也即终点位置与起点位置连线，与Y轴夹角小于45度时，认为是页面上下滑动，而不是左右滑动单元格
+				if (Math.abs(moveX) < Math.abs(moveY)) return
+			
+				// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
+				// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，最好的办法就是
+				// 在超出后，设置为0
+				if (this.status === 'open') {
+					// 在开启状态下，向左滑动，需忽略
+					if (moveX < 0) moveX = 0
+					// 想要收起菜单，最大能移动的距离为按钮的总宽度
+					if (moveX > this.state['buttonsWidth'] as number) moveX = this.state['buttonsWidth'] as number
+					// 如果是已经打开了的状态，向左滑动时，移动收起菜单
+					this.moveSwipeAction(0 - this.state['buttonsWidth'] as number + moveX)
+				} else {
+					// 关闭状态下，右滑动需忽略
+					if (moveX > 0) moveX = 0
+					// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
+					if (Math.abs(moveX) > this.state['buttonsWidth'] as number) moveX = 0-this.state['buttonsWidth'] as number
+					// 只要是在滑过程中，就不断移动单元格内容部分，从而使隐藏的菜单显示出来
+					this.moveSwipeAction(moveX)
+				}
+			},
+			touchend(event: UniTouchEvent) {
+			    // console.log(event)
+				if (this.state['moving'] == false || this.disabled) return
+				this.state['moving'] = false
+				var touches: UniTouch = event.changedTouches[0] as UniTouch
+				var pageX = touches.pageX
+				var pageY = touches.pageY
+				var moveX = pageX - this.state['startX'] as number
+				if (this.status === 'open') {
+					// 在展开的状态下，继续左滑，无需操作
+					if (moveX < 0) return
+					// 在开启状态下，点击一下内容区域，moveX为0，也即没有进行移动，这时执行收起菜单逻辑
+					if (moveX === 0) {
+						return this.closeSwipeAction()
+					}
+					// 在开启状态下，滑动距离小于阈值，则默认为不关闭，同时恢复原来的打开状态
+					if (Math.abs(moveX) < this.threshold) {
+						this.openSwipeAction()
+					} else {
+						// 如果滑动距离大于阈值，则执行收起逻辑
+						this.closeSwipeAction()
+					}
+				} else {
+					// 在关闭的状态下，右滑，无需操作
+					if (moveX > 0) return
+					// 理由同上
+					if (Math.abs(moveX) < this.threshold) {
+						this.closeSwipeAction()
+					} else {
+						this.openSwipeAction()
+					}
+				}
+			},
+			// 一次性展开滑动菜单
+			openSwipeAction() {
+				// 处理duration单位问题
+				var duration = this.getDuration(this.duration)
+				// 展开过程中，是向左移动，所以X的偏移应该为负值
+				var buttonsWidth = 0 - this.state['buttonsWidth'] as number
+				this.sliderStyle = {
+					'transition': 'transform ' + duration,
+					'transform': 'translateX(' + buttonsWidth + 'px)',
+					'-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
+				}
+				this.setStatus('open')
+			},
+			// 一次性收起滑动菜单
+			closeSwipeAction() {
+				// 处理duration单位问题
+				var duration = this.getDuration(this.duration)
+				this.sliderStyle = {
+					'transition': 'transform ' + duration,
+					'transform': 'translateX(0px)'
+				}
+				// 设置各个隐藏的按钮为收起的状态
+				// for (var i = this.state.buttonsWidth - 1; i >= 0; i--) {
+				// 	buttons[i].setStyle({
+				// 		'transition': 'transform ' + duration,
+				// 		'transform': 'translateX(0px)',
+				// 		'-webkit-transform': 'translateX(0px)'
+				// 	})
+				// }
+				this.setStatus('close')
+			},
+			// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
+			moveSwipeAction(moveX: number) {
+				// 设置菜单内容部分的偏移
+				this.sliderStyle = {
+					'transition': 'none',
+					transform: 'translateX(' + moveX + 'px)',
+					'-webkit-transform': 'translateX(' + moveX + 'px)'
+				}
+			},
+			// 获取过渡时间
+			getDuration(value: any): string {
+				if (value.toString().indexOf('s') >= 0) return value as string
+				return parseInt(value.toString()) > 30 ? value.toString() + 'ms' : value.toString() + 's'
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.up-swipe-action-item {
+		position: relative;
+		overflow: hidden;
+		/* #ifndef APP-NVUE || MP-WEIXIN */
+		touch-action: pan-y;
+		/* #endif */
+
+		&__content {
+            transform: translateX(0px); // 修复某些情况下默认右侧按钮是展开的问题
+			background-color: #FFFFFF;
+			z-index: 10;
+		}
+
+		&__right {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			@include flex;
+
+			&__button {
+				@include flex;
+				justify-content: center;
+				overflow: hidden;
+				align-items: center;
+
+				&__wrapper {
+					@include flex;
+					align-items: center;
+					justify-content: center;
+					padding: 0 15px;
+
+					&__text {
+						@include flex;
+						align-items: center;
+						color: #FFFFFF;
+						font-size: 15px;
+						text-align: center;
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+</style>

package/uview-ultra/components/up-swipe-action-item/up-swipe-action-item.vue

@@ -0,0 +1,249 @@
+<template>	
+	<!-- #ifdef MP-ALIPAY -->
+	<!-- <import-sjs from="./alipay.sjs" name="mysjs" /> -->
+	<!-- #endif -->
+	<view class="u-swipe-action-item" ref="u-swipe-action-item">
+		<view class="u-swipe-action-item__right">
+			<slot name="button">
+				<view v-for="(item,index) in options" :key="index" class="u-swipe-action-item__right__button"
+					:ref="`u-swipe-action-item__right__button-${index}`" :style="[{
+						alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
+					}]" @tap="buttonClickHandler(item, index)">
+					<view class="u-swipe-action-item__right__button__wrapper" :style="[{
+							backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+							borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
+							padding: item.style && item.style.borderRadius ? '0' : '0 15px',
+						}, item.style]">
+						<up-icon v-if="item.icon" :name="item.icon"
+							:color="item.style && item.style.color ? item.style.color : '#ffffff'"
+							:size="item.iconSize ? addUnit(item.iconSize) : item.style && item.style.fontSize ? getPx(item.style.fontSize) * 1.2 : 17"
+							:customStyle="{
+								marginRight: item.text ? '2px' : 0
+							}"></up-icon>
+						<text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-line-1"
+							:style="[{
+								color: item.style && item.style.color ? item.style.color : '#ffffff',
+								fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
+								lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
+							}]">{{ item.text }}</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5  -->
+		<view class="u-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
+			@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
+			:change:size="wxs.sizeChange">
+			<slot></slot>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO-->
+		<view class="u-swipe-action-item__content" @click="clickHandler" @touchstart="touchstart" @touchmove="touchmove"
+			@touchend="touchend" :style="sliderStyle">
+			<slot></slot>
+		</view>
+		<!-- <view class="u-swipe-action-item__content" @touchstart="mysjs.touchstart" @touchmove="mysjs.touchmove"
+			@touchend="mysjs.touchend">
+			<slot></slot>
+		</view> -->
+		<!-- #endif -->
+		<!-- #ifdef APP-NVUE -->
+		<view class="u-swipe-action-item__content" ref="u-swipe-action-item__content" @panstart="onTouchstart"
+			@tap="clickHandler">
+			<slot></slot>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
+<script src="./index.wxs" module="wxs" lang="wxs"></script>
+<!-- #endif -->
+<script>
+	import { touchMixin } from '../../libs/mixin/touch'
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, getPx, sleep } from '../../libs/function/index';
+	// #ifdef APP-NVUE
+	import nvue from './nvue.js';
+	// #endif
+	// #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5
+	import wxs from './wxs.js';
+	// #endif
+	// #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
+	import other from './other.js';
+	// #endif
+	/**
+	 * SwipeActionItem 滑动单元格子组件
+	 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
+	 * @tutorial https://uview-plus.jiangruyi.com/components/swipeAction.html
+	 * @property {Boolean}			show			控制打开或者关闭（默认 false ）
+	 * @property {String | Number}	index			标识符，如果是v-for，可用index索引
+	 * @property {Boolean}			disabled		是否禁用（默认 false ）
+	 * @property {Boolean}			autoClose		是否自动关闭其他swipe按钮组（默认 true ）
+	 * @property {Number}			threshold		滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
+	 * @property {Array}			options			右侧按钮内容
+	 * @property {String | Number}	duration		动画过渡时间，单位ms（默认 350 ）
+	 * @event {Function(index)}	open	组件打开时触发
+	 * @event {Function(index)}	close	组件关闭时触发
+	 * @example	<u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
+	 */
+	export default {
+		name: 'u-swipe-action-item',
+		emits: ['click', 'update:show'],
+		mixins: [
+			mpMixin,
+			mixin,
+			// #ifndef APP-NVUE
+			touchMixin,
+			// #endif
+			// #ifdef APP-NVUE
+			nvue,
+			// #endif
+			// #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5
+			wxs,
+			// #endif
+			// #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
+			other,
+			// #endif
+			props
+		],
+		data() {
+			return {
+				// 按钮的尺寸信息
+				size: {},
+				// 父组件u-swipe-action的参数
+				parentData: {
+					autoClose: true,
+				},
+				// 当前状态，open-打开，close-关闭
+				status: '',
+				sliderStyle: {}
+			}
+		},
+		watch: {
+			// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
+			// #ifndef APP-NVUE
+			wxsInit(newValue, oldValue) {
+				this.queryRect()
+			},
+			// #endif
+			status(newValue) {
+				if (newValue === 'open') {
+					this.$emit('update:show', true)
+					this.parent && this.parent.setOpendItem(this)
+				} else {
+					this.$emit('update:show', false)
+				}
+			},
+			show(newValue) {
+				if (newValue) {
+					this.status = 'open'
+				} else {
+					this.status = 'close'
+				}
+			}
+		},
+		computed: {
+			wxsInit() {
+				return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		beforeUmount() {
+			this.closeHandler()
+		},
+		methods: {
+			addUnit,
+			getPx,
+			init() {
+				// 初始化父组件数据
+				this.updateParentData()
+				// #ifndef APP-NVUE
+				sleep().then(() => {
+					this.queryRect()
+				})
+				// #endif
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('u-swipe-action')
+			},
+			// #ifndef APP-NVUE
+			// 查询节点
+			queryRect() {
+				this.$uGetRect('.u-swipe-action-item__right__button', true).then(buttons => {
+					this.size = {
+						buttons,
+						show: this.show,
+						disabled: this.disabled,
+						threshold: this.threshold,
+						duration: this.duration
+					}
+				})
+			},
+			// #endif
+			// 按钮被点击
+			buttonClickHandler(item, index) {
+				let ret = this.$emit('click', {
+					index,
+					name: this.name
+				}, () => {
+				})
+				if (this.closeOnClick) {
+					this.closeHandler()
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-swipe-action-item {
+		position: relative;
+		overflow: hidden;
+		/* #ifndef APP-NVUE || MP-WEIXIN */
+		touch-action: pan-y;
+		/* #endif */
+
+		&__content {
+            transform: translateX(0px); // 修复某些情况下默认右侧按钮是展开的问题
+			background-color: #FFFFFF;
+			z-index: 10;
+		}
+
+		&__right {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			@include flex;
+
+			&__button {
+				@include flex;
+				justify-content: center;
+				overflow: hidden;
+				align-items: center;
+
+				&__wrapper {
+					@include flex;
+					align-items: center;
+					justify-content: center;
+					padding: 0 15px;
+
+					&__text {
+						@include flex;
+						align-items: center;
+						color: #FFFFFF;
+						font-size: 15px;
+						text-align: center;
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+</style>

package/uview-ultra/components/up-swipe-action-item/wxs.js

@@ -0,0 +1,15 @@
+export default {
+    methods: {
+        // 关闭时执行
+        closeHandler() {
+            this.status = 'close'
+        },
+        setState(status) {
+            this.status = status
+        },
+        closeOther() {
+            // 尝试关闭其他打开的单元格
+            this.parent && this.parent.closeOther(this)
+        }
+    }
+}