magiccube-vue3/package/components/amount-range/amount-input.js

vue3-js版组件库

import { computed, nextTick, ref, resolveDirective, withDirectives } from 'vue'

const AmountInput = {
    props: {
        modelValue: [String, Number],
        onlyInt: Boolean,
        decimal: {
            type: Number,
            default: 2
        },
        placeholder: String
    },
    emit: ['update:modelValue', 'up', 'down', 'keyboard'],
    setup(props, { emit, }) {
        const inputEl = ref()
        const model = computed({
            get() {
                return props.modelValue
            },
            set(value) {
                emit('update:modelValue', value)
            }
        })
        const handleUp = async () => {
            (model.value || model.value === 0) && model.value++
            inputEl.value?.focus()
            await nextTick()
            emit('up', model.value)
        }
        const handleDown = async () => {
            (model.value || model.value === 0) && model.value--
            inputEl.value?.focus()
            await nextTick()
            emit('down', model.value)
        }
        const isKeyboard = ref()
        const handleKeypress = async (evt) => {
            if(evt.charCode === 13 && !evt.isComposing){
                isKeyboard.value = true
                evt.target?.blur()
                await nextTick()
                emit('keyboard', model.value)
                isKeyboard.value = false
            }
        }
        // directives
        const numberInputDirective = resolveDirective('numberInput')
        return () => (
            <div class="mc-amount-range-picker__inner">
                {
                    withDirectives(
                        (<input class="mc-amount-range-picker--input"
                            ref={inputEl}
                            v-model={model.value}
                            placeholder={props.placeholder}
                            onKeypress={handleKeypress}
                        />),
                        [[numberInputDirective, { onlyInt: props.onlyInt, decimal: props.decimal }]]
                    )
                }
                <span class="mc-amount-range-picker__arrow">
                    <i class="mc-amount-range-picker__arrow--up" onClick={handleUp}>
                        <img src={require('../../img/icon_amount_input_arrow.svg')} />
                    </i>
                    <i class="mc-amount-range-picker__arrow--down" onClick={handleDown}>
                        <img src={require('../../img/icon_amount_input_arrow.svg')} />
                    </i>
                </span>
            </div>
        )
    }
}

export default AmountInput