vue+element写多位计数器 美化版

最终效果图 每一位都支持增或减，同时保留输入建议功能

 

 如图 最近开发的应用中要求做出这样一个计数器，首先找了element原有的组件，发现并不能满足需求，所以只能自己动手做了

完整的代码counter.vue， 直接引用就好

<template>
    <div class="editable-number-input">
        <el-button class="increment-button" @click="incrementDigit(1)">+</el-button>
        <el-autocomplete v-model="num1" :fetch-suggestions="querySearch" @select="handleSelect" @focus="getInput(num1,'num1')"></el-autocomplete>
        <el-autocomplete v-model="num2" :fetch-suggestions="querySearch" @select="handleSelect" @focus="getInput(num2,'num2')"></el-autocomplete>
        <b>.</b>
        <el-autocomplete v-model="num3" :fetch-suggestions="querySearch" @select="handleSelect" @focus="getInput(num3,'num3')"></el-autocomplete>
        <el-autocomplete v-model="num4" :fetch-suggestions="querySearch" @select="handleSelect" @focus="getInput(num4,'num4')"></el-autocomplete>
        <el-autocomplete v-model="num5" :fetch-suggestions="querySearch" @select="handleSelect" @focus="getInput(num5,'num5')"></el-autocomplete>
        <el-button class="decrement-button" @click="incrementDigit(-1)">-</el-button>
    </div>
  </template>
  
  <script>
  // 存储当前焦点的name和val
  let inputName = ''
  let inputVal = '0'
  export default {
    data() {
      return {
        restaurants: [],
        num1: '0',
        num2: '0',
        num3: '0',
        num4: '0',
        num5: '0',
        isdisabled: false
      }
    },
    mounted() {
        this.restaurants = this.loadAll()
    },
    methods: {
        // 当前焦点的input
        getInput(val,name) {
            this.isdisabled = false
            console.log(val,typeof val,'获取当前的值')            
            let index = name.replace(/[^\d]/g, '')
            let dom = document.getElementsByClassName('el-autocomplete')
            for(let i = 0; i < 5; i++){
                if(index == i+1) {
                    dom[i].classList.add('isborder')
                } else {
                    dom[i].classList.remove('isborder')
                }
            }
            inputName = name
            inputVal = val
        },
        // 加减按钮
        incrementDigit(i) {
            if(i == 1) {
                this.add()
            } else if(i == -1){
                this.reduce()
            }
        },
        add() {
            this.isdisabled = false
            if( inputVal >= 9) {
                this.isdisabled = true
            } else {
                this.isdisabled = false
                inputVal++;
                this[inputName] = inputVal.toString()
            }
        },
        reduce() {
            this.isdisabled = false
            if( inputVal <= 0) {
                this.isdisabled = true
            } else {
                this.isdisabled = false
                inputVal--;
                this[inputName] = inputVal.toString()
                // console.log(this[`${inputName}`],'this[name]',a)
            }
        },
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            console.log(results,queryString,'results')
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
            return (restaurant.value);
            };
        },
        loadAll() {
            return [
                { "value": '0' },
                { "value": '1' },
                { "value": '2' },
                { "value": '3' },
                { "value": '4' },
                { "value": '5' },
                { "value": '6' },
                { "value": '7' },
                { "value": '8' },
                { "value": '9' }
            ];
        },
        // 建议输入的val
        handleSelect(item) {
            inputVal = item.value
            console.log(item,inputVal)
        }
    }
  }
  </script>
  
<style lang="less">
@colora:#fff;
.editable-number-input{
    .el-autocomplete {
        width: 20px;
        input.el-input__inner {
            padding: 0;
            text-align: center;
            font-size: 20px;
            line-height: 30px;
            height: 30px;
            background: #253855;
            border: none;
            color: @colora;
        }
    }
    .isborder{
        input{
            border: 1px solid #1f7be3 !important;
        }
    }
    button {
        border-radius: 50%;
        background: #253855 !important;
        color: @colora;
        border: none;
        width: 28px;
        height: 60px;
        line-height: 60px;
        padding: 0;
    }
    b{
        color: @colora
    }
}
.el-autocomplete-suggestion {
    width: 30px !important;
    background: #253855 !important;
    color: @colora;
    li {
        padding: 0 !important;
        text-align: center;
        border-bottom: 1px solid #2d466e;
        color: @colora !important;
    }
    li:hover {
        background-color: #2e394a !important;
    }
}
</style>