GInput.vue

<template>
  <div class="wrapper">
    <div v-if="$slots.icon" class="icon">
      <slot name="icon"></slot>
    </div>
    <input class="input" :class="{'with-icon':!!$slots.icon}" v-bind="$props" :value="inputVal"
      @input="handleInput"
      @change="(...args)=>$emit('change',...args)"
      @focus="handleFocus"
      @blur="(...args)=>$emit('blur',...args)"
      @return="(...args)=>$emit('return',...args)"/>
  </div>
</template>
<script>
export default {
  name: 'g-input',
  model: {
    prop: 'value',
    event: 'g-input'
  },
  props: ['type', 'placeholder'],
  data () {
    return {
      inputVal: ''
    }
  },
  watch: {
    value (val) {
      this.inputVal = val
    }
  },
  methods: {
    handleInput (...args) {
      this.$emit('g-input', ...args)
      this.$emit('input', ...args)
    },
    handleFocus (...args) {
      this.$emit('focus', ...args)
    }
  }
}
</script>
<style scoped>
:root {
  --icon-width: 48px;
}
.wrapper {
  position: relative;
}
.icon {
  position: absolute;
  left: 20px;
  top: 20px;
  width: var(--icon-width);
  height: var(--icon-width);
  align-items: center;
  justify-content: center;
}
.input {
  padding: 20px 20px 20px 90px;
  height: 88px;
  font-size: 36px;
  border-radius: 16px;
  border: 1px solid #aaa;
}
.input.with-icon {
  padding-left: 88px;
}
.input:focus, .input:active {
  border-color: #E78081;
  color: #E78081;
  placeholder-color: #E78081;
}
</style>