init
This commit is contained in:
177
uni_modules/nutui-uni/components/input/input.ts
Normal file
177
uni_modules/nutui-uni/components/input/input.ts
Normal file
@@ -0,0 +1,177 @@
|
||||
import type {
|
||||
BaseEvent,
|
||||
InputOnBlurEvent,
|
||||
InputOnConfirmEvent,
|
||||
InputOnFocusEvent,
|
||||
InputOnInputEvent,
|
||||
} from '@uni-helper/uni-app-types'
|
||||
import type { ExtractPropTypes, PropType, StyleValue } from 'vue'
|
||||
import { BLUR_EVENT, CLEAR_EVENT, CLICK_EVENT, CONFIRM_EVENT, FOCUS_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from '../_constants'
|
||||
import type { ClassType } from '../_utils'
|
||||
import {
|
||||
commonProps,
|
||||
isNumber,
|
||||
isString,
|
||||
makeNumberProp,
|
||||
makeNumericProp,
|
||||
makeStringProp,
|
||||
nullableBooleanProp,
|
||||
truthProp,
|
||||
} from '../_utils'
|
||||
import type { InputAlignType, InputConfirmType, InputFormatTrigger, InputMode, InputType } from './type'
|
||||
|
||||
export const inputProps = {
|
||||
...commonProps,
|
||||
/**
|
||||
* @description 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `number` `digit`
|
||||
*/
|
||||
type: makeStringProp<InputType>('text'),
|
||||
/**
|
||||
* @description 输入值，双向绑定
|
||||
*/
|
||||
modelValue: makeNumericProp(''),
|
||||
/**
|
||||
* @description 输入框自定义类名
|
||||
*/
|
||||
inputClass: {
|
||||
type: [String, Object, Array] as PropType<ClassType>,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description 输入框自定义样式
|
||||
*/
|
||||
inputStyle: {
|
||||
type: [String, Object, Array] as PropType<StyleValue>,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description 输入框为空时占位符
|
||||
*/
|
||||
placeholder: makeStringProp(''),
|
||||
/**
|
||||
* @description 指定 placeholder 的样式
|
||||
*/
|
||||
placeholderStyle: makeStringProp(''),
|
||||
/**
|
||||
* @description 指定 placeholder 的样式类
|
||||
*/
|
||||
placeholderClass: makeStringProp('input-placeholder'),
|
||||
/**
|
||||
* @description 输入框内容对齐方式，可选值 `left`、`center`、`right`
|
||||
*/
|
||||
inputAlign: makeStringProp<InputAlignType>('left'),
|
||||
/**
|
||||
* @description 是否显示必填字段的标签旁边的红色星号
|
||||
*/
|
||||
required: Boolean,
|
||||
/**
|
||||
* @description 是否禁用
|
||||
*/
|
||||
disabled: nullableBooleanProp,
|
||||
/**
|
||||
* @description 是否只读
|
||||
*/
|
||||
readonly: Boolean,
|
||||
/**
|
||||
* @description 是否标红
|
||||
*/
|
||||
error: Boolean,
|
||||
/**
|
||||
* @description 限制最长输入字符
|
||||
*/
|
||||
maxLength: makeNumericProp(140),
|
||||
/**
|
||||
* @description 展示清除 `Icon`
|
||||
*/
|
||||
clearable: Boolean,
|
||||
/**
|
||||
* @description 清除图标的 `font-size` 大小
|
||||
*/
|
||||
clearSize: makeNumericProp('14'),
|
||||
/**
|
||||
* @description 是否显示下边框
|
||||
*/
|
||||
border: truthProp,
|
||||
/**
|
||||
* @description 格式化函数触发的时机，可选值为 `onChange`、`onBlur`
|
||||
*/
|
||||
formatTrigger: makeStringProp<InputFormatTrigger>('onChange'),
|
||||
/**
|
||||
* @description 输入内容格式化函数
|
||||
*/
|
||||
formatter: {
|
||||
type: Function as PropType<(value: string) => string>,
|
||||
default: null,
|
||||
},
|
||||
/**
|
||||
* @description 是否显示限制最长输入字符，需要设置 `max-length` 属性
|
||||
*/
|
||||
showWordLimit: Boolean,
|
||||
/**
|
||||
* @description 是否自动获得焦点，`iOS` 系统不支持该属性
|
||||
*/
|
||||
autofocus: Boolean,
|
||||
/**
|
||||
* @description 键盘右下角按钮的文字，仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成
|
||||
*/
|
||||
confirmType: makeStringProp<InputConfirmType>('done'),
|
||||
/**
|
||||
* @description 键盘弹起时，是否自动上推页面
|
||||
*/
|
||||
adjustPosition: truthProp,
|
||||
/**
|
||||
* @description 是否强制使用系统键盘和 `Web-view` 创建的 `input` 元素。为 `true` 时，`confirm-type`、`confirm-hold` 可能失效
|
||||
*/
|
||||
alwaysSystem: Boolean,
|
||||
/**
|
||||
* @description 是否在失去焦点后，继续展示清除按钮，在设置 `clearable` 时生效
|
||||
*/
|
||||
showClearIcon: Boolean,
|
||||
/**
|
||||
* @description 输入框模式
|
||||
*/
|
||||
inputMode: makeStringProp<InputMode>('text'),
|
||||
/**
|
||||
* @description 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
|
||||
*/
|
||||
cursorSpacing: makeNumberProp(0),
|
||||
/**
|
||||
* @description 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
|
||||
*/
|
||||
alwaysEmbed: Boolean,
|
||||
/**
|
||||
* @description 点击键盘右下角按钮时是否保持键盘不收起
|
||||
*/
|
||||
confirmHold: Boolean,
|
||||
/**
|
||||
* @description 指定focus时的光标位置
|
||||
*/
|
||||
cursor: Number,
|
||||
/**
|
||||
* @description 光标起始位置，自动聚集时有效，需与selection-end搭配使用
|
||||
*/
|
||||
selectionStart: makeNumberProp(-1),
|
||||
/**
|
||||
* @description 光标结束位置，自动聚集时有效，需与selection-start搭配使用
|
||||
*/
|
||||
selectionEnd: makeNumberProp(-1),
|
||||
/**
|
||||
* @description focus时，点击页面的时候不收起键盘
|
||||
*/
|
||||
holdKeyboard: Boolean,
|
||||
}
|
||||
|
||||
export type InputProps = ExtractPropTypes<typeof inputProps>
|
||||
|
||||
export const inputEmits = {
|
||||
[CLICK_EVENT]: (evt: BaseEvent) => evt instanceof Object,
|
||||
clickInput: (evt: BaseEvent) => evt instanceof Object,
|
||||
[BLUR_EVENT]: (evt: InputOnBlurEvent) => evt instanceof Object,
|
||||
[FOCUS_EVENT]: (evt: InputOnFocusEvent) => evt instanceof Object,
|
||||
[CLEAR_EVENT]: () => true,
|
||||
[CONFIRM_EVENT]: (evt: InputOnConfirmEvent) => evt instanceof Object,
|
||||
[UPDATE_MODEL_EVENT]: (val1: string | number, val2?: BaseEvent) => (isString(val1) || isNumber(val1)) && ((val2 instanceof Object) || val2 === undefined),
|
||||
[INPUT_EVENT]: (val: string | number, evt: InputOnInputEvent) => (isString(val) || isNumber(val)) && evt instanceof Object,
|
||||
}
|
||||
|
||||
export type InputEmits = typeof inputEmits
|
||||
Reference in New Issue
Block a user