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

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

@@ -10,20 +10,20 @@
   /* #endif */
 
   &--button {
-    height: 32px;
+    height: 34px;
     background-color: rgb(238, 238, 239);
     padding: 3px;
-    border-radius: 3px;
+    border-radius: 4px;
     align-items: stretch;
 
     &__bar {
       background-color: #ffffff;
-      border-radius: 3px !important;
+      border-radius: 4px !important;
     }
   }
 
   &--subsection {
-    height: 30px;
+    height: 32px;
   }
 
   &__bar {
@@ -35,8 +35,8 @@
     /* #endif */
 
     &--first {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
       border-top-right-radius: 0px;
       border-bottom-right-radius: 0px;
     }
@@ -51,8 +51,8 @@
     &--last {
       border-top-left-radius: 0px;
       border-bottom-left-radius: 0px;
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
     }
   }
 
@@ -69,18 +69,18 @@
     }
 
     &--first {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
     }
 
     &--last {
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
     }
 
     &__text {
       font-size: 12px;
-      line-height: 12px;
+      line-height: 14px;
       @include flex;
       align-items: center;
       transition-property: color;

package/uview-plus/components/u-subsection/u-subsection.vue

@@ -1,23 +1,18 @@
 <template>
-  <view
-    class="u-subsection"
-    ref="u-subsection"
-    :class="[`u-subsection--${mode}`]"
-    :style="[$u.addStyle(customStyle), wrapperStyle]"
-  >
+  <view class="u-subsection" ref="u-subsection" :class="[`u-subsection--${mode}`]" :style="[addStyle(customStyle), wrapperStyle]">
     <view
-      class="u-subsection__bar"
+      class="u-subsection__bar cursor-pointer"
       ref="u-subsection__bar"
       :style="[barStyle]"
       :class="[
         mode === 'button' && 'u-subsection--button__bar',
-        current === 0 && mode === 'subsection' && 'u-subsection__bar--first',
-        current > 0 && current < list.length - 1 && mode === 'subsection' && 'u-subsection__bar--center',
-        current === list.length - 1 && mode === 'subsection' && 'u-subsection__bar--last'
+        innerCurrent === 0 && mode === 'subsection' && 'u-subsection__bar--first',
+        innerCurrent > 0 && innerCurrent < list.length - 1 && mode === 'subsection' && 'u-subsection__bar--center',
+        innerCurrent === list.length - 1 && mode === 'subsection' && 'u-subsection__bar--last'
       ]"
     ></view>
     <view
-      class="u-subsection__item"
+      class="u-subsection__item cursor-pointer"
       :class="[
         `u-subsection__item--${index}`,
         index < list.length - 1 && 'u-subsection__item--no-border-right',
@@ -39,9 +34,10 @@
 const dom = uni.requireNativePlugin('dom');
 const animation = uni.requireNativePlugin('animation');
 // #endif
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props.js';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, sleep } from '../../libs/function/index';
 /**
  * Subsection 分段器
  * @description 该分段器一般用于用户从几个选项中选择某一个的场景
@@ -69,7 +65,9 @@ export default {
       itemRect: {
         width: 0,
         height: 0
-      }
+      },
+      innerCurrent: '',
+      windowResizeCallback: {}
     };
   },
   watch: {
@@ -79,12 +77,15 @@ export default {
     current: {
       immediate: true,
       handler(n) {
+        if (n !== this.innerCurrent) {
+          this.innerCurrent = n;
+        }
         // #ifdef APP-NVUE
         // 在安卓nvue上，如果通过translateX进行位移，到最后一个时，会导致右侧无法绘制圆角
         // 故用animation模块进行位移
         const ref = this.$refs?.['u-subsection__bar']?.ref;
         // 不存在ref的时候(理解为第一次初始化时，需要渲染dom，进行一定延时再获取ref)，这里的100ms是经过测试得出的结果(某些安卓需要延时久一点)，勿随意修改
-        uni.$u.sleep(ref ? 0 : 100).then(() => {
+        sleep(ref ? 0 : 100).then(() => {
           animation.transition(this.$refs['u-subsection__bar'].ref, {
             styles: {
               transform: `translateX(${n * this.itemRect.width}px)`,
@@ -113,7 +114,7 @@ export default {
       style.height = `${this.itemRect.height}px`;
       // 通过translateX移动滑块，其移动的距离为索引*item的宽度
       // #ifndef APP-NVUE
-      style.transform = `translateX(${this.current * this.itemRect.width}px)`;
+      style.transform = `translateX(${this.innerCurrent * this.itemRect.width}px)`;
       // #endif
       if (this.mode === 'subsection') {
         // 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
@@ -138,14 +139,14 @@ export default {
     textStyle(index) {
       return (index) => {
         const style = {};
-        style.fontWeight = this.bold && this.current === index ? 'bold' : 'normal';
-        style.fontSize = uni.$u.addUnit(this.fontSize);
+        style.fontWeight = this.bold && this.innerCurrent === index ? 'bold' : 'normal';
+        style.fontSize = addUnit(this.fontSize);
         // subsection模式下，激活时默认为白色的文字
         if (this.mode === 'subsection') {
-          style.color = this.current === index ? '#fff' : this.inactiveColor;
+          style.color = this.innerCurrent === index ? '#fff' : this.inactiveColor;
         } else {
           // button模式下，激活时文字颜色默认为activeColor
-          style.color = this.current === index ? this.activeColor : this.inactiveColor;
+          style.color = this.innerCurrent === index ? this.activeColor : this.inactiveColor;
         }
         return style;
       };
@@ -153,10 +154,20 @@ export default {
   },
   mounted() {
     this.init();
+    this.windowResizeCallback = (res) => {
+      this.init();
+    };
+    uni.onWindowResize(this.windowResizeCallback);
+  },
+  beforeUnmount() {
+    uni.offWindowResize(this.windowResizeCallback);
   },
+  emits: ['change', 'update:current'],
   methods: {
+    addStyle,
     init() {
-      uni.$u.sleep().then(() => this.getRect());
+      this.innerCurrent = this.current;
+      sleep().then(() => this.getRect());
     },
     // 判断展示文本
     getText(item) {
@@ -178,6 +189,8 @@ export default {
       // #endif
     },
     clickHandler(index) {
+      this.innerCurrent = index;
+      this.$emit('update:current', index);
       this.$emit('change', index);
     }
   }

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

@@ -1,10 +1,16 @@
-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: {
     // 是否自动关闭其他swipe按钮组
     autoClose: {
       type: Boolean,
-      default: defprops.swipeAction.autoClose
+      default: () => defProps.swipeAction.autoClose
+    },
+    // 是否存在打开的按钮组
+    opendItem: {
+      type: Boolean,
+      default: false
     }
   }
-};
+});

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

@@ -4,9 +4,9 @@
   </view>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
 /**
  * SwipeAction 滑动单元格
  * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
@@ -34,6 +34,7 @@ export default {
       return [this.autoClose];
     }
   },
+  emits: ['opendItem:update'],
   watch: {
     // 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
     parentData() {
@@ -43,6 +44,11 @@ export default {
           typeof child.updateParentData === 'function' && child.updateParentData();
         });
       }
+    },
+    opendItem(val) {
+      if (val == false) {
+        this.closeAll();
+      }
     }
   },
   created() {
@@ -58,6 +64,15 @@ export default {
           }
         });
       }
+    },
+    closeAll() {
+      // 关闭所有单元格
+      this.children.map((item, index) => {
+        item.closeHandler();
+      });
+    },
+    setOpendItem(ins) {
+      this.$emit('opendItem:update', true);
     }
   }
 };

package/uview-plus/components/u-swipe-action-item/alipay.sjs

@@ -0,0 +1,229 @@
+/**
+ * 此为wxs模块，只支持APP-VUE，微信和QQ小程序以及H5平台
+ * wxs内部不支持es6语法，变量只能使用var定义，无法使用解构，箭头函数等特性
+ */
+
+// 开始触摸
+function touchstart(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance
+	// wxs内的局部变量快照，此快照是属于整个组件的，在touchstart和touchmove事件中都能获取到相同的结果
+	var state = instance.getState()
+	if (state.disabled) return
+	var touches = event.touches
+	// 如果进行的是多指触控，不允许进行操作
+	if (touches && touches.length > 1) return
+	// 标识当前为滑动中状态
+	state.moving = true
+	// 记录触摸开始点的坐标值
+	state.startX = touches[0].pageX
+	state.startY = touches[0].pageY
+	
+	ownerInstance.callMethod('closeOther')
+}
+
+// 触摸滑动
+function touchmove(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance
+	// wxs内的局部变量快照
+	var state = instance.getState()
+	if (state.disabled || !state.moving) return
+	var touches = event.touches
+	var pageX = touches[0].pageX
+	var pageY = touches[0].pageY
+	var moveX = pageX - state.startX
+	var moveY = pageY - state.startY
+	var buttonsWidth = state.buttonsWidth
+
+	// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
+	if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.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 (state.status === 'open') {
+		// 在开启状态下，向左滑动，需忽略
+		if (moveX < 0) moveX = 0
+		// 想要收起菜单，最大能移动的距离为按钮的总宽度
+		if (moveX > buttonsWidth) moveX = buttonsWidth
+		// 如果是已经打开了的状态，向左滑动时，移动收起菜单
+		moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
+	} else {
+		// 关闭状态下，右滑动需忽略
+		if (moveX > 0) moveX = 0
+		// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
+		if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
+		// 只要是在滑过程中，就不断移动单元格内容部分，从而使隐藏的菜单显示出来
+		moveSwipeAction(moveX, instance, ownerInstance)
+	}
+}
+
+// 触摸结束
+function touchend(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance
+	// wxs内的局部变量快照
+	var state = instance.getState()
+	if (!state.moving || state.disabled) return
+	var touches = event.changedTouches ? event.changedTouches[0] : {}
+	var pageX = touches.pageX
+	var pageY = touches.pageY
+	var moveX = pageX - state.startX
+	if (state.status === 'open') {
+		// 在展开的状态下，继续左滑，无需操作
+		if (moveX < 0) return
+		// 在开启状态下，点击一下内容区域，moveX为0，也即没有进行移动，这时执行收起菜单逻辑
+		if (moveX === 0) {
+			return closeSwipeAction(instance, ownerInstance)
+		}
+		// 在开启状态下，滑动距离小于阈值，则默认为不关闭，同时恢复原来的打开状态
+		if (Math.abs(moveX) < state.threshold) {
+			openSwipeAction(instance, ownerInstance)
+		} else {
+			// 如果滑动距离大于阈值，则执行收起逻辑
+			closeSwipeAction(instance, ownerInstance)
+		}
+	} else {
+		// 在关闭的状态下，右滑，无需操作
+		if (moveX > 0) return
+		// 理由同上
+		if (Math.abs(moveX) < state.threshold) {
+			closeSwipeAction(instance, ownerInstance)
+		} else {
+			openSwipeAction(instance, ownerInstance)
+		}
+	}
+}
+
+// 获取过渡时间
+function getDuration(value) {
+	if (value.toString().indexOf('s') >= 0) return value
+	return value > 30 ? value + 'ms' : value + 's'
+}
+
+// 滑动结束时判断滑动的方向
+function getMoveDirection(instance, ownerInstance) {
+	var state = instance.getState()
+}
+
+// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
+function moveSwipeAction(moveX, instance, ownerInstance) {
+	var state = instance.getState()
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
+
+	// 设置菜单内容部分的偏移
+	instance.requestAnimationFrame(function() {
+		instance.setStyle({
+			// 设置translateX的值
+			'transition': 'none',
+			transform: 'translateX(' + moveX + 'px)',
+			'-webkit-transform': 'translateX(' + moveX + 'px)'
+		})
+	})
+}
+
+// 一次性展开滑动菜单
+function openSwipeAction(instance, ownerInstance) {
+	var state = instance.getState()
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
+	// 处理duration单位问题
+	var duration = getDuration(state.duration)
+	// 展开过程中，是向左移动，所以X的偏移应该为负值
+	var buttonsWidth = -state.buttonsWidth
+	instance.requestAnimationFrame(function() {
+		// 设置菜单主体内容
+		instance.setStyle({
+			'transition': 'transform ' + duration,
+			'transform': 'translateX(' + buttonsWidth + 'px)',
+			'-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
+		})
+	})
+	setStatus('open', instance, ownerInstance)
+}
+
+// 标记菜单的当前状态，open-已经打开，close-已经关闭
+function setStatus(status, instance, ownerInstance) {
+	var state = instance.getState()
+	state.status = status
+	ownerInstance.callMethod('setState', status)
+}
+
+// 一次性收起滑动菜单
+function closeSwipeAction(instance, ownerInstance) {
+	var state = instance.getState()
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
+	var len = buttons.length
+	// 处理duration单位问题
+	var duration = getDuration(state.duration)
+	instance.requestAnimationFrame(function() {
+		// 设置菜单主体内容
+		instance.setStyle({
+			'transition': 'transform ' + duration,
+			'transform': 'translateX(0px)',
+			'-webkit-transform': 'translateX(0px)'
+		})
+		// 设置各个隐藏的按钮为收起的状态
+		for (var i = len - 1; i >= 0; i--) {
+			buttons[i].setStyle({
+				'transition': 'transform ' + duration,
+				'transform': 'translateX(0px)',
+				'-webkit-transform': 'translateX(0px)'
+			})
+		}
+	})
+	setStatus('close', instance, ownerInstance)
+}
+
+// status的状态发生变化
+function statusChange(newValue, oldValue, ownerInstance, instance) {
+	var state = instance.getState()
+	if (state.disabled) return
+	// 打开或关闭单元格
+	if (newValue === 'close' && state.status === 'open') {
+		closeSwipeAction(instance, ownerInstance)
+	} else if(newValue === 'open' && state.status === 'close') {
+		openSwipeAction(instance, ownerInstance)
+	}
+}
+
+// 菜单尺寸发生变化
+function sizeChange(newValue, oldValue, ownerInstance, instance) {
+	// wxs内的局部变量快照
+	var state = instance.getState()
+	// 临时防止nv_disabled报错
+	if (!state || !newValue) {
+		return;
+	}
+	state.disabled = newValue.disabled
+	state.duration = newValue.duration
+	state.show = newValue.show
+	state.threshold = newValue.threshold
+	state.buttons = newValue.buttons
+
+	if (state.buttons) {
+		var len = state.buttons.length
+		var buttonsWidth = 0
+		var buttons = newValue.buttons
+		for (var i = 0; i < len; i++) {
+			buttonsWidth += buttons[i].width
+		}
+	}
+	state.buttonsWidth = buttonsWidth
+}
+
+export default {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	sizeChange: sizeChange,
+	statusChange: statusChange
+}

package/uview-plus/components/u-swipe-action-item/index.wxs

@@ -9,7 +9,7 @@ function touchstart(event, ownerInstance) {
 	var instance = event.instance
 	// wxs内的局部变量快照，此快照是属于整个组件的，在touchstart和touchmove事件中都能获取到相同的结果
 	var state = instance.getState()
-	if (state.disabled) return
+	if (state.disabled) return
 	var touches = event.touches
 	// 如果进行的是多指触控，不允许进行操作
 	if (touches && touches.length > 1) return
@@ -17,8 +17,8 @@ function touchstart(event, ownerInstance) {
 	state.moving = true
 	// 记录触摸开始点的坐标值
 	state.startX = touches[0].pageX
-	state.startY = touches[0].pageY
-	
+	state.startY = touches[0].pageY
+	
 	ownerInstance.callMethod('closeOther')
 }
 
@@ -70,7 +70,7 @@ function touchend(event, ownerInstance) {
 	var instance = event.instance
 	// wxs内的局部变量快照
 	var state = instance.getState()
-	if (!state.moving || state.disabled) return
+	if (!state.moving || state.disabled) return
 	var touches = event.changedTouches ? event.changedTouches[0] : {}
 	var pageX = touches.pageX
 	var pageY = touches.pageY
@@ -185,10 +185,10 @@ function closeSwipeAction(instance, ownerInstance) {
 
 // status的状态发生变化
 function statusChange(newValue, oldValue, ownerInstance, instance) {
-	var state = instance.getState()
-	if (state.disabled) return
+	var state = instance.getState()
+	if (state.disabled) return
 	// 打开或关闭单元格
-	if (newValue === 'close' && state.status === 'open') {
+	if (newValue === 'close' && state.status === 'open') {
 		closeSwipeAction(instance, ownerInstance)
 	} else if(newValue === 'open' && state.status === 'close') {
 		openSwipeAction(instance, ownerInstance)
@@ -198,18 +198,18 @@ function statusChange(newValue, oldValue, ownerInstance, instance) {
 // 菜单尺寸发生变化
 function sizeChange(newValue, oldValue, ownerInstance, instance) {
 	// wxs内的局部变量快照
-	var state = instance.getState()
-	// 临时防止nv_disabled报错
-	if (!state || !newValue) {
-		return;
-	}
+	var state = instance.getState()
+	// 临时防止nv_disabled报错
+	if (!state || !newValue) {
+		return;
+	}
 	state.disabled = newValue.disabled
 	state.duration = newValue.duration
 	state.show = newValue.show
 	state.threshold = newValue.threshold
 	state.buttons = newValue.buttons
 
-	if (state.buttons) {
+	if (state.buttons) {
 		var len = state.buttons.length
 		var buttonsWidth = 0
 		var buttons = newValue.buttons
@@ -217,7 +217,12 @@ function sizeChange(newValue, oldValue, ownerInstance, instance) {
 			buttonsWidth += buttons[i].width
 		}
 	}
-	state.buttonsWidth = buttonsWidth
+	state.buttonsWidth = buttonsWidth
+
+	// 支持默认打开
+	if (state.show) {
+		openSwipeAction(instance, ownerInstance)
+	}
 }
 
 module.exports = {
@@ -226,4 +231,4 @@ module.exports = {
 	touchend: touchend,
 	sizeChange: sizeChange,
 	statusChange: statusChange
-}
+}

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

@@ -2,6 +2,7 @@
 const dom = uni.requireNativePlugin('dom')
 // nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
 const animation = uni.requireNativePlugin('animation')
+import { sleep } from '../../libs/function/index';
 export default {
     data() {
         return {
@@ -40,7 +41,7 @@ export default {
             immediate: true,
             handler(n) {
                 // if(n === true) {
-                // 	uni.$u.sleep(50).then(() => {
+                // 	sleep(50).then(() => {
                 // 		this.openSwipeAction()
                 // 	})
                 // } else {
@@ -50,7 +51,7 @@ export default {
         }
     },
     mounted() {
-        uni.$u.sleep(20).then(() => {
+        sleep(20).then(() => {
             this.queryRect()
         })
     },

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

@@ -2,6 +2,7 @@
 const dom = uni.requireNativePlugin('dom');
 const bindingX = uni.requireNativePlugin('bindingx');
 const animation = uni.requireNativePlugin('animation');
+import { getPx, getDuration } from '../../libs/function/index';
 export default {
 	data() {
 		return {
@@ -97,7 +98,7 @@ export default {
 						this.$nextTick(() => {
 							this.status = deltaX <= -this.buttonsWidth ? 'open' : 'close'
 						})
-					} else if(Math.abs(deltaX) > uni.$u.getPx(this.threshold)) {
+					} else if(Math.abs(deltaX) > getPx(this.threshold)) {
 						// 在移动大于阈值、并且小于总按钮宽度时，进行自动打开或者关闭
 						// 移动距离大于0时，意味着需要关闭状态
 						if(Math.abs(deltaX) < this.buttonsWidth) {
@@ -153,7 +154,7 @@ export default {
 				styles: {
 					transform: `translateX(${x}px)`,
 				},
-				duration: uni.$u.getDuration(this.duration, false),
+				duration: getDuration(this.duration, false),
 				timingFunction: 'ease-in-out'
 			}, () => {
 				this.moving = false
@@ -165,7 +166,7 @@ export default {
 		getContentRef() {
 			return this.$refs['u-swipe-action-item__content'].ref
 		},
-		beforeDestroy() {
+		beforeUnmount() {
 			this.unbindBindingX()
 		}
 	}