@10yun/cv-mobile-ui 0.5.27 → 0.5.30

package/uview-plus/components/u-loading-page/props.js

@@ -1,50 +1,57 @@
-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: {
     // 提示内容
     loadingText: {
       type: [String, Number],
-      default: defprops.loadingPage.loadingText
+      default: () => defProps.loadingPage.loadingText
     },
     // 文字上方用于替换loading动画的图片
     image: {
       type: String,
-      default: defprops.loadingPage.image
+      default: () => defProps.loadingPage.image
     },
     // 加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形
     loadingMode: {
       type: String,
-      default: defprops.loadingPage.loadingMode
+      default: () => defProps.loadingPage.loadingMode
     },
     // 是否加载中
     loading: {
       type: Boolean,
-      default: defprops.loadingPage.loading
+      default: () => defProps.loadingPage.loading
     },
     // 背景色
     bgColor: {
       type: String,
-      default: defprops.loadingPage.bgColor
+      default: () => defProps.loadingPage.bgColor
     },
     // 文字颜色
     color: {
       type: String,
-      default: defprops.loadingPage.color
+      default: () => defProps.loadingPage.color
     },
     // 文字大小
     fontSize: {
       type: [String, Number],
-      default: defprops.loadingPage.fontSize
+      default: () => defProps.loadingPage.fontSize
     },
     // 图标大小
     iconSize: {
       type: [String, Number],
-      default: defprops.loadingPage.fontSize
+      default: () => defProps.loadingPage.fontSize
     },
     // 加载中图标的颜色，只能rgb或者十六进制颜色值
     loadingColor: {
       type: String,
-      default: defprops.loadingPage.loadingColor
+      default: () => defProps.loadingPage.loadingColor
+    },
+    // 层级
+    zIndex: {
+      type: [Number],
+      default: () => defProps.loadingPage.zIndex
     }
   }
-};
+});

package/uview-plus/components/u-loading-page/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;
@@ -23,7 +38,7 @@ view, scroll-view, swiper-item {
   justify-content: center;
   align-items: center;
   /* #ifndef APP-NVUE */
-  color: #c8c8c8;
+  color: rgb(200, 200, 200);
   font-size: 19px;
   /* #endif */
   /* #ifndef APP-NVUE */
@@ -40,5 +55,5 @@ view, scroll-view, swiper-item {
 }
 .u-loading-page__warpper__text {
   font-size: 19px;
-  color: #c8c8c8;
-}
+  color: rgb(200, 200, 200);
+}

package/uview-plus/components/u-loading-page/u-loading-page.vue

@@ -8,7 +8,9 @@
       right: 0,
       bottom: 0,
       backgroundColor: bgColor,
-      display: 'flex'
+      display: 'flex',
+      zIndex: zIndex,
+      ...customStyle
     }"
   >
     <view class="u-loading-page">
@@ -20,17 +22,17 @@
             class="u-loading-page__warpper__loading-icon__img"
             mode="widthFit"
             :style="{
-              width: $u.addUnit(iconSize),
-              height: $u.addUnit(iconSize)
+              width: addUnit(iconSize),
+              height: addUnit(iconSize)
             }"
           ></image>
-          <u-loading-icon v-else :mode="loadingMode" :size="$u.addUnit(iconSize)" :color="loadingColor"></u-loading-icon>
+          <u-loading-icon v-else :mode="loadingMode" :size="addUnit(iconSize)" :color="loadingColor"></u-loading-icon>
         </view>
         <slot>
           <text
             class="u-loading-page__warpper__text"
             :style="{
-              fontSize: $u.addUnit(fontSize),
+              fontSize: addUnit(fontSize),
               color: color
             }"
           >
@@ -42,9 +44,10 @@
   </u-transition>
 </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';
+import { addUnit } from '../../libs/function/index';
 /**
  * loadingPage 加载动画
  * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
@@ -58,6 +61,7 @@ import mixin from '../../libs/mixin/mixin.js';
  * @property {String | Number}	fontSize		文字大小 （默认 19 ）
  * @property {String | Number}	iconSize		图标大小 （默认 28 ）
  * @property {String}			loadingColor	加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ）
+ * @property {Number}			zIndex	        z-index层级 （默认10 ）
  * @property {Object}			customStyle		自定义样式
  * @example <u-loading mode="circle"></u-loading>
  */
@@ -67,7 +71,9 @@ export default {
   data() {
     return {};
   },
-  methods: {}
+  methods: {
+    addUnit
+  }
 };
 </script>
 <style scoped>

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

@@ -1,95 +1,96 @@
-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: {
     // 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
     status: {
       type: String,
-      default: defprops.loadmore.status
+      default: () => defProps.loadmore.status
     },
     // 组件背景色
     bgColor: {
       type: String,
-      default: defprops.loadmore.bgColor
+      default: () => defProps.loadmore.bgColor
     },
     // 是否显示加载中的图标
     icon: {
       type: Boolean,
-      default: defprops.loadmore.icon
+      default: () => defProps.loadmore.icon
     },
     // 字体大小
     fontSize: {
       type: [String, Number],
-      default: defprops.loadmore.fontSize
+      default: () => defProps.loadmore.fontSize
     },
     // 图标大小
     iconSize: {
       type: [String, Number],
-      default: defprops.loadmore.iconSize
+      default: () => defProps.loadmore.iconSize
     },
     // 字体颜色
     color: {
       type: String,
-      default: defprops.loadmore.color
+      default: () => defProps.loadmore.color
     },
     // 加载中状态的图标，spinner-花朵状图标，circle-圆圈状，semicircle-半圆
     loadingIcon: {
       type: String,
-      default: defprops.loadmore.loadingIcon
+      default: () => defProps.loadmore.loadingIcon
     },
     // 加载前的提示语
     loadmoreText: {
       type: String,
-      default: defprops.loadmore.loadmoreText
+      default: () => defProps.loadmore.loadmoreText
     },
     // 加载中提示语
     loadingText: {
       type: String,
-      default: defprops.loadmore.loadingText
+      default: () => defProps.loadmore.loadingText
     },
     // 没有更多的提示语
     nomoreText: {
       type: String,
-      default: defprops.loadmore.nomoreText
+      default: () => defProps.loadmore.nomoreText
     },
     // 在“没有更多”状态下，是否显示粗点
     isDot: {
       type: Boolean,
-      default: defprops.loadmore.isDot
+      default: () => defProps.loadmore.isDot
     },
     // 加载中图标的颜色
     iconColor: {
       type: String,
-      default: defprops.loadmore.iconColor
+      default: () => defProps.loadmore.iconColor
     },
     // 上边距
     marginTop: {
       type: [String, Number],
-      default: defprops.loadmore.marginTop
+      default: () => defProps.loadmore.marginTop
     },
     // 下边距
     marginBottom: {
       type: [String, Number],
-      default: defprops.loadmore.marginBottom
+      default: () => defProps.loadmore.marginBottom
     },
     // 高度，单位px
     height: {
       type: [String, Number],
-      default: defprops.loadmore.height
+      default: () => defProps.loadmore.height
     },
     // 是否显示左边分割线
     line: {
       type: Boolean,
-      default: defprops.loadmore.line
+      default: () => defProps.loadmore.line
     },
     // 线条颜色
     lineColor: {
       type: String,
-      default: defprops.loadmore.lineColor
+      default: () => defProps.loadmore.lineColor
     },
     // 是否虚线，true-虚线，false-实线
     dashed: {
       type: Boolean,
-      default: defprops.loadmore.dashed
+      default: () => defProps.loadmore.dashed
     }
   }
-};
+});

package/uview-plus/components/u-loadmore/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;
@@ -37,4 +52,4 @@ view, scroll-view, swiper-item {
 .u-loadmore__content__dot-text {
   font-size: 15px;
   color: var(--u-tips-color);
-}
+}

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

@@ -2,12 +2,12 @@
   <view
     class="u-loadmore"
     :style="[
-      $u.addStyle(customStyle),
+      addStyle(customStyle),
       {
         backgroundColor: bgColor,
-        marginBottom: $u.addUnit(marginBottom),
-        marginTop: $u.addUnit(marginTop),
-        height: $u.addUnit(height)
+        marginBottom: addUnit(marginBottom),
+        marginTop: addUnit(marginTop),
+        height: addUnit(height)
       }
     ]"
   >
@@ -31,9 +31,10 @@
   </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';
+import { addUnit, addStyle } from '../../libs/function/index';
 /**
  * loadmore 加载更多
  * @description 此组件一般用于标识页面底部加载数据时的状态。
@@ -73,8 +74,8 @@ export default {
     loadTextStyle() {
       return {
         color: this.color,
-        fontSize: uni.$u.addUnit(this.fontSize),
-        lineHeight: uni.$u.addUnit(this.fontSize),
+        fontSize: addUnit(this.fontSize),
+        lineHeight: addUnit(this.fontSize),
         backgroundColor: this.bgColor
       };
     },
@@ -88,7 +89,10 @@ export default {
       return text;
     }
   },
+  emits: ['loadmore'],
   methods: {
+    addStyle,
+    addUnit,
     loadMore() {
       // 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
       if (this.status == 'loadmore') this.$emit('loadmore');

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

@@ -0,0 +1,122 @@
+<template>
+	<view class="u-mask" hover-stop-propagation :style="[maskStyle, zoomStyle]" @tap="click" @touchmove.stop.prevent="() => {}" :class="{
+		'u-mask-zoom': zoom,
+		'u-mask-show': show
+	}">
+		<slot />
+	</view>
+</template>
+
+<script>
+	/**
+	 * mask 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://www.uviewui.com/components/mask.html
+	 * @property {Boolean} show 是否显示遮罩（默认false）
+	 * @property {String Number} z-index z-index 层级（默认1070）
+	 * @property {Object} custom-style 自定义样式对象，见上方说明
+	 * @property {String Number} duration 动画时长，单位毫秒（默认300）
+	 * @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
+	 * @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
+	 * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
+	 * @example <u-mask :show="show" @click="show = false"></u-mask>
+	 */
+	export default {
+		name: "u-mask",
+		props: {
+			// 是否显示遮罩
+			show: {
+				type: Boolean,
+				default: false
+			},
+			// 层级z-index
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			// 用户自定义样式
+			customStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
+			zoom: {
+				type: Boolean,
+				default: true
+			},
+			// 遮罩的过渡时间，单位为ms
+			duration: {
+				type: [Number, String],
+				default: 300
+			},
+			// 是否可以通过点击遮罩进行关闭
+			maskClickAble: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				zoomStyle: {
+					transform: ''
+				},
+				scale: 'scale(1.2, 1.2)'
+			}
+		},
+		watch: {
+			show(n) {
+				if(n && this.zoom) {
+					// 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
+					this.zoomStyle.transform = 'scale(1, 1)';
+				} else if(!n && this.zoom) {
+					// 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
+					this.zoomStyle.transform = this.scale;
+				}
+			}
+		},
+		computed: {
+			maskStyle() {
+				let style = {};
+				style.backgroundColor = "rgba(0, 0, 0, 0.6)";
+				if(this.show) style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
+				else style.zIndex = -1;
+				style.transition = `all ${this.duration / 1000}s ease-in-out`;
+				// 判断用户传递的对象是否为空，不为空就进行合并
+				if (Object.keys(this.customStyle).length) style = { 
+					...style,
+					...this.customStyle
+				};
+				return style;
+			}
+		},
+		methods: {
+			click() {
+				if (!this.maskClickAble) return;
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	
+	.u-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		opacity: 0;
+		transition: transform 0.3s;
+	}
+
+	.u-mask-show {
+		opacity: 1;
+	}
+	
+	.u-mask-zoom {
+		transform: scale(1.2, 1.2);
+	}
+</style>

package/uview-plus/{libs/config/props → components/u-modal}/modal.js

@@ -25,6 +25,10 @@ export default {
         closeOnClickOverlay: false,
         negativeTop: 0,
         width: '650rpx',
-        confirmButtonShape: ''
+        confirmButtonShape: '',
+        contentTextAlign: 'left',
+        asyncCloseTip: '操作中...',
+        asyncCancelClose: false,
+        contentStyle: {}
     }
 }

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

@@ -1,85 +1,106 @@
-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: {
     // 是否展示modal
     show: {
       type: Boolean,
-      default: defprops.modal.show
+      default: () => defProps.modal.show
     },
     // 标题
     title: {
       type: [String],
-      default: defprops.modal.title
+      default: () => defProps.modal.title
     },
     // 弹窗内容
     content: {
       type: String,
-      default: defprops.modal.content
+      default: () => defProps.modal.content
     },
     // 确认文案
     confirmText: {
       type: String,
-      default: defprops.modal.confirmText
+      default: () => defProps.modal.confirmText
     },
     // 取消文案
     cancelText: {
       type: String,
-      default: defprops.modal.cancelText
+      default: () => defProps.modal.cancelText
     },
     // 是否显示确认按钮
     showConfirmButton: {
       type: Boolean,
-      default: defprops.modal.showConfirmButton
+      default: () => defProps.modal.showConfirmButton
     },
     // 是否显示取消按钮
     showCancelButton: {
       type: Boolean,
-      default: defprops.modal.showCancelButton
+      default: () => defProps.modal.showCancelButton
     },
     // 确认按钮颜色
     confirmColor: {
       type: String,
-      default: defprops.modal.confirmColor
+      default: () => defProps.modal.confirmColor
     },
     // 取消文字颜色
     cancelColor: {
       type: String,
-      default: defprops.modal.cancelColor
+      default: () => defProps.modal.cancelColor
     },
     // 对调确认和取消的位置
     buttonReverse: {
       type: Boolean,
-      default: defprops.modal.buttonReverse
+      default: () => defProps.modal.buttonReverse
     },
     // 是否开启缩放效果
     zoom: {
       type: Boolean,
-      default: defprops.modal.zoom
+      default: () => defProps.modal.zoom
     },
     // 是否异步关闭，只对确定按钮有效
     asyncClose: {
       type: Boolean,
-      default: defprops.modal.asyncClose
+      default: () => defProps.modal.asyncClose
     },
     // 是否允许点击遮罩关闭modal
     closeOnClickOverlay: {
       type: Boolean,
-      default: defprops.modal.closeOnClickOverlay
+      default: () => defProps.modal.closeOnClickOverlay
     },
     // 给一个负的margin-top，往上偏移，避免和键盘重合的情况
     negativeTop: {
       type: [String, Number],
-      default: defprops.modal.negativeTop
+      default: () => defProps.modal.negativeTop
     },
     // modal宽度，不支持百分比，可以数值，px，rpx单位
     width: {
       type: [String, Number],
-      default: defprops.modal.width
+      default: () => defProps.modal.width
     },
     // 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮
     confirmButtonShape: {
       type: String,
-      default: defprops.modal.confirmButtonShape
+      default: () => defProps.modal.confirmButtonShape
+    },
+    // 文案对齐方式
+    contentTextAlign: {
+      type: String,
+      default: () => defProps.modal.contentTextAlign
+    },
+    // 异步确定时如果点击了取消时候的提示文案
+    asyncCloseTip: {
+      type: String,
+      default: () => defProps.modal.asyncCloseTip
+    },
+    // 是否异步关闭，只对取消按钮有效
+    asyncCancelClose: {
+      type: Boolean,
+      default: () => defProps.modal.asyncCancelClose
+    },
+    // 内容样式
+    contentStyle: {
+      type: Object,
+      default: () => defProps.modal.contentStyle
     }
   }
-};
+});

package/uview-plus/components/u-modal/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;
@@ -15,6 +30,10 @@ view, scroll-view, swiper-item {
   overflow: hidden;
 }
 .u-modal__title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   font-size: 16px;
   font-weight: bold;
   color: var(--u-content-color);
@@ -67,4 +86,4 @@ view, scroll-view, swiper-item {
   color: var(--u-content-color);
   font-size: 16px;
   text-align: center;
-}
+}