Vue+ElementUI 之 input输入框 添加自定义图片

Vue+ElementUI 之 input输入框 添加自定义图片

效果如图：

template中

 <el-input
      v-model="inputUser"
      class="input"
      size="large"
      icon="el-icon-search"
      placeholder="账户"
      
    >
     <template #suffix>
      <div  class="suffix"><img src="../assets/image/user.svg" alt=""></div>
      
     </template>
      </el-input>

style中，加入padding是为了让输入框里面的内容给添加的图片腾个位置

  :deep(.el-input__wrapper){
     padding: 0.1vh 1.5vh  0.1vh 3.5vh;
     .el-input_inner{
      padding-left: 2vh !important;
     }
   }

是为了把加入的图片放到左边，默认加入图片不修改位置的话，是右边

.suffix{
  float: left;
  position: absolute;
  left: 0;
}