diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js deleted file mode 100644 index 83b9b4263..000000000 --- a/src/number-keyboard/Key.js +++ /dev/null @@ -1,92 +0,0 @@ -import { ref } from 'vue'; -import { createNamespace } from '../utils'; -import { useTouch } from '../composition/use-touch'; -import Loading from '../loading'; -import { DeleteIcon, CollapseIcon } from './Icon'; - -const [createComponent, bem] = createNamespace('key'); - -export default createComponent({ - props: { - type: String, - text: [Number, String], - color: String, - wider: Boolean, - large: Boolean, - loading: Boolean, - }, - - emits: ['press'], - - setup(props, { emit, slots }) { - const active = ref(false); - const touch = useTouch(); - - const onTouchStart = (event) => { - touch.start(event); - active.value = true; - }; - - const onTouchMove = (event) => { - touch.move(event); - - if (touch.direction.value) { - active.value = false; - } - }; - - const onTouchEnd = (event) => { - if (active.value) { - // eliminate tap delay on safari - // see: https://github.com/youzan/vant/issues/6836 - if (!slots.default) { - event.preventDefault(); - } - active.value = false; - emit('press', props.text, props.type); - } - }; - - const renderContent = () => { - if (props.loading) { - return ; - } - - const text = slots.default ? slots.default() : props.text; - - switch (props.type) { - case 'delete': - return text || ; - case 'extra': - return text || ; - default: - return text; - } - }; - - return () => ( -
-
- {renderContent()} -
-
- ); - }, -}); diff --git a/src/number-keyboard/Icon.js b/src/number-keyboard/Key.tsx similarity index 56% rename from src/number-keyboard/Icon.js rename to src/number-keyboard/Key.tsx index 5b47616f3..b036a937a 100644 --- a/src/number-keyboard/Icon.js +++ b/src/number-keyboard/Key.tsx @@ -1,5 +1,12 @@ -export const CollapseIcon = ( - +import { PropType, ref } from 'vue'; +import { createNamespace } from '../utils'; +import { useTouch } from '../composition/use-touch'; +import Loading from '../loading'; + +const [createComponent, bem] = createNamespace('key'); + +const CollapseIcon = ( + ); -export const DeleteIcon = ( - +const DeleteIcon = ( + ); + +export default createComponent({ + props: { + type: String as PropType<'delete' | 'extra' | 'close'>, + text: [Number, String], + color: String, + wider: Boolean, + large: Boolean, + loading: Boolean, + }, + + emits: ['press'], + + setup(props, { emit, slots }) { + const active = ref(false); + const touch = useTouch(); + + const onTouchStart = (event: TouchEvent) => { + touch.start(event); + active.value = true; + }; + + const onTouchMove = (event: TouchEvent) => { + touch.move(event); + + if (touch.direction.value) { + active.value = false; + } + }; + + const onTouchEnd = (event: TouchEvent) => { + if (active.value) { + // eliminate tap delay on safari + // see: https://github.com/youzan/vant/issues/6836 + if (!slots.default) { + event.preventDefault(); + } + active.value = false; + emit('press', props.text, props.type); + } + }; + + const renderContent = () => { + if (props.loading) { + return ; + } + + const text = slots.default ? slots.default() : props.text; + + switch (props.type) { + case 'delete': + return text || DeleteIcon; + case 'extra': + return text || CollapseIcon; + default: + return text; + } + }; + + return () => ( +
+
+ {renderContent()} +
+
+ ); + }, +});