From 759b34eaa9d10fb37a4d7b485afc4c836f41cd83 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Tue, 8 Jun 2021 15:18:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(docs):=20input=E7=BB=84=E4=BB=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0verifyNumber=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/input.md                  |  5 +++
 src/core/view/components/input/index.vue | 40 +++++++++++++++---------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/docs/component/input.md b/docs/component/input.md
index 4375dc013..7433e5ab9 100644
--- a/docs/component/input.md
+++ b/docs/component/input.md
@@ -24,6 +24,7 @@
 |adjust-position|Boolean|true|键盘弹起时，是否自动上推页面|App-Android（vue 页面 softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序|
 |hold-keyboard|boolean|false|focus时，点击页面的时候不收起键盘|微信小程序2.8.2|
 |auto-blur|boolean|false|键盘收起时，是否自动失去焦点|App 3.0.0+|
+|verifyNumber|boolean|false|当设置`type="number"`时，是否对输入的字符执行`当前输入是否有效`判断|HBuilder 3.1.18+|
 |@input|EventHandle||当键盘输入时，触发input事件，event.detail = {value}|差异见下方 Tips|
 |@focus|EventHandle||输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度|仅微信小程序、App（2.2.3+） 、QQ小程序支持 height|
 |@blur|EventHandle||输入框失去焦点时触发，event.detail = {value: value}||
@@ -36,6 +37,10 @@
 - 如果遇到 value 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
 - `input` 组件上有默认的 `min-height` 样式，如果 `min-height` 的值大于 `height` 的值那么 `height` 样式无效。
 - H5 暂未支持动态切换，请使用 `v-if`进行整体切换。
+- `verifyNumber`：是否对输入的字符执行输入是否有效判断判断
+  - 为`false`时：不执行输入是否有效判断，输入时会响应`input`事件，此时`event.detail = {value,valid}`，属性`valid`用来表明当前输入是否有效。
+  - 为`true`时：执行输入是否有效判断， 输入非数字字符将不会被赋值，也不会响应`input`事件。例如：`-(负号)`就是非数字字符。输入负数时，需要输入数字后再移动光标到数字最前面输入`-(负号)`。
+
 ```html
         <!-- 错误写法 -->
 	<input :type="isText?'text':'number'" placeholder="请输入内容" />
diff --git a/src/core/view/components/input/index.vue b/src/core/view/components/input/index.vue
index 5a4b23ed8..29b0d0732 100644
--- a/src/core/view/components/input/index.vue
+++ b/src/core/view/components/input/index.vue
@@ -94,6 +94,10 @@ export default {
     confirmType: {
       type: String,
       default: 'done'
+    },
+    verifyNumber: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -179,20 +183,21 @@ export default {
       }
 
       if (~NUMBER_TYPES.indexOf(this.type)) {
-        // 在输入 - 负号 的情况下，event.target.value没有值，但是会触发校验 false，因此做此处理
+        // 在输入 - 负号 的情况下，event.target.value没有值，但是会触发校验 false
         this.valid = this.$refs.input.validity && this.$refs.input.validity.valid
-        this.cachedValue = this.valueSync
-
-        // 处理部分输入法可以输入其它字符的情况
-        // 上一处理导致无法输入 - ，因此去除
-        /* if (this.$refs.input.validity && !this.$refs.input.validity.valid) {
-          $event.target.value = this.cachedValue
-          this.valueSync = $event.target.value
-          // 输入非法字符不触发 input 事件
-          return
-        } else {
+        if (!this.verifyNumber) {
           this.cachedValue = this.valueSync
-        } */
+        } else {
+          // 处理部分输入法可以输入其它字符的情况，此处理无法先输入 -(负号)，只能输入数字再移动光标输入负号
+          if (this.$refs.input.validity && !this.valid) {
+            $event.target.value = this.cachedValue
+            this.valueSync = $event.target.value
+            // 输入非法字符不触发 input 事件
+            return
+          } else {
+            this.cachedValue = this.valueSync
+          }
+        }
       }
 
       // type="number" 不支持 maxlength 属性，因此需要主动限制长度。
@@ -205,9 +210,16 @@ export default {
           return
         }
       }
-      this.$triggerInput($event, {
+
+      this.$triggerInput($event, Object.assign({
         value: this.valueSync
-      }, force)
+      }, (() => {
+        if (!this.verifyNumber) {
+          return {
+            valid: this.valid
+          }
+        }
+      })()), force)
     },
     _onComposition ($event) {
       if ($event.type === 'compositionstart') {
-- 
GitLab