feat(ui/input): type support tel and email, touchstart event stop pro…

…pagation
varletjs · Jul 5, 2022 · c6cdcc9 · c6cdcc9
1 parent f2ede3b
commit c6cdcc9
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 40 deletions.
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -45,6 +45,7 @@
           @blur="handleBlur"
           @input="handleInput"
           @change="handleChange"
+          @touchstart="handleTouchstart"
           v-if="textarea"
         >
         </textarea>
@@ -65,6 +66,7 @@
           @blur="handleBlur"
           @input="handleInput"
           @change="handleChange"
+          @touchstart="handleTouchstart"
           v-else
         />
         <label
@@ -242,6 +244,16 @@ export default defineComponent({
 
     const withTrim = (value: string) => (props.modelModifiers.trim ? value.trim() : value)
 
+    const handleTouchstart = (e: Event) => {
+      const { disabled, readonly } = props
+
+      if (form?.disabled.value || form?.readonly.value || disabled || readonly) {
+        return
+      }
+
+      e.stopPropagation()
+    }
+
     // expose
     const reset = () => {
       call(props['onUpdate:modelValue'], '')
@@ -291,6 +303,7 @@ export default defineComponent({
       handleChange,
       handleClear,
       handleClick,
+      handleTouchstart,
       validate,
       resetValidation,
       reset,

diff --git a/packages/varlet-ui/src/input/docs/en-US.md b/packages/varlet-ui/src/input/docs/en-US.md
@@ -153,25 +153,25 @@ const value = ref('')
 
 ### Props
 
-| Prop | Description | Type | Default | 
-| --- | --- | --- | --- | 
-| `v-model` | The value of the binding | _string_ | `-` |
-| `placeholder` | placeholder | _string_ | `-` |
-| `type` | Input type, The optional value is `text` `password` `number` | _string_ | `text` |
-| `maxlength` | Maxlength | _string \| number_ | `-` |
-| `textarea` | Is it a textarea | _boolean_ | `false` |  
-| `rows` | Number of lines to display in the textarea | _string \| number_ | `8` |  
-| `line` | Whether to display a dividing line | _boolean_ | `true` |
-| `hint` | Whether to use placeholder as hint | _boolean_ | `true` |
-| `text-color` | Text color | _string_ | `-` |
-| `focus-color` | The primary color in focus | _string_ | `-` |
-| `blur-color` | The primary color in blur | _string_ | `-` |
-| `readonly` | Whether the readonly | _boolean_ | `false` |
-| `disabled` | Whether the disabled | _boolean_ | `false` |
-| `clearable` | Whether the clearable | _boolean_ | `false` |
-| `resize` | Whether textarea can be dragged to resize | _boolean_ | `false` |
-| `autofocus` | Whether the autofocus | _boolean_ | `false` |
-| `validate-trigger` | Timing to trigger validation, The optional value is `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput` | _ValidateTriggers[]_ | `['onInput', 'onClear']` |
+| Prop | Description                                                                                                                            | Type | Default | 
+| --- |----------------------------------------------------------------------------------------------------------------------------------------| --- | --- | 
+| `v-model` | The value of the binding                                                                                                               | _string_ | `-` |
+| `placeholder` | placeholder                                                                                                                            | _string_ | `-` |
+| `type` | Input type, The optional value is `text` `password` `number` `tel`                                                                     | _string_ | `text` |
+| `maxlength` | Maxlength                                                                                                                              | _string \| number_ | `-` |
+| `textarea` | Is it a textarea                                                                                                                       | _boolean_ | `false` |  
+| `rows` | Number of lines to display in the textarea                                                                                             | _string \| number_ | `8` |  
+| `line` | Whether to display a dividing line                                                                                                     | _boolean_ | `true` |
+| `hint` | Whether to use placeholder as hint                                                                                                     | _boolean_ | `true` |
+| `text-color` | Text color                                                                                                                             | _string_ | `-` |
+| `focus-color` | The primary color in focus                                                                                                             | _string_ | `-` |
+| `blur-color` | The primary color in blur                                                                                                              | _string_ | `-` |
+| `readonly` | Whether the readonly                                                                                                                   | _boolean_ | `false` |
+| `disabled` | Whether the disabled                                                                                                                   | _boolean_ | `false` |
+| `clearable` | Whether the clearable                                                                                                                  | _boolean_ | `false` |
+| `resize` | Whether textarea can be dragged to resize                                                                                              | _boolean_ | `false` |
+| `autofocus` | Whether the autofocus                                                                                                                  | _boolean_ | `false` |
+| `validate-trigger` | Timing to trigger validation, The optional value is `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput`                        | _ValidateTriggers[]_ | `['onInput', 'onClear']` |
 | `rules` | The validation rules, Returns `true` to indicate that the validation passed,The remaining values are converted to text as user prompts | _Array<(v: string) => any>_ | `-` |
 
 ### Methods

diff --git a/packages/varlet-ui/src/input/docs/zh-CN.md b/packages/varlet-ui/src/input/docs/zh-CN.md
@@ -154,26 +154,26 @@ const value = ref('')
 
 ### 属性
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `v-model` | 绑定的值 | _string_ | `-` |
-| `placeholder` | 占位符 | _string_ | `-` |
-| `type` | 输入框类型, 可选值为 `text` `password` `number` | _string_ | `text` |
-| `maxlength` | 最大长度 | _string \| number_ | `-` |
-| `textarea` | 是否是文本域 | _boolean_ | `false` |
-| `rows` | 文本域的显示行数 | _string \| number_ | `8` |
-| `line` | 是否显示分割线 | _boolean_ | `true` |
-| `hint` | 是否使用占位符作为提示 | _boolean_ | `true` |
-| `text-color` | 文字颜色 | _string_ | `-` |
-| `focus-color` | 聚焦时的主要颜色 | _string_ | `-` |
-| `blur-color` | 失焦时的主要颜色 | _string_ | `-` |
-| `readonly` | 是否只读 | _boolean_ | `false` |
-| `disabled` | 是否禁用 | _boolean_ | `false` |
-| `clearable` | 是否可清除 | _boolean_ | `false` |
-| `resize` | 文本域是否可以拖动调整尺寸 | _boolean_ | `false` |
-| `autofocus` | 是否自动聚焦 | _boolean_ | `false` |
+| 参数 | 说明                                                                       | 类型 | 默认值 |
+| --- |--------------------------------------------------------------------------| --- | --- |
+| `v-model` | 绑定的值                                                                     | _string_ | `-` |
+| `placeholder` | 占位符                                                                      | _string_ | `-` |
+| `type` | 输入框类型, 可选值为 `text` `password` `number` `tel`                             | _string_ | `text` |
+| `maxlength` | 最大长度                                                                     | _string \| number_ | `-` |
+| `textarea` | 是否是文本域                                                                   | _boolean_ | `false` |
+| `rows` | 文本域的显示行数                                                                 | _string \| number_ | `8` |
+| `line` | 是否显示分割线                                                                  | _boolean_ | `true` |
+| `hint` | 是否使用占位符作为提示                                                              | _boolean_ | `true` |
+| `text-color` | 文字颜色                                                                     | _string_ | `-` |
+| `focus-color` | 聚焦时的主要颜色                                                                 | _string_ | `-` |
+| `blur-color` | 失焦时的主要颜色                                                                 | _string_ | `-` |
+| `readonly` | 是否只读                                                                     | _boolean_ | `false` |
+| `disabled` | 是否禁用                                                                     | _boolean_ | `false` |
+| `clearable` | 是否可清除                                                                    | _boolean_ | `false` |
+| `resize` | 文本域是否可以拖动调整尺寸                                                            | _boolean_ | `false` |
+| `autofocus` | 是否自动聚焦                                                                   | _boolean_ | `false` |
 | `validate-trigger` | 触发验证的时机，可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput` | _ValidateTriggers[]_ | `['onInput', 'onClear']` |
-| `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: string) => any>_ | `-` |
+| `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示                                   | _Array<(v: string) => any>_ | `-` |
 
 ### 方法
 

diff --git a/packages/varlet-ui/src/input/props.ts b/packages/varlet-ui/src/input/props.ts
@@ -15,7 +15,7 @@ export const props = {
     default: () => ({}),
   },
   type: {
-    type: String as PropType<'text' | 'password' | 'number'>,
+    type: String as PropType<'text' | 'password' | 'number' | 'tel' | 'email'>,
     default: 'text',
     validator: typeValidator,
   },

diff --git a/packages/varlet-ui/types/input.d.ts b/packages/varlet-ui/types/input.d.ts
@@ -4,7 +4,7 @@ export type InputValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick
 
 export interface InputProps {
   modelValue?: string
-  type?: 'text' | 'password' | 'number'
+  type?: 'text' | 'password' | 'number' | 'tel' | 'email'
   textarea?: boolean
   rows?: string | number
   placeholder?: string