fix(stepper): stepper输入小数 (#1113)

* fix(stepper): stepper输入小数 * fix(stepper): stepper输入小数 * fix(stepper): stepper输入小数 * fix(stepper): stepper输入小数 * fix(stepper): stepper输入小数-snap * fix(stepper): stepper输入小数-测试用例 * fix(stepper): stepper输入小数
Tencent · Oct 3, 2023 · e25923c · e25923c
1 parent 35659dc
commit e25923c
Show file tree

Hide file tree

Showing 10 changed files with 165 additions and 10 deletions.
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -1063,6 +1063,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             </div>
             <input
               class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+              inputmode="numeric"
               style=""
               type="tel"
             />
@@ -2791,6 +2792,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   </div>
                   <input
                     class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+                    inputmode="numeric"
                     style=""
                     type="tel"
                   />
@@ -4377,6 +4379,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             </div>
             <input
               class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+              inputmode="numeric"
               style=""
               type="tel"
             />

diff --git a/src/shared/util.ts b/src/shared/util.ts
@@ -67,3 +67,33 @@ export const reconvertUnit = (val: string | number | undefined) => {
   if (val == null) return 0;
   return isNumber(val) ? Number(val) : Number(val.slice(0, -2));
 };
+
+/**
+ * 格式化数字
+ * @param value 传入的数字字符串
+ * @param allowDecimal 是否允许小数，默认为 true
+ * @param allowNegative 是否允许负数，默认为 true
+ * @returns 返回格式化后的数字字符串
+ */
+export const formatNumber = (value: string, allowDecimal = true, allowNegative = true) => {
+  if (allowDecimal) {
+    const index = value.indexOf('.');
+    if (index !== -1) {
+      value = `${value.slice(0, index + 1)}${value.slice(index).replace(/\./g, '')}`;
+    }
+  } else {
+    const [splitValue = ''] = value.split('.');
+    value = splitValue;
+  }
+
+  if (allowNegative) {
+    const index = value.indexOf('-');
+    if (index !== -1) {
+      value = `${value.slice(0, index + 1)}${value.slice(index).replace(/-/g, '')}`;
+    }
+  } else {
+    value = value.replace(/-/g, '');
+  }
+
+  return value.replace(/[^\d.-]/g, '');
+};
diff --git a/src/stepper/__test__/__snapshots__/demo.test.jsx.snap b/src/stepper/__test__/__snapshots__/demo.test.jsx.snap
@@ -25,6 +25,7 @@ exports[`Stepper > Stepper baseVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -45,6 +46,48 @@ exports[`Stepper > Stepper baseVue demo works fine 1`] = `
       </svg>
     </div>
   </div>
+  <div
+    class="t-stepper t-stepper--medium"
+  >
+    <div
+      class="t-stepper__minus t-stepper__minus--filled t-stepper__icon--medium"
+    >
+      <svg
+        class="t-icon t-icon-remove t-stepper__minus-icon"
+        fill="none"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M4 11h16v2H4v-2z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+    <input
+      class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+      inputmode="decimal"
+      style=""
+      type="text"
+    />
+    <div
+      class="t-stepper__plus t-stepper__plus--filled t-stepper__icon--medium"
+    >
+      <svg
+        class="t-icon t-icon-add t-stepper__plus-icon"
+        fill="none"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  </div>
 </div>
 `;
 
@@ -73,6 +116,7 @@ exports[`Stepper > Stepper minMaxVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -114,6 +158,7 @@ exports[`Stepper > Stepper minMaxVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -155,6 +200,7 @@ exports[`Stepper > Stepper minMaxVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -237,6 +283,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -257,6 +304,48 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
             </svg>
           </div>
         </div>
+        <div
+          class="t-stepper t-stepper--medium"
+        >
+          <div
+            class="t-stepper__minus t-stepper__minus--filled t-stepper__icon--medium"
+          >
+            <svg
+              class="t-icon t-icon-remove t-stepper__minus-icon"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M4 11h16v2H4v-2z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <input
+            class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+            inputmode="decimal"
+            style=""
+            type="text"
+          />
+          <div
+            class="t-stepper__plus t-stepper__plus--filled t-stepper__icon--medium"
+          >
+            <svg
+              class="t-icon t-icon-add t-stepper__plus-icon"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+        </div>
       </div>
       
     </div>
@@ -306,6 +395,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -347,6 +437,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -388,6 +479,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -454,6 +546,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           <input
             class="t-stepper__input t-stepper__input--filled t-stepper__input--medium t-stepper--filled-disabled"
             disabled=""
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -523,6 +616,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -564,6 +658,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--outline t-stepper__input--medium"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -605,6 +700,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--normal t-stepper__input--medium"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -670,6 +766,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--filled t-stepper__input--large"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -711,6 +808,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -752,6 +850,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
           </div>
           <input
             class="t-stepper__input t-stepper__input--filled t-stepper__input--small"
+            inputmode="numeric"
             style=""
             type="tel"
           />
@@ -804,6 +903,7 @@ exports[`Stepper > Stepper sizeVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--filled t-stepper__input--large"
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -845,6 +945,7 @@ exports[`Stepper > Stepper sizeVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -886,6 +987,7 @@ exports[`Stepper > Stepper sizeVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--filled t-stepper__input--small"
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -935,6 +1037,7 @@ exports[`Stepper > Stepper statusVue demo works fine 1`] = `
     <input
       class="t-stepper__input t-stepper__input--filled t-stepper__input--medium t-stepper--filled-disabled"
       disabled=""
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -983,6 +1086,7 @@ exports[`Stepper > Stepper themeVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -1024,6 +1128,7 @@ exports[`Stepper > Stepper themeVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--outline t-stepper__input--medium"
+      inputmode="numeric"
       style=""
       type="tel"
     />
@@ -1065,6 +1170,7 @@ exports[`Stepper > Stepper themeVue demo works fine 1`] = `
     </div>
     <input
       class="t-stepper__input t-stepper__input--normal t-stepper__input--medium"
+      inputmode="numeric"
       style=""
       type="tel"
     />

diff --git a/src/stepper/__test__/index.test.jsx b/src/stepper/__test__/index.test.jsx
@@ -189,7 +189,7 @@ describe('stepper', () => {
       const wrapper = mount(<Stepper v-model={data.value} onChange={handleChange} />);
       const $input = wrapper.find('.t-stepper__input').element;
 
-      const inputValue = 12;
+      const inputValue = '12';
       await simulateEvent($input, inputValue, 'input');
       expect(value.value).toBe(inputValue);
     });

diff --git a/src/stepper/demos/base.vue b/src/stepper/demos/base.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="stepper-example">
-    <t-stepper v-model="number" theme="filled" />
+    <t-stepper v-model="integer" theme="filled" />
+    <t-stepper v-model="decimal" theme="filled" :integer="false" :step="0.5" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const number = ref(3);
+const integer = ref(3);
+const decimal = ref(3.5);
 </script>
 
 <style lang="less">

diff --git a/src/stepper/props.ts b/src/stepper/props.ts
@@ -63,6 +63,11 @@ export default {
     type: [String, Number] as PropType<TdStepperProps['defaultValue']>,
     default: 0,
   },
+  /** 是否整数，为 true 仅允许输入不带小数点的数，为 false 允许输入带小数点的数 */
+  integer: {
+    type: Boolean,
+    default: true,
+  },
   /** 输入框失去焦点时触发 */
   onBlur: Function as PropType<TdStepperProps['onBlur']>,
   /** 数值发生变更时触发 */

diff --git a/src/stepper/stepper.en-US.md b/src/stepper/stepper.en-US.md
@@ -8,6 +8,7 @@ name | type | default | description | required
 disableInput | Boolean | false | \- | N
 disabled | Boolean | false | \- | N
 inputWidth | Number | - | \- | N
+integer | Boolean | true | \- | N
 max | Number | 100 | \- | N
 min | Number | 0 | \- | N
 size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/src/stepper/stepper.md b/src/stepper/stepper.md
@@ -8,6 +8,7 @@
 disableInput | Boolean | false | 禁用输入框 | N
 disabled | Boolean | false | 禁用全部操作 | N
 inputWidth | Number | - | 输入框宽度 | N
+integer | Boolean | true | 是否整形 | N
 max | Number | 100 | 最大值 | N
 min | Number | 0 | 最小值 | N
 size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N