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

package/uview-plus/components/u-circle-progress/u-circle-progress.vue

@@ -10,9 +10,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 { sleep } from '../../libs/function/index';
 // #ifdef APP-NVUE
 const animation = uni.requireNativePlugin('animation');
 // #endif
@@ -47,7 +48,7 @@ export default {
     }
   },
   mounted() {
-    uni.$u.sleep().then(() => {
+    sleep().then(() => {
       this.rightBorderColor = 'rgb(66, 185, 131)';
       // this.init()
     });

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

@@ -1,35 +1,36 @@
-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: {
     // 倒计时总秒数
     seconds: {
       type: [String, Number],
-      default: defprops.code.seconds
+      default: () => defProps.code.seconds
     },
     // 尚未开始时提示
     startText: {
       type: String,
-      default: defprops.code.startText
+      default: () => defProps.code.startText
     },
     // 正在倒计时中的提示
     changeText: {
       type: String,
-      default: defprops.code.changeText
+      default: () => defProps.code.changeText
     },
     // 倒计时结束时的提示
     endText: {
       type: String,
-      default: defprops.code.endText
+      default: () => defProps.code.endText
     },
     // 是否在H5刷新或各端返回再进入时继续倒计时
     keepRunning: {
       type: Boolean,
-      default: defprops.code.keepRunning
+      default: () => defProps.code.keepRunning
     },
     // 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
     uniqueKey: {
       type: String,
-      default: defprops.code.uniqueKey
+      default: () => defProps.code.uniqueKey
     }
   }
-};
+});

package/uview-plus/components/u-code/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;
@@ -8,4 +23,4 @@ view, scroll-view, swiper-item {
   align-items: stretch;
   align-content: flex-start;
 }
-/* #endif */
+/* #endif */

package/uview-plus/components/u-code/u-code.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';
 /**
  * Code 验证码输入框
  * @description 考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景
@@ -44,6 +44,7 @@ export default {
       }
     }
   },
+  emits: ['start', 'end', 'change'],
   methods: {
     checkKeepRunning() {
       // 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
@@ -75,7 +76,6 @@ export default {
       this.canGetCode = false;
       // 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
       this.changeEvent(this.changeText.replace(/x|X/, this.secNum));
-      this.setTimeToStorage();
       this.timer = setInterval(() => {
         if (--this.secNum) {
           // 用当前倒计时的秒数替换提示字符串中的"x"字母
@@ -89,6 +89,7 @@ export default {
           this.canGetCode = true;
         }
       }, 1000);
+      this.setTimeToStorage();
     },
     // 重置，可以让用户再次获取验证码
     reset() {
@@ -117,7 +118,7 @@ export default {
     }
   },
   // 组件销毁的时候，清除定时器，否则定时器会继续存在，系统不会自动清除
-  beforeDestroy() {
+  beforeUnmount() {
     this.setTimeToStorage();
     clearTimeout(this.timer);
     this.timer = null;

package/uview-plus/components/u-code-input/props.js

@@ -1,80 +1,90 @@
-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: {
     // 键盘弹起时，是否自动上推页面
     adjustPosition: {
       type: Boolean,
-      default: defprops.codeInput.adjustPosition
+      default: () => defProps.codeInput.adjustPosition
     },
     // 最大输入长度
     maxlength: {
       type: [String, Number],
-      default: defprops.codeInput.maxlength
+      default: () => defProps.codeInput.maxlength
     },
     // 是否用圆点填充
     dot: {
       type: Boolean,
-      default: defprops.codeInput.dot
+      default: () => defProps.codeInput.dot
     },
     // 显示模式，box-盒子模式，line-底部横线模式
     mode: {
       type: String,
-      default: defprops.codeInput.mode
+      default: () => defProps.codeInput.mode
     },
     // 是否细边框
     hairline: {
       type: Boolean,
-      default: defprops.codeInput.hairline
+      default: () => defProps.codeInput.hairline
     },
     // 字符间的距离
     space: {
       type: [String, Number],
-      default: defprops.codeInput.space
+      default: () => defProps.codeInput.space
     },
+    // #ifdef VUE3
+    // 预置值
+    modelValue: {
+      type: [String, Number],
+      default: () => defProps.codeInput.value
+    },
+    // #endif
+    // #ifdef VUE2
     // 预置值
     value: {
       type: [String, Number],
-      default: defprops.codeInput.value
+      default: () => defProps.codeInput.value
     },
+    // #endif
     // 是否自动获取焦点
     focus: {
       type: Boolean,
-      default: defprops.codeInput.focus
+      default: () => defProps.codeInput.focus
     },
     // 字体是否加粗
     bold: {
       type: Boolean,
-      default: defprops.codeInput.bold
+      default: () => defProps.codeInput.bold
     },
     // 字体颜色
     color: {
       type: String,
-      default: defprops.codeInput.color
+      default: () => defProps.codeInput.color
     },
     // 字体大小
     fontSize: {
       type: [String, Number],
-      default: defprops.codeInput.fontSize
+      default: () => defProps.codeInput.fontSize
     },
     // 输入框的大小，宽等于高
     size: {
       type: [String, Number],
-      default: defprops.codeInput.size
+      default: () => defProps.codeInput.size
     },
     // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
     disabledKeyboard: {
       type: Boolean,
-      default: defprops.codeInput.disabledKeyboard
+      default: () => defProps.codeInput.disabledKeyboard
     },
     // 边框和线条颜色
     borderColor: {
       type: String,
-      default: defprops.codeInput.borderColor
+      default: () => defProps.codeInput.borderColor
     },
     // 是否禁止输入"."符号
     disabledDot: {
       type: Boolean,
-      default: defprops.codeInput.disabledDot
+      default: () => defProps.codeInput.disabledDot
     }
   }
-};
+});

package/uview-plus/components/u-code-input/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;
@@ -25,8 +40,6 @@ view, scroll-view, swiper-item {
   justify-content: center;
   align-items: center;
   position: relative;
-  /* #ifndef APP-PLUS */
-  /* #endif */
 }
 .u-code-input__item__text {
   font-size: 15px;
@@ -48,11 +61,14 @@ view, scroll-view, swiper-item {
 }
 .u-code-input__item__cursor {
   position: absolute;
+  /* #ifndef APP-NVUE */
   top: 50%;
   left: 50%;
+  opacity: 1;
   transform: translate(-50%, -50%);
+  /* #endif */
   width: 1px;
-  height: 40%;
+  height: 20px;
   animation: 1s u-cursor-flicker infinite;
 }
 .u-code-input__input {
@@ -63,7 +79,7 @@ view, scroll-view, swiper-item {
   background-color: transparent;
   text-align: left;
 }
-/* #ifndef APP-PLUS */
+/* #ifndef APP-NVUE */
 @keyframes u-cursor-flicker {
   0% {
     opacity: 0;
@@ -75,4 +91,4 @@ view, scroll-view, swiper-item {
     opacity: 0;
   }
 }
-/* #endif */
+/* #endif */

package/uview-plus/components/u-code-input/style.scss

@@ -1,6 +1,6 @@
 @import '../../libs/css/components.scss';
 $u-code-input-cursor-width: 1px;
-$u-code-input-cursor-height: 40%;
+$u-code-input-cursor-height: 20px;
 $u-code-input-cursor-animation-duration: 1s;
 $u-code-input-cursor-animation-name: u-cursor-flicker;
 
@@ -35,17 +35,18 @@ $u-code-input-cursor-animation-name: u-cursor-flicker;
       width: 40px;
       background-color: $u-content-color;
     }
-    /* #ifndef APP-PLUS */
     &__cursor {
       position: absolute;
+      /* #ifndef APP-NVUE */
       top: 50%;
       left: 50%;
+      opacity: 1;
       transform: translate(-50%, -50%);
+      /* #endif */
       width: $u-code-input-cursor-width;
       height: $u-code-input-cursor-height;
       animation: $u-code-input-cursor-animation-duration u-cursor-flicker infinite;
     }
-    /* #endif */
   }
 
   &__input {
@@ -60,7 +61,7 @@ $u-code-input-cursor-animation-name: u-cursor-flicker;
   }
 }
 
-/* #ifndef APP-PLUS */
+/* #ifndef APP-NVUE */
 @keyframes u-cursor-flicker {
   0% {
     opacity: 0;

package/uview-plus/components/u-code-input/u-code-input.vue

@@ -5,7 +5,7 @@
       <text
         v-else
         :style="{
-          fontSize: $u.addUnit(fontSize),
+          fontSize: addUnit(fontSize),
           fontWeight: bold ? 'bold' : 'normal',
           color: color
         }"
@@ -13,13 +13,20 @@
         {{ codeArray[index] }}
       </text>
       <view class="u-code-input__item__line" v-if="mode === 'line'" :style="[lineStyle]"></view>
-      <!-- #ifndef APP-PLUS -->
+      <!-- #ifndef APP-NVUE -->
       <view
         v-if="isFocus && codeArray.length === index"
         :style="{ backgroundColor: color }"
         class="u-code-input__item__cursor"
       ></view>
       <!-- #endif -->
+      <!-- #ifdef APP-NVUE -->
+      <view
+        v-if="isFocus && codeArray.length === index"
+        :style="{ backgroundColor: color, opacity: opacity }"
+        class="u-code-input__item__cursor"
+      ></view>
+      <!-- #endif -->
     </view>
     <input
       :disabled="disabledKeyboard"
@@ -31,7 +38,7 @@
       class="u-code-input__input"
       @input="inputHandler"
       :style="{
-        height: $u.addUnit(size)
+        height: addUnit(size)
       }"
       @focus="isFocus = true"
       @blur="isFocus = false"
@@ -39,12 +46,13 @@
   </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, getPx } from '../../libs/function/index';
 /**
  * CodeInput 验证码输入
- * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
+ * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uview-plus的键盘组件使用
  * @tutorial https://ijry.github.io/uview-plus/components/codeInput.html
  * @property {String | Number}	maxlength			最大输入长度 （默认 6 ）
  * @property {Boolean}			dot					是否用圆点填充 （默认 false ）
@@ -71,18 +79,50 @@ export default {
   data() {
     return {
       inputValue: '',
-      isFocus: this.focus
+      isFocus: this.focus,
+      timer: null,
+      opacity: 1
     };
   },
   watch: {
+    // #ifdef VUE2
     value: {
       immediate: true,
       handler(val) {
         // 转为字符串，超出部分截掉
         this.inputValue = String(val).substring(0, this.maxlength);
       }
+    },
+    // #endif
+    // #ifdef VUE3
+    modelValue: {
+      immediate: true,
+      handler(val) {
+        // 转为字符串，超出部分截掉
+        this.inputValue = String(val).substring(0, this.maxlength);
+      }
+    },
+    // #endif
+    isFocus: {
+      handler(val) {
+        // #ifdef APP-NVUE
+        if (val) {
+          this.timer = setInterval(() => {
+            this.opacity = Math.abs(this.opacity - 1);
+          }, 600);
+        } else {
+          clearInterval(this.timer);
+        }
+        // #endif
+      }
     }
   },
+  created() {},
+  beforeUnmount() {
+    // #ifdef APP-NVUE
+    clearInterval(this.timer);
+    // #endif
+  },
   computed: {
     // 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
     codeLength() {
@@ -91,7 +131,6 @@ export default {
     // 循环item的样式
     itemStyle() {
       return (index) => {
-        const addUnit = uni.$u.addUnit;
         const style = {
           width: addUnit(this.size),
           height: addUnit(this.size)
@@ -101,7 +140,7 @@ export default {
           // 设置盒子的边框，如果是细边框，则设置为0.5px宽度
           style.border = `${this.hairline ? 0.5 : 1}px solid ${this.borderColor}`;
           // 如果盒子间距为0的话
-          if (uni.$u.getPx(this.space) === 0) {
+          if (getPx(this.space) === 0) {
             // 给第一和最后一个盒子设置圆角
             if (index === 0) {
               style.borderTopLeftRadius = '3px';
@@ -135,13 +174,15 @@ export default {
     lineStyle() {
       const style = {};
       style.height = this.hairline ? '2px' : '4px';
-      style.width = uni.$u.addUnit(this.size);
+      style.width = addUnit(this.size);
       // 线条模式下，背景色即为边框颜色
       style.backgroundColor = this.borderColor;
       return style;
     }
   },
+  emits: ['change', 'finish', 'update:modelValue'],
   methods: {
+    addUnit,
     // 监听输入框的值发生变化
     inputHandler(e) {
       const value = e.detail.value;
@@ -155,7 +196,12 @@ export default {
       // 未达到maxlength之前，发送change事件，达到后发送finish事件
       this.$emit('change', value);
       // 修改通过v-model双向绑定的值
+      // #ifdef VUE3
+      this.$emit('update:modelValue', value);
+      // #endif
+      // #ifdef VUE2
       this.$emit('input', value);
+      // #endif
       // 达到用户指定输入长度时，发出完成事件
       if (String(value).length >= Number(this.maxlength)) {
         this.$emit('finish', value);

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

@@ -1,30 +1,31 @@
-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: {
     // 占父容器宽度的多少等分，总分为12份
     span: {
       type: [String, Number],
-      default: defprops.col.span
+      default: () => defProps.col.span
     },
     // 指定栅格左侧的间隔数(总12栏)
     offset: {
       type: [String, Number],
-      default: defprops.col.offset
+      default: () => defProps.col.offset
     },
     // 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
     justify: {
       type: String,
-      default: defprops.col.justify
+      default: () => defProps.col.justify
     },
     // 垂直对齐方式，可选值为top、center、bottom、stretch
     align: {
       type: String,
-      default: defprops.col.align
+      default: () => defProps.col.align
     },
     // 文字对齐方式
     textAlign: {
       type: String,
-      default: defprops.col.textAlign
+      default: () => defProps.col.textAlign
     }
   }
-};
+});

package/uview-plus/components/u-col/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,39 +38,39 @@ view, scroll-view, swiper-item {
   width: 0;
 }
 .u-col-1 {
-  width: calc(100% / 12);
+  width: 8.3333333333%;
 }
 .u-col-2 {
-  width: calc(100% / 12 * 2);
+  width: 16.6666666667%;
 }
 .u-col-3 {
-  width: calc(100% / 12 * 3);
+  width: 25%;
 }
 .u-col-4 {
-  width: calc(100% / 12 * 4);
+  width: 33.3333333333%;
 }
 .u-col-5 {
-  width: calc(100% / 12 * 5);
+  width: 41.6666666667%;
 }
 .u-col-6 {
-  width: calc(100% / 12 * 6);
+  width: 50%;
 }
 .u-col-7 {
-  width: calc(100% / 12 * 7);
+  width: 58.3333333333%;
 }
 .u-col-8 {
-  width: calc(100% / 12 * 8);
+  width: 66.6666666667%;
 }
 .u-col-9 {
-  width: calc(100% / 12 * 9);
+  width: 75%;
 }
 .u-col-10 {
-  width: calc(100% / 12 * 10);
+  width: 83.3333333333%;
 }
 .u-col-11 {
-  width: calc(100% / 12 * 11);
+  width: 91.6666666667%;
 }
 .u-col-12 {
-  width: calc(100% / 12 * 12);
+  width: 100%;
 }
-/* #endif */
+/* #endif */

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

@@ -4,9 +4,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 { addStyle, addUnit, deepMerge, getPx } from '../../libs/function/index';
 /**
  * CodeInput 栅格系统的列
  * @description 该组件一般用于Layout 布局 通过基础的 12 分栏，迅速简便地创建布局
@@ -50,8 +51,8 @@ export default {
     colStyle() {
       const style = {
         // 这里写成"padding: 0 10px"的形式是因为nvue的需要
-        paddingLeft: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter) / 2),
-        paddingRight: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter) / 2),
+        paddingLeft: addUnit(getPx(this.parentData.gutter) / 2),
+        paddingRight: addUnit(getPx(this.parentData.gutter) / 2),
         alignItems: this.uAlignItem,
         justifyContent: this.uJustify,
         textAlign: this.textAlign,
@@ -62,16 +63,17 @@ export default {
         // #endif
         // #ifdef APP-NVUE
         // 在nvue上，由于无法使用百分比单位，这里需要获取父组件的宽度，再计算得出该有对应的百分比尺寸
-        width: uni.$u.addUnit(Math.floor((this.width / this.gridNum) * Number(this.span))),
-        marginLeft: uni.$u.addUnit(Math.floor((this.width / this.gridNum) * Number(this.offset)))
+        width: addUnit(Math.floor((this.width / this.gridNum) * Number(this.span))),
+        marginLeft: addUnit(Math.floor((this.width / this.gridNum) * Number(this.offset)))
         // #endif
       };
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     }
   },
   mounted() {
     this.init();
   },
+  emits: ['click'],
   methods: {
     async init() {
       // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用