在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue自定義指令,input獲取焦點時觸發(fā)按鈕鍵盤事件

Vue自定義指令,input獲取焦點時觸發(fā)按鈕鍵盤事件

實現(xiàn)效果: 當input獲取焦點時,點擊按鈕'+'和'上鍵',按鈕'-'和'下鍵'分別使input里的數(shù)字+1和-1
出現(xiàn)效果: 鼠標點擊'-'再按'下鍵'數(shù)字才減,鼠標點擊'+'再按'上鍵'數(shù)字才加

父組件:
<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);
    }

必須要自定義指令嗎?通過操作具體元素才能實現(xiàn)嗎?
怎么實現(xiàn)求大神幫助!!!

回答
編輯回答
舊言

clipboard.png

按我這樣寫就可以實現(xiàn)你的功能

2017年4月17日 01:16