<template> <div class="relative h-full"> <t-input ref="inputIcon" :type="type" class="pl-12" :class="inputClass" v-bind="$attrs" v-on="$listeners" /> <div class="absolute flex items-center ml-3 bottom-0 top-0"> <fa slot="icon" :icon="icon" :class="iconClass" /> </div> </div> </template> <script> export default { name: 'TInputIcon', props: { type: { type: String, default: 'text', }, icon: { type: String, default: null, }, iconClass: { type: String, default: null, }, inputClass: { type: String, default: null, }, focus: { type: Boolean, default: false, }, }, mounted() { if (this.focus) this.$refs.inputIcon.$el.focus() }, } </script>