内嵌用法

实现效果

image-20240122215722256

实现代码（template）

在想要内嵌按钮的el-input中添加：

<template #suffix>
           <el-button @click="getPhoneCode" style="border: none">
             <span v-show="showPhoneCode">发送验证码</span>
             <span v-show="!showPhoneCode" class="count">{{ formatTimeSecond }} </span>
           </el-button>
         </template>

其中el-input原本是单标签，这里需要改成双标签：

<el-input size="large" v-model="confirmForm.phoneCode" class="code"
          placeholder="请输入验证码"
          clearable>
  <template #suffix>
    <el-button @click="getPhoneCode" style="border: none">
      <span v-show="showPhoneCode">发送验证码</span>
      <span v-show="!showPhoneCode" class="count">{{ formatTimeSecond }} </span>
    </el-button>
  </template>
</el-input>

美化代码（style）

  1. 添加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;
    }
  }
}

  1. 另外，el-input会有自带的在尾部的×和√的图标，可通过以下方法去掉：
.el-form-item :deep .el-input__validateIcon {
  display: none;
}

追加用法

实现效果

image-20240122221702613

实现代码

其实非常之简单，网上一堆教程我用了都不行（

只需要把el-input的width改小一点就可以了：

<el-form-item prop="email" label="邮箱">
        <el-input size="large" style="width:80%;" v-model="form.email"/>
        <el-button size="large" class="btn" @click="showEmailDialog=true">修改</el-button>
      </el-form-item>

参考链接

Element表单el-input嵌入按钮样式修改_el-input 样式-CSDN博客