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

package/uview-plus/components/u-code/_doc/package.json

@@ -0,0 +1,86 @@
+{
+  "id": "u-code",
+  "displayName": "u-code 嵌入式验证码倒计时，全端兼容，无论平台，一致体验。",
+  "version": "1.0.2",
+  "description": "考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景",
+  "keywords": [
+    "u-ui",
+    "wuui",
+    "u-code",
+    "code",
+    "验证码"
+  ],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "n",
+          "快手": "n",
+          "飞书": "n",
+          "京东": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}

package/uview-plus/components/u-code/_doc/readme.md

@@ -0,0 +1,16 @@
+## u-code 验证码输入框
+
+> **组件名：u-code**
+
+考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景。
+
+## [查看文档](https://ijry.github.io/uview-plus/components/code.html)
+
+## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
+(请勿下载插件zip)
+
+<a href="https://ext.dcloud.net.cn/plugin?name=u--ui">
+	<img src="https://wuui.cn/intr.png">
+</a>
+
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**

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
     }
   }
-};
+});