Element表单input框，复合型输入框嵌入按钮样式修改

需求：input框内部嵌入按钮

 用element复合型输入框可实现初步效果，遇到一点坑。

1. 悬停时input框的聚焦效果，内嵌的按钮没有

2.点击输入时，input聚焦效果，内嵌的按钮依旧没有

效果图：鼠标悬停时/ input输入内容时

 

 

<el-form-item prop="verifyCode">
                  <el-input
                    class="phoneCodeV"
                    v-model="phoneLogin.verifyCode"
                    @focus="handleInputFocus"
                    @blur="handleInputBlur"
                    auto-complete="new-password"
                    placeholder="请输入手机验证码"
                    clearable
                  >
                    <template slot="append"> //插槽插入文字按钮
                      <el-button 
                      class="phoneCode"
                      type="text"
                      :disabled="coolDown"
                      @click="getVerCode()"
                        > {{ coolDown ? `${totalTime}s` : '获取验证码' }}</el-button
                      >
                    </template>
                  </el-input>
                </el-form-item>

css

/deep/.phoneCodeV {
            input { 
              border-right: none; // 去掉插槽按钮和input中的边框
            }
            &:hover {
                // input 悬停时，插槽聚焦效果
              .el-input-group__append, .el-input-group__prepend {
                border-color: #4568ee !important;
                background: #fff !important;
              }
            }
          }

          .phoneCode {
            width: 80px;
            padding: 10px 10px 10px 0px;
            border: none; // 去掉插槽按钮和input中的边框
            background: rgba(233, 237, 246, 0.5);
            &:hover {
              background: rgba(233, 237, 246, 0.5) !important;
            }
          }

        // 修改获取验证码插槽里文字颜色
           /deep/ .el-input-group__append,
            .el-input-group__prepend {
              color: #4568ee;
             }

js控制input聚焦、失焦时，给插槽添加边框

// 输入框聚焦、失焦事件
    handleInputFocus() {
      let appendEle = document.getElementsByClassName("el-input-group__append")[0]
      appendEle.style.borderColor = "#4568ee"
    },
    handleInputBlur() {
      let appendEle = document.getElementsByClassName("el-input-group__append")[0]
      appendEle.style.borderColor = "#DCDFE6"
    },