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

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

@@ -1,18 +1,20 @@
-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: {
     // #ifdef VUE3
     // 绑定的值
     modelValue: {
       type: [String, Number],
-      default: defprops.input.value
+      default: () => defProps.input.value
     },
     // #endif
     // #ifdef VUE2
     // 绑定的值
     value: {
       type: [String, Number],
-      default: defprops.input.value
+      default: () => defProps.input.value
     },
     // #endif
     // number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数
@@ -21,171 +23,171 @@ export default {
     // text-文本输入键盘
     type: {
       type: String,
-      default: defprops.input.type
+      default: () => defProps.input.type
     },
     // 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，
     // 兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序
     fixed: {
       type: Boolean,
-      default: defprops.input.fixed
+      default: () => defProps.input.fixed
     },
     // 是否禁用输入框
     disabled: {
       type: Boolean,
-      default: defprops.input.disabled
+      default: () => defProps.input.disabled
     },
     // 禁用状态时的背景色
     disabledColor: {
       type: String,
-      default: defprops.input.disabledColor
+      default: () => defProps.input.disabledColor
     },
     // 是否显示清除控件
     clearable: {
       type: Boolean,
-      default: defprops.input.clearable
+      default: () => defProps.input.clearable
     },
     // 是否密码类型
     password: {
       type: Boolean,
-      default: defprops.input.password
+      default: () => defProps.input.password
     },
     // 最大输入长度，设置为 -1 的时候不限制最大长度
     maxlength: {
       type: [String, Number],
-      default: defprops.input.maxlength
+      default: () => defProps.input.maxlength
     },
     // 	输入框为空时的占位符
     placeholder: {
       type: String,
-      default: defprops.input.placeholder
+      default: () => defProps.input.placeholder
     },
     // 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
     placeholderClass: {
       type: String,
-      default: defprops.input.placeholderClass
+      default: () => defProps.input.placeholderClass
     },
     // 指定placeholder的样式
     placeholderStyle: {
       type: [String, Object],
-      default: defprops.input.placeholderStyle
+      default: () => defProps.input.placeholderStyle
     },
     // 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效
     showWordLimit: {
       type: Boolean,
-      default: defprops.input.showWordLimit
+      default: () => defProps.input.showWordLimit
     },
     // 设置右下角按钮的文字，有效值：send|search|next|go|done，兼容性详见uni-app文档
     // https://uniapp.dcloud.io/component/input
     // https://uniapp.dcloud.io/component/textarea
     confirmType: {
       type: String,
-      default: defprops.input.confirmType
+      default: () => defProps.input.confirmType
     },
     // 点击键盘右下角按钮时是否保持键盘不收起，H5无效
     confirmHold: {
       type: Boolean,
-      default: defprops.input.confirmHold
+      default: () => defProps.input.confirmHold
     },
     // focus时，点击页面的时候不收起键盘，微信小程序有效
     holdKeyboard: {
       type: Boolean,
-      default: defprops.input.holdKeyboard
+      default: () => defProps.input.holdKeyboard
     },
     // 自动获取焦点
     // 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点
     focus: {
       type: Boolean,
-      default: defprops.input.focus
+      default: () => defProps.input.focus
     },
     // 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效
     autoBlur: {
       type: Boolean,
-      default: defprops.input.autoBlur
+      default: () => defProps.input.autoBlur
     },
     // 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效
     disableDefaultPadding: {
       type: Boolean,
-      default: defprops.input.disableDefaultPadding
+      default: () => defProps.input.disableDefaultPadding
     },
     // 指定focus时光标的位置
     cursor: {
       type: [String, Number],
-      default: defprops.input.cursor
+      default: () => defProps.input.cursor
     },
     // 输入框聚焦时底部与键盘的距离
     cursorSpacing: {
       type: [String, Number],
-      default: defprops.input.cursorSpacing
+      default: () => defProps.input.cursorSpacing
     },
     // 光标起始位置，自动聚集时有效，需与selection-end搭配使用
     selectionStart: {
       type: [String, Number],
-      default: defprops.input.selectionStart
+      default: () => defProps.input.selectionStart
     },
     // 光标结束位置，自动聚集时有效，需与selection-start搭配使用
     selectionEnd: {
       type: [String, Number],
-      default: defprops.input.selectionEnd
+      default: () => defProps.input.selectionEnd
     },
     // 键盘弹起时，是否自动上推页面
     adjustPosition: {
       type: Boolean,
-      default: defprops.input.adjustPosition
+      default: () => defProps.input.adjustPosition
     },
     // 输入框内容对齐方式，可选值为：left|center|right
     inputAlign: {
       type: String,
-      default: defprops.input.inputAlign
+      default: () => defProps.input.inputAlign
     },
     // 输入框字体的大小
     fontSize: {
       type: [String, Number],
-      default: defprops.input.fontSize
+      default: () => defProps.input.fontSize
     },
     // 输入框字体颜色
     color: {
       type: String,
-      default: defprops.input.color
+      default: () => defProps.input.color
     },
     // 输入框前置图标
     prefixIcon: {
       type: String,
-      default: defprops.input.prefixIcon
+      default: () => defProps.input.prefixIcon
     },
     // 前置图标样式，对象或字符串
     prefixIconStyle: {
       type: [String, Object],
-      default: defprops.input.prefixIconStyle
+      default: () => defProps.input.prefixIconStyle
     },
     // 输入框后置图标
     suffixIcon: {
       type: String,
-      default: defprops.input.suffixIcon
+      default: () => defProps.input.suffixIcon
     },
     // 后置图标样式，对象或字符串
     suffixIconStyle: {
       type: [String, Object],
-      default: defprops.input.suffixIconStyle
+      default: () => defProps.input.suffixIconStyle
     },
     // 边框类型，surround-四周边框，bottom-底部边框，none-无边框
     border: {
       type: String,
-      default: defprops.input.border
+      default: () => defProps.input.border
     },
     // 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会
     readonly: {
       type: Boolean,
-      default: defprops.input.readonly
+      default: () => defProps.input.readonly
     },
     // 输入框形状，circle-圆形，square-方形
     shape: {
       type: String,
-      default: defprops.input.shape
+      default: () => defProps.input.shape
     },
     // 用于处理或者过滤输入框内容的方法
     formatter: {
       type: [Function, null],
-      default: defprops.input.formatter
+      default: () => defProps.input.formatter
     },
     // 是否忽略组件内对文本合成系统事件的处理
     ignoreCompositionEvent: {
@@ -193,4 +195,4 @@ export default {
       default: true
     }
   }
-};
+});

package/uview-plus/components/u-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;
@@ -72,4 +87,4 @@ view, scroll-view, swiper-item {
 }
 .u-input__content__prefix-icon {
   margin-right: 4px;
-}
+}

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

@@ -11,6 +11,7 @@
 					为了防止type=number时，又存在password属性，type无效，此时需要设置password为undefined
 				 -->
         <input
+          ref="input-native"
           class="u-input__content__field-wrapper__field"
           :style="[inputStyle]"
           :type="type"
@@ -30,13 +31,14 @@
           :adjust-position="adjustPosition"
           :selection-end="selectionEnd"
           :selection-start="selectionStart"
-          :password="password || type === 'password' || undefined"
+          :password="password || type === 'password' || false"
           :ignoreCompositionEvent="ignoreCompositionEvent"
           @input="onInput"
           @blur="onBlur"
           @focus="onFocus"
           @confirm="onConfirm"
           @keyboardheightchange="onkeyboardheightchange"
+          @nicknamereview="onnicknamereview"
         />
       </view>
       <view class="u-input__content__clear" v-if="isShowClear" @click="onClear">
@@ -51,13 +53,15 @@
   </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.js';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { debounce } from '../../libs/function/debounce';
+import { addStyle, addUnit, deepMerge, formValidate, $parent, sleep, os } from '../../libs/function/index';
 /**
  * Input 输入框
  * @description  此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
- * @tutorial https://uviewui.com/components/input.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/input.html
  * @property {String | Number}	value					输入的值
  * @property {String}			type					输入框类型，见上方说明 （ 默认 'text' ）
  * @property {Boolean}			fixed					如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 （ 默认 false ）
@@ -65,7 +69,7 @@ import mixin from '../../libs/mixin/mixin.js';
  * @property {String}			disabledColor			禁用状态时的背景色（ 默认 '#f5f7fa' ）
  * @property {Boolean}			clearable				是否显示清除控件 （ 默认 false ）
  * @property {Boolean}			password				是否密码类型 （ 默认 false ）
- * @property {String | Number}	maxlength				最大输入长度，设置为 -1 的时候不限制最大长度 （ 默认 -1 ）
+ * @property {Number}       	maxlength				最大输入长度，设置为 -1 的时候不限制最大长度 （ 默认 -1 ）
  * @property {String}			placeholder				输入框为空时的占位符
  * @property {String}			placeholderClass		指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ （ 默认 'input-placeholder' ）
  * @property {String | Object}	placeholderStyle		指定placeholder的样式，字符串/对象形式，如"color: red;"
@@ -76,7 +80,7 @@ import mixin from '../../libs/mixin/mixin.js';
  * @property {Boolean}			focus					自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 （ 默认 false ）
  * @property {Boolean}			autoBlur				键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 （ 默认 false ）
  * @property {Boolean}			disableDefaultPadding	是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 （ 默认 false ）
- * @property {String ｜ Number}	cursor					指定focus时光标的位置（ 默认 -1 ）
+ * @property {String ｜ Number}	cursor					指定focus时光标的位置（ 默认 140 ）
  * @property {String ｜ Number}	cursorSpacing			输入框聚焦时底部与键盘的距离 （ 默认 30 ）
  * @property {String ｜ Number}	selectionStart			光标起始位置，自动聚集时有效，需与selection-end搭配使用 （ 默认 -1 ）
  * @property {String ｜ Number}	selectionEnd			光标结束位置，自动聚集时有效，需与selection-start搭配使用 （ 默认 -1 ）
@@ -101,6 +105,8 @@ export default {
   mixins: [mpMixin, mixin, props],
   data() {
     return {
+      // 清除操作
+      clearInput: false,
       // 输入框的值
       innerValue: '',
       // 是否处于获得焦点状态
@@ -113,41 +119,34 @@ export default {
       innerFormatter: (value) => value
     };
   },
+  created() {
+    // 格式化过滤方法
+    if (this.formatter) {
+      this.innerFormatter = this.formatter;
+    }
+  },
   watch: {
-    // #ifdef VUE3
     modelValue: {
       immediate: true,
       handler(newVal, oldVal) {
-        this.innerValue = newVal;
-        /* #ifdef H5 */
-        // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
-        if (this.firstChange === false && this.changeFromInner === false) {
-          this.valueChange();
+        // console.log(newVal, oldVal)
+        if (this.changeFromInner || this.innerValue === newVal) {
+          this.changeFromInner = false; // 重要否则会出现双向绑定失效问题https://github.com/ijry/uview-plus/issues/419
+          return;
         }
-        /* #endif */
-        this.firstChange = false;
-        // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
-        this.changeFromInner = false;
-      }
-    },
-    // #endif
-    // #ifdef VUE2
-    value: {
-      immediate: true,
-      handler(newVal, oldVal) {
         this.innerValue = newVal;
-        /* #ifdef H5 */
         // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
         if (this.firstChange === false && this.changeFromInner === false) {
-          this.valueChange();
+          this.valueChange(this.innerValue, true);
+        } else {
+          // 尝试调用up-form的验证方法
+          if (!this.firstChange) formValidate(this, 'change');
         }
-        /* #endif */
         this.firstChange = false;
         // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
         this.changeFromInner = false;
       }
     }
-    // #endif
   },
   computed: {
     // 是否显示清除控件
@@ -181,20 +180,20 @@ export default {
         style.paddingLeft = '9px';
         style.paddingRight = '9px';
       }
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     },
     // 输入框的样式
     inputStyle() {
       const style = {
         color: this.color,
-        fontSize: uni.$u.addUnit(this.fontSize),
+        fontSize: addUnit(this.fontSize),
         textAlign: this.inputAlign
       };
       return style;
     }
   },
   // #ifdef VUE3
-  emits: ['update:modelValue', 'focus', 'blur', 'change', 'confirm', 'clear', 'keyboardheightchange'],
+  emits: ['update:modelValue', 'focus', 'blur', 'change', 'confirm', 'clear', 'keyboardheightchange', 'nicknamereview'],
   // #endif
   methods: {
     // 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
@@ -204,14 +203,13 @@ export default {
     // 当键盘输入时，触发input事件
     onInput(e) {
       let { value = '' } = e.detail || {};
-      // 格式化过滤方法
-      const formatter = this.formatter || this.innerFormatter;
-      const formatValue = formatter(value);
       // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
+      // console.log('onInput', value, this.innerValue)
       this.innerValue = value;
       this.$nextTick(() => {
+        let formatValue = this.innerFormatter(value);
         this.innerValue = formatValue;
-        this.valueChange();
+        this.valueChange(formatValue);
       });
     },
     // 输入框失去焦点时触发
@@ -219,48 +217,63 @@ export default {
       this.$emit('blur', event.detail.value);
       // H5端的blur会先于点击清除控件的点击click事件触发，导致focused
       // 瞬间为false，从而隐藏了清除控件而无法被点击到
-      uni.$u.sleep(50).then(() => {
+      sleep(150).then(() => {
         this.focused = false;
       });
       // 尝试调用u-form的验证方法
-      uni.$u.formValidate(this, 'blur');
+      formValidate(this, 'blur');
     },
     // 输入框聚焦时触发
     onFocus(event) {
       this.focused = true;
       this.$emit('focus');
     },
+    doFocus() {
+      this.$refs['input-native'].focus();
+    },
+    doBlur() {
+      this.$refs['input-native'].blur();
+    },
     // 点击完成按钮时触发
     onConfirm(event) {
       this.$emit('confirm', this.innerValue);
     },
     // 键盘高度发生变化的时候触发此事件
     // 兼容性：微信小程序2.7.0+、App 3.1.0+
-    onkeyboardheightchange() {
-      this.$emit('keyboardheightchange');
+    onkeyboardheightchange(event) {
+      this.$emit('keyboardheightchange', event);
+    },
+    onnicknamereview(event) {
+      this.$emit('nicknamereview', event);
     },
     // 内容发生变化，进行处理
-    valueChange() {
-      const value = this.innerValue;
+    valueChange(value, isOut = false) {
+      if (this.clearInput) {
+        this.innerValue = '';
+        this.clearInput = false;
+      }
       this.$nextTick(() => {
-        // #ifdef VUE3
-        this.$emit('update:modelValue', value);
-        // #endif
-        // #ifdef VUE2
-        this.$emit('input', value);
-        // #endif
-        // 标识value值的变化是由内部引起的
-        this.changeFromInner = true;
-        this.$emit('change', value);
+        if (!isOut || this.clearInput) {
+          // 标识value值的变化是由内部引起的
+          this.changeFromInner = true;
+          this.$emit('change', value);
+          // #ifdef VUE3
+          this.$emit('update:modelValue', value);
+          // #endif
+          // #ifdef VUE2
+          this.$emit('input', value);
+          // #endif
+        }
         // 尝试调用u-form的验证方法
-        uni.$u.formValidate(this, 'change');
+        formValidate(this, 'change');
       });
     },
     // 点击清除控件
     onClear() {
+      this.clearInput = true;
       this.innerValue = '';
       this.$nextTick(() => {
-        this.valueChange();
+        this.valueChange('');
         this.$emit('clear');
       });
     },
@@ -270,9 +283,12 @@ export default {
      * 无法触发u-form-item的点击事件，这里通过手动调用u-form-item的方法进行触发
      */
     clickHandler() {
+      if (this.disabled || this.readonly) {
+        uni.hideKeyboard();
+      }
       // #ifdef APP-NVUE
-      if (uni.$u.os() === 'android') {
-        const formItem = uni.$u.$parent.call(this, 'u-form-item');
+      if (os() === 'android') {
+        const formItem = $parent.call(this, 'u-form-item');
         if (formItem) {
           formItem.clickHandler();
         }

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

@@ -1,85 +1,86 @@
-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: {
     // 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘
     mode: {
       type: String,
-      default: defprops.keyboard.mode
+      default: () => defProps.keyboard.mode
     },
     // 是否显示键盘的"."符号
     dotDisabled: {
       type: Boolean,
-      default: defprops.keyboard.dotDisabled
+      default: () => defProps.keyboard.dotDisabled
     },
     // 是否显示顶部工具条
     tooltip: {
       type: Boolean,
-      default: defprops.keyboard.tooltip
+      default: () => defProps.keyboard.tooltip
     },
     // 是否显示工具条中间的提示
     showTips: {
       type: Boolean,
-      default: defprops.keyboard.showTips
+      default: () => defProps.keyboard.showTips
     },
     // 工具条中间的提示文字
     tips: {
       type: String,
-      default: defprops.keyboard.tips
+      default: () => defProps.keyboard.tips
     },
     // 是否显示工具条左边的"取消"按钮
     showCancel: {
       type: Boolean,
-      default: defprops.keyboard.showCancel
+      default: () => defProps.keyboard.showCancel
     },
     // 是否显示工具条右边的"完成"按钮
     showConfirm: {
       type: Boolean,
-      default: defprops.keyboard.showConfirm
+      default: () => defProps.keyboard.showConfirm
     },
     // 是否打乱键盘按键的顺序
     random: {
       type: Boolean,
-      default: defprops.keyboard.random
+      default: () => defProps.keyboard.random
     },
     // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
     safeAreaInsetBottom: {
       type: Boolean,
-      default: defprops.keyboard.safeAreaInsetBottom
+      default: () => defProps.keyboard.safeAreaInsetBottom
     },
     // 是否允许通过点击遮罩关闭键盘
     closeOnClickOverlay: {
       type: Boolean,
-      default: defprops.keyboard.closeOnClickOverlay
+      default: () => defProps.keyboard.closeOnClickOverlay
     },
     // 控制键盘的弹出与收起
     show: {
       type: Boolean,
-      default: defprops.keyboard.show
+      default: () => defProps.keyboard.show
     },
     // 是否显示遮罩，某些时候数字键盘时，用户希望看到自己的数值，所以可能不想要遮罩
     overlay: {
       type: Boolean,
-      default: defprops.keyboard.overlay
+      default: () => defProps.keyboard.overlay
     },
     // z-index值
     zIndex: {
       type: [String, Number],
-      default: defprops.keyboard.zIndex
+      default: () => defProps.keyboard.zIndex
     },
     // 取消按钮的文字
     cancelText: {
       type: String,
-      default: defprops.keyboard.cancelText
+      default: () => defProps.keyboard.cancelText
     },
     // 确认按钮的文字
     confirmText: {
       type: String,
-      default: defprops.keyboard.confirmText
+      default: () => defProps.keyboard.confirmText
     },
     // 输入一个中文后，是否自动切换到英文
     autoChange: {
       type: Boolean,
-      default: defprops.keyboard.autoChange
+      default: () => defProps.keyboard.autoChange
     }
   }
-};
+});

package/uview-plus/components/u-keyboard/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;
@@ -34,4 +49,4 @@ view, scroll-view, swiper-item {
 }
 .u-keyboard__tooltip__tips {
   color: var(--u-tips-color);
-}
+}