fix(input): 优化input属性问题

nutui-uniapp · Oct 31, 2023 · 3fe20c7 · 3fe20c7
1 parent 767cea6
commit 3fe20c7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/example/src/pages/demo/dentry/input/index.vue b/example/src/pages/demo/dentry/input/index.vue
@@ -74,8 +74,8 @@ export default {
     </h2>
     <nut-input v-model="state.text" placeholder="文本" />
     <nut-input v-model="state.password" type="password" placeholder="密码" />
-    <nut-input v-model="state.number" type="number" placeholder="数字" />
-    <nut-input v-model="state.digit" type="digit" placeholder="整数" />
+    <nut-input v-model="state.number" type="digit" placeholder="数字" />
+    <nut-input v-model="state.digit" type="number" placeholder="整数" />
 
     <h2 class="title">
       禁用和只读

diff --git a/packages/nutui/components/input/input.ts b/packages/nutui/components/input/input.ts
@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 import { commonProps } from '../_utils'
-import type { ConfirmTextType, InputFormatTrigger, InputMode, InputType } from './type'
+import type { ConfirmTextType, InputAlignType, InputFormatTrigger, InputMode, InputType } from './type'
 
 export const inputProps = {
   ...commonProps,
@@ -25,7 +25,7 @@ export const inputProps = {
     default: 'input-placeholder',
   },
   inputAlign: {
-    type: String,
+    type: String as PropType<InputAlignType>,
     default: 'left',
   },
   required: {

diff --git a/packages/nutui/components/input/input.vue b/packages/nutui/components/input/input.vue
@@ -1,13 +1,12 @@
-<!-- eslint-disable padded-blocks -->
 <script lang="ts" setup>
 import { type ComputedRef, computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
-import type { InputOnBlurEvent, InputOnFocusEvent, InputOnConfirmEvent } from '@uni-helper/uni-app-types'
+import type { InputOnBlurEvent, InputOnConfirmEvent, InputOnFocusEvent } from '@uni-helper/uni-app-types'
 import { isH5 } from '../_utils'
 import { PREFIX } from '../_constants'
 import NutIcon from '../icon/icon.vue'
 import { inputEmits, inputProps } from './input'
 import { formatNumber } from './util'
-import type { InputFormatTrigger, InputTarget, InputType } from '.'
+import type { InputFormatTrigger, InputMode, InputTarget, InputType } from '.'
 
 const props = defineProps(inputProps)
 
@@ -36,24 +35,32 @@ const classes = computed(() => {
 })
 
 const styles: ComputedRef = computed(() => {
-  let style = {}
-  style = {
+  return {
     textAlign: props.inputAlign,
   }
-  return style
 })
 
-function inputType(type: InputType) {
+function getInputType(type: InputType): InputType {
   // #ifdef H5
   if (type === 'number')
-    return 'text'
+    return 'tel'
 
   if (type === 'digit')
-    return 'tel'
+    return 'text'
   // #endif
   return type
 }
 
+function getInputMode(type: InputType, mode: InputMode): InputMode {
+  // #ifdef H5
+  if (type === 'digit')
+    return 'decimal'
+  if (type === 'number')
+    return 'numeric'
+  // #endif
+  return mode
+}
+
 function handleInput(event: any) {
   if (isH5) {
     if (!(event.detail as InputTarget)!.composing)
@@ -176,9 +183,7 @@ export default defineComponent({
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    // #ifndef H5
     styleIsolation: 'shared',
-    // #endif
   },
 })
 </script>
@@ -193,7 +198,7 @@ export default defineComponent({
         <view class="nut-input-box">
           <input
             ref="inputRef"
-            :type="inputType(type) as any"
+            :type="getInputType(props.type) as any"
             class="input-text"
             :style="[styles, props.customStyle]"
             :placeholder="placeholder"
@@ -209,7 +214,7 @@ export default defineComponent({
             :confirm-type="confirmType"
             :adjust-position="adjustPosition"
             :always-system="alwaysSystem"
-            :input-mode="inputMode"
+            :input-mode="getInputMode(props.type, props.inputMode)"
             :cursor-spacing="cursorSpacing"
             :always-embed="alwaysEmbed"
             :confirm-hold="confirmHold"