Element表单el-input嵌入按钮样式修改

项目场景：

提示：这里简述项目相关背景：

Vue3+Element Plus

---

问题及解决方法

提示：这里描述项目中遇到的问题：

el-form表单中，向实现如下效果：el-input中添加按钮

1. 添加按钮代码：

<el-input
     v-model="registerForm.code"
     class="code"
     placeholder="请输入验证码"
     clearable
     >
         <template #suffix>
             <el-button @click="getCode" style="border: none">
                <span v-show="show">发送验证码</span>
                <span v-show="!show" class="count">{
   
   { count }} s</span>
             </el-button>
         </template>
</el-input>

2. 添加el-button后，会发现el-button后距el-input边框有一定距离，不美观，修改如下：

.code :deep .el-input__wrapper {
    
    
  padding-right: 1px;
}

3. 添加el-button后，会发现，clear图标会在el-button后，需将clear图标和el-button的位置颠倒过来，方法如下(借鉴大佬的方法)：

:deep {
    
    
  .el-input__suffix {
    
    
    .el-input__suffix-inner .el-button {
    
    
      color: #00aaf8; // 修改el-button字体颜色
    }
    &-inner {
    
    
      flex-direction: row-reverse;
      -webkit-flex-direction: row-reverse;
      display: flex;
    }
  }
}

附上大佬的解决方法：https://blog.csdn.net/AzeShinja/article/details/122310015

4. 另外，el-input会有自带的在尾部的×和√的图标，可通过以下方法去掉：

.el-form-item--feedback :deep .el-input__validateIcon {
    
    
   display: none;
}

或者

.el-form-item :deep .el-input__validateIcon {
    
    
  display: none;
}

---

结语：

Element-ui用起来确实是省事，但是有些属性改起来麻烦的很啊。