需求: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"
},