diff --git a/src/number-keyboard/Key.tsx b/src/number-keyboard/Key.tsx index 73f5ce808..eb32d18c0 100644 --- a/src/number-keyboard/Key.tsx +++ b/src/number-keyboard/Key.tsx @@ -23,9 +23,11 @@ const DeleteIcon = ( ); +export type KeyType = '' | 'delete' | 'extra' | 'close'; + export default createComponent({ props: { - type: String as PropType<'delete' | 'extra' | 'close'>, + type: String as PropType, text: [Number, String], color: String, wider: Boolean, diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.tsx similarity index 86% rename from src/number-keyboard/index.js rename to src/number-keyboard/index.tsx index 9818343bd..6c950bed3 100644 --- a/src/number-keyboard/index.js +++ b/src/number-keyboard/index.tsx @@ -1,22 +1,40 @@ -import { ref, watch, computed, Teleport, Transition } from 'vue'; +import { + ref, + Slot, + watch, + computed, + Teleport, + PropType, + Transition, + TeleportProps, +} from 'vue'; import { createNamespace, stopPropagation } from '../utils'; import { useClickAway } from '@vant/use'; -import Key from './Key'; +import Key, { KeyType } from './Key'; const [createComponent, bem] = createNamespace('number-keyboard'); +export type NumberKeyboardTheme = 'default' | 'custom'; + +type KeyConfig = { + text?: number | string; + type?: KeyType; + color?: string; + wider?: boolean; +}; + export default createComponent({ props: { show: Boolean, title: String, zIndex: [Number, String], - teleport: [String, Object], + teleport: [String, Object] as PropType, randomKeyOrder: Boolean, closeButtonText: String, deleteButtonText: String, closeButtonLoading: Boolean, theme: { - type: String, + type: String as PropType, default: 'default', }, modelValue: { @@ -24,7 +42,7 @@ export default createComponent({ default: '', }, extraKey: { - type: [String, Array], + type: [String, Array] as PropType, default: '', }, maxlength: { @@ -64,10 +82,10 @@ export default createComponent({ ], setup(props, { emit, slots }) { - const root = ref(); + const root = ref(); const genBasicKeys = () => { - const keys = []; + const keys: KeyConfig[] = []; for (let i = 1; i <= 9; i++) { keys.push({ text: i }); } @@ -79,9 +97,9 @@ export default createComponent({ return keys; }; - const genDefaultKeys = () => [ + const genDefaultKeys = (): KeyConfig[] => [ ...genBasicKeys(), - { text: props.extraKey, type: 'extra' }, + { text: props.extraKey as string, type: 'extra' }, { text: 0 }, { text: props.showDeleteKey ? props.deleteButtonText : '', @@ -129,11 +147,10 @@ export default createComponent({ }; const onAnimationEnd = () => { - console.log('onAnimationEnd'); emit(props.show ? 'show' : 'hide'); }; - const onPress = (text, type) => { + const onPress = (text: string, type: KeyType) => { if (text === '') { if (type === 'extra') { onBlur(); @@ -179,7 +196,7 @@ export default createComponent({ const renderKeys = () => { return keys.value.map((key) => { - const keySlots = {}; + const keySlots: Record = {}; if (key.type === 'delete') { keySlots.default = slots.delete; @@ -248,13 +265,16 @@ export default createComponent({
{Title} diff --git a/src/vue-tsx-shim.d.ts b/src/vue-tsx-shim.d.ts index 1dd7c2bb4..6cc043b45 100644 --- a/src/vue-tsx-shim.d.ts +++ b/src/vue-tsx-shim.d.ts @@ -14,6 +14,7 @@ declare module 'vue' { onFocus?: EventHandler; onInput?: EventHandler; onClick?: EventHandler; + onPress?: EventHandler; onCancel?: EventHandler; onClosed?: EventHandler; onChange?: EventHandler;