Vue自定义指令,input获取焦点时触发按钮键盘事件

Question

实现效果: 当input获取焦点时,点击按钮'+'和'上键',按钮'-'和'下键'分别使input里的数字+1和-1
出现效果: 鼠标点击'-'再按'下键'数字才减,鼠标点击'+'再按'上键'数字才加

父组件:
<div id="app">
    <input-number v-model="value" :max="10" :min="0"></input-number>
</div>
子组件:
Vue.component('input-number', {
    template:'\
        <div class="input-number">\
            <input type="text"\
                :value="currentValue"\
                @change="handleChange"\
                v-focus="focus">\
            <button\
                @click.keyup.down="handleDown"\
                :disabled="currentValue <= min">-</button>\
            <button\
                @click.keyup.up="handleUp"\
                :disabled="currentValue >= max">+</button>\
        </div>',
 props: {
        max: {
            type: Number,
            default: Infinity
        },
        min: {
            type: Number,
            default: -Infinity
        },
        value: {
            type: Number,
            default: 0
        }
    },
    data: function () {
        return {
            currentValue: this.value
        }
    },
    watch: {
        currentValue: function (val) {
            this.$emit('input', val);
            this.$emit('on-change', val);
        },
        value: function (val) {
            this.updateValue(val);
        }
    },
    methods: {
        handleDown: function () {
            console.log('下键')
            // if (this.currentValue <= this.min) return;
            // this.currentValue -= 1;
        },
        handleUp: function () {
            console.log('上键')
            // if (this.currentValue >= this.max) return;
            // this.currentValue += 1;
        },
        updateValue: function (val) {
            if (val > this.max) val = this.max;
            if (val < this.min) val = this.min;
            this.currentValue = val;
        },
        handleChange: function (event) {
            var val = event.target.value.trim();
            var max = this.max;
            var min = this.min;

            if (isValueNumber(val)) {
                val = Number(val);
                this.currentValue = val;

                if (val > max) {
                    this.currentValue = max;
                } else if(val < min) {
                    this.currnetValue = min;
                }
            } else {
                event.target.value = this.currentValue;
            }
        }
    },
    mounted: function () {
        this.updateValue(this.value);
    }

必须要自定义指令吗?通过操作具体元素才能实现吗?
怎么实现求大神帮助!!!

Answer 1

按我这样写就可以实现你的功能