@10yun/cv-mobile-ui 0.5.26 → 0.5.29

package/uview-plus/components/u-swipe-action-item/other.js

@@ -0,0 +1,178 @@
+export default {
+	data() {
+		return {
+			state: {
+				moving: false,
+				startX: 0,
+				startY: 0,
+				buttonsWidth: 0
+			}
+		}
+	},
+	watch: {
+		status(newValue) {
+			if (this.disabled) return
+			// 打开或关闭单元格
+			if (newValue === 'close' && this.status === 'open') {
+				this.closeSwipeAction()
+			} else if(newValue === 'open' && this.status === 'close') {
+				this.openSwipeAction()
+			}
+		},
+		options(newVal) {
+			this.getBtnWidth()
+		}
+	},
+	mounted() {
+		this.getBtnWidth()
+	},
+    methods: {
+		clickHandler() {
+		},
+		closeHandler() {
+			this.closeSwipeAction()
+        },
+		setStatus(status) {
+			this.status = status
+		},
+		getBtnWidth() {
+			let view = uni.createSelectorQuery().in(this).select(".u-swipe-action-item__right");
+			view.fields({
+				size: true,
+				scrollOffset: true
+				}, data => {
+					this.state.buttonsWidth = data.width
+					// console.log("得到节点信息" + JSON.stringify(data));
+			}).exec();
+		},
+        // 开始触摸
+        touchstart(event) {
+			// console.log(event)
+			// 标识当前为滑动中状态
+			this.state.moving = true
+			// 记录触摸开始点的坐标值
+			var touches = event.touches
+			this.state.startX = touches[0].pageX
+			this.state.startY = touches[0].pageY
+			
+			// 关闭其它
+			// console.log(this.parent)
+			this.parent && this.parent.closeOther(this)
+        },
+        touchmove(event) {
+            // console.log(event)
+			if (this.disabled || !this.state.moving) return
+			var touches = event.touches
+			var pageX = touches[0].pageX
+			var pageY = touches[0].pageY
+			var moveX = pageX - this.state.startX
+			var moveY = pageY - this.state.startY
+
+			// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
+			if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > this.threshold) {
+				event.preventDefault && event.preventDefault()
+				event.stopPropagation && 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) moveX = this.state.buttonsWidth
+				// 如果是已经打开了的状态，向左滑动时，移动收起菜单
+				this.moveSwipeAction(-this.state.buttonsWidth + moveX)
+			} else {
+				// 关闭状态下，右滑动需忽略
+				if (moveX > 0) moveX = 0
+				// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
+				if (Math.abs(moveX) > this.state.buttonsWidth) moveX = -this.state.buttonsWidth
+				// 只要是在滑过程中，就不断移动单元格内容部分，从而使隐藏的菜单显示出来
+				this.moveSwipeAction(moveX)
+			}
+        },
+        touchend(event) {
+            // console.log(event)
+			if (!this.state.moving || this.disabled) return
+			this.state.moving = false
+			var touches = event.changedTouches ? event.changedTouches[0] : {}
+			var pageX = touches.pageX
+			var pageY = touches.pageY
+			var moveX = pageX - this.state.startX
+			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 = -this.state.buttonsWidth
+			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)',
+				'-webkit-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) {
+			// 设置菜单内容部分的偏移
+			this.sliderStyle = {
+				'transition': 'none',
+				transform: 'translateX(' + moveX + 'px)',
+				'-webkit-transform': 'translateX(' + moveX + 'px)'
+			}
+		},
+		// 获取过渡时间
+		getDuration(value) {
+			if (value.toString().indexOf('s') >= 0) return value
+			return value > 30 ? value + 'ms' : value + 's'
+		}
+    }
+}

package/uview-plus/components/u-swipe-action-item/props.js

@@ -1,42 +1,47 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 控制打开或者关闭
     show: {
       type: Boolean,
-      default: defprops.swipeActionItem.show
+      default: () => defProps.swipeActionItem.show
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: () => defProps.swipeActionItem.closeOnClick
     },
     // 标识符，如果是v-for，可用index索引值
     name: {
       type: [String, Number],
-      default: defprops.swipeActionItem.name
+      default: () => defProps.swipeActionItem.name
     },
     // 是否禁用
     disabled: {
       type: Boolean,
-      default: defprops.swipeActionItem.disabled
+      default: () => defProps.swipeActionItem.disabled
     },
     // 是否自动关闭其他swipe按钮组
     autoClose: {
       type: Boolean,
-      default: defprops.swipeActionItem.autoClose
+      default: () => defProps.swipeActionItem.autoClose
     },
     // 滑动距离阈值，只有大于此值，才被认为是要打开菜单
     threshold: {
       type: Number,
-      default: defprops.swipeActionItem.threshold
+      default: () => defProps.swipeActionItem.threshold
     },
     // 右侧按钮内容
     options: {
       type: Array,
       default() {
-        return uni.$u.props.swipeActionItem.rightOptions;
+        return defProps.swipeActionItem.rightOptions;
       }
     },
     // 动画过渡时间，单位ms
     duration: {
       type: [String, Number],
-      default: defprops.swipeActionItem.duration
+      default: () => defProps.swipeActionItem.duration
     }
   }
-};
+});

package/uview-plus/components/u-swipe-action-item/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -17,6 +32,7 @@ view, scroll-view, swiper-item {
   /* #endif */
 }
 .u-swipe-action-item__content {
+  transform: translateX(0px);
   background-color: #ffffff;
   z-index: 10;
 }
@@ -58,4 +74,4 @@ view, scroll-view, swiper-item {
   font-size: 15px;
   text-align: center;
   justify-content: center;
-}
+}

package/uview-plus/components/u-swipe-action-item/style.scss

@@ -8,6 +8,7 @@
   /* #endif */
 
   &__content {
+    transform: translateX(0px); // 修复某些情况下默认右侧按钮是展开的问题
     background-color: #ffffff;
     z-index: 10;
   }

package/uview-plus/{libs/config/props → components/u-swipe-action-item}/swipeActionItem.js

@@ -11,6 +11,7 @@ export default {
     // swipeActionItem 组件
     swipeActionItem: {
         show: false,
+        closeOnClick: true,
         name: '',
         disabled: false,
         threshold: 20,

package/uview-plus/components/u-swipe-action-item/u-swipe-action-item.vue

@@ -1,4 +1,7 @@
 <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">
@@ -30,11 +33,7 @@
               :name="item.icon"
               :color="item.style && item.style.color ? item.style.color : '#ffffff'"
               :size="
-                item.iconSize
-                  ? $u.addUnit(item.iconSize)
-                  : item.style && item.style.fontSize
-                  ? $u.getPx(item.style.fontSize) * 1.2
-                  : 17
+                item.iconSize ? addUnit(item.iconSize) : item.style && item.style.fontSize ? getPx(item.style.fontSize) * 1.2 : 17
               "
               :customStyle="{
                 marginRight: item.text ? '2px' : 0
@@ -57,7 +56,7 @@
         </view>
       </slot>
     </view>
-    <!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
+    <!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5  -->
     <view
       class="u-swipe-action-item__content"
       @touchstart="wxs.touchstart"
@@ -71,6 +70,22 @@
       <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>
@@ -78,20 +93,24 @@
     <!-- #endif -->
   </view>
 </template>
-<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
+<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
 <script src="./index.wxs" module="wxs" lang="wxs"></script>
 <!-- #endif -->
 <script>
-import touch from '../../libs/mixin/touch.js';
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+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 || H5 || MP-QQ
+// #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 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
@@ -109,16 +128,24 @@ import wxs from './wxs.js';
  */
 export default {
   name: 'u-swipe-action-item',
-  emits: ['click'],
-  // #ifndef APP-NVUE
-  mixins: [mpMixin, mixin, props, touch],
-  // #endif
-  // #ifdef APP-NVUE
-  mixins: [mpMixin, mixin, props, nvue, touch],
-  // #endif
-  // #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
-  mixins: [mpMixin, mixin, props, touch, wxs],
-  // #endif
+  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 {
       // 按钮的尺寸信息
@@ -128,13 +155,31 @@ export default {
         autoClose: true
       },
       // 当前状态，open-打开，close-关闭
-      status: '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: {
@@ -145,12 +190,17 @@ export default {
   mounted() {
     this.init();
   },
+  beforeUmount() {
+    this.closeHandler();
+  },
   methods: {
+    addUnit,
+    getPx,
     init() {
       // 初始化父组件数据
       this.updateParentData();
       // #ifndef APP-NVUE
-      uni.$u.sleep().then(() => {
+      sleep().then(() => {
         this.queryRect();
       });
       // #endif
@@ -175,10 +225,17 @@ export default {
     // #endif
     // 按钮被点击
     buttonClickHandler(item, index) {
-      this.$emit('click', {
-        index,
-        name: this.name
-      });
+      let ret = this.$emit(
+        'click',
+        {
+          index,
+          name: this.name
+        },
+        () => {}
+      );
+      if (this.closeOnClick) {
+        this.closeHandler();
+      }
     }
   }
 };

package/uview-plus/components/u-swiper/props.js

@@ -1,126 +1,127 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 列表数组，元素可为字符串，如为对象可通过keyName指定目标属性名
     list: {
       type: Array,
-      default: defprops.swiper.list
+      default: () => defProps.swiper.list
     },
     // 是否显示面板指示器
     indicator: {
       type: Boolean,
-      default: defprops.swiper.indicator
+      default: () => defProps.swiper.indicator
     },
     // 指示器非激活颜色
     indicatorActiveColor: {
       type: String,
-      default: defprops.swiper.indicatorActiveColor
+      default: () => defProps.swiper.indicatorActiveColor
     },
     // 指示器的激活颜色
     indicatorInactiveColor: {
       type: String,
-      default: defprops.swiper.indicatorInactiveColor
+      default: () => defProps.swiper.indicatorInactiveColor
     },
     // 指示器样式，可通过bottom，left，right进行定位
     indicatorStyle: {
       type: [String, Object],
-      default: defprops.swiper.indicatorStyle
+      default: () => defProps.swiper.indicatorStyle
     },
     // 指示器模式，line-线型，dot-点型
     indicatorMode: {
       type: String,
-      default: defprops.swiper.indicatorMode
+      default: () => defProps.swiper.indicatorMode
     },
     // 是否自动切换
     autoplay: {
       type: Boolean,
-      default: defprops.swiper.autoplay
+      default: () => defProps.swiper.autoplay
     },
     // 当前所在滑块的 index
     current: {
       type: [String, Number],
-      default: defprops.swiper.current
+      default: () => defProps.swiper.current
     },
     // 当前所在滑块的 item-id ，不能与 current 被同时指定
     currentItemId: {
       type: String,
-      default: defprops.swiper.currentItemId
+      default: () => defProps.swiper.currentItemId
     },
     // 滑块自动切换时间间隔
     interval: {
       type: [String, Number],
-      default: defprops.swiper.interval
+      default: () => defProps.swiper.interval
     },
     // 滑块切换过程所需时间
     duration: {
       type: [String, Number],
-      default: defprops.swiper.duration
+      default: () => defProps.swiper.duration
     },
     // 播放到末尾后是否重新回到开头
     circular: {
       type: Boolean,
-      default: defprops.swiper.circular
+      default: () => defProps.swiper.circular
     },
     // 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持
     previousMargin: {
       type: [String, Number],
-      default: defprops.swiper.previousMargin
+      default: () => defProps.swiper.previousMargin
     },
     // 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持
     nextMargin: {
       type: [String, Number],
-      default: defprops.swiper.nextMargin
+      default: () => defProps.swiper.nextMargin
     },
     // 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持
     acceleration: {
       type: Boolean,
-      default: defprops.swiper.acceleration
+      default: () => defProps.swiper.acceleration
     },
     // 同时显示的滑块数量，nvue、支付宝小程序不支持
     displayMultipleItems: {
       type: Number,
-      default: defprops.swiper.displayMultipleItems
+      default: () => defProps.swiper.displayMultipleItems
     },
     // 指定swiper切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic
     // 只对微信小程序有效
     easingFunction: {
       type: String,
-      default: defprops.swiper.easingFunction
+      default: () => defProps.swiper.easingFunction
     },
     // list数组中指定对象的目标属性名
     keyName: {
       type: String,
-      default: defprops.swiper.keyName
+      default: () => defProps.swiper.keyName
     },
     // 图片的裁剪模式
     imgMode: {
       type: String,
-      default: defprops.swiper.imgMode
+      default: () => defProps.swiper.imgMode
     },
     // 组件高度
     height: {
       type: [String, Number],
-      default: defprops.swiper.height
+      default: () => defProps.swiper.height
     },
     // 背景颜色
     bgColor: {
       type: String,
-      default: defprops.swiper.bgColor
+      default: () => defProps.swiper.bgColor
     },
     // 组件圆角，数值或带单位的字符串
     radius: {
       type: [String, Number],
-      default: defprops.swiper.radius
+      default: () => defProps.swiper.radius
     },
     // 是否加载中
     loading: {
       type: Boolean,
-      default: defprops.swiper.loading
+      default: () => defProps.swiper.loading
     },
     // 是否显示标题，要求数组对象中有title属性
     showTitle: {
       type: Boolean,
-      default: defprops.swiper.showTitle
+      default: () => defProps.swiper.showTitle
     }
   }
-};
+});

package/uview-plus/components/u-swiper/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -9,6 +24,9 @@ view, scroll-view, swiper-item {
   align-content: flex-start;
 }
 /* #endif */
+.u-swiper__wrapper {
+  flex: 1;
+}
 .u-swiper {
   /* #ifndef APP-NVUE */
   display: flex;
@@ -55,4 +73,4 @@ view, scroll-view, swiper-item {
 .u-swiper__indicator {
   position: absolute;
   bottom: 10px;
-}
+}

package/uview-plus/components/u-swiper/style.scss

@@ -1,5 +1,8 @@
 @import '../../libs/css/components.scss';
 
+.u-swiper__wrapper {
+  flex: 1;
+}
 .u-swiper {
   @include flex;
   justify-content: center;