item-management-web/src/components/ScanEntry.vue

<template>
    <div class="BarCodeScannerDiv">
        <input required="" type="text" class="input" v-model.trim="scanEntryData" ref="scanInput">
        <span class="highlight"></span>
        <span class="bar"></span>
        <label>{{label}}</label>
    </div>
</template>
  
  <script>
  export default {
        name: 'scanEntry',
        data() {
            return {
                scanEntryData: null,
            };
        },
        props: {
            label:{
                type: String,
                default: '',
            }
        },

        mounted() {
            this.setFocus();
            this.$refs.scanInput.addEventListener('keydown', this.handleScanInput);
        },

        beforeDestroy() {
            this.$refs.scanInput.removeEventListener('keydown', this.handleScanInput);
        },
        methods: {
            setFocus() {
                this.$nextTick(() => {
                this.$refs.scanInput.focus();
                });
            },

            handleScanInput(event) {

            const input = event.target;

            const inputValue = input.value;

            this.scanEntryData = input.value;


            if (event.key === 'Enter') {

                setTimeout(() => {

                    input.value = '';

                    this.scanEntryData = '';

                }, 100);

                this.$emit('scanEntryFun', inputValue);

            }

            },
    },
  
}
  
</script>

<style lang="css" scoped>
.BarCodeScannerDiv {
 position: relative;
}

.input {
 font-size: 20px;
 padding: 10px 10px 10px 5px;
 display: block;
 width: 100%;
 border: none;
 border-bottom: 1px solid #515151;
 background: transparent;
}

.input:focus {
 outline: none;
}

label {
 color: #999;
 font-size: 18px;
 font-weight: normal;
 position: absolute;
 pointer-events: none;
 left: 5px;
 top: 10px;
 transition: 0.2s ease all;
 -moz-transition: 0.2s ease all;
 -webkit-transition: 0.2s ease all;
}

.input:focus ~ label, .input:valid ~ label {
 top: -20px;
 font-size: 14px;
 color: #5264AE;
}

.bar {
 position: relative;
 display: block;
 width: 100%;
}

.bar:before, .bar:after {
 content: '';
 height: 2px;
 width: 0;
 bottom: 1px;
 position: absolute;
 background: #5264AE;
 transition: 0.2s ease all;
 -moz-transition: 0.2s ease all;
 -webkit-transition: 0.2s ease all;
}

.bar:before {
 left: 50%;
}

.bar:after {
 right: 50%;
}

.input:focus ~ .bar:before, .input:focus ~ .bar:after {
 width: 50%;
}

.highlight {
 position: absolute;
 height: 60%;
 width: 100px;
 top: 25%;
 left: 0;
 pointer-events: none;
 opacity: 0.5;
}

.input:focus ~ .highlight {
 animation: inputHighlighter 0.3s ease;
}

@keyframes inputHighlighter {
 from {
  background: #5264AE;
 }

 to {
  width: 0;
  background: transparent;
 }
}
</style>