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">
                &lt;span v-show="show"&gt;发送验证码</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用起来确实是省事，但是有些属性改起来麻烦的很啊。

代码007普通

打赏 收藏 海报 链接