项目场景:
提示:这里简述项目相关背景:
Vue3+Element Plus
问题及解决方法
提示:这里描述项目中遇到的问题:
el-form表单中,向实现如下效果:el-input中添加按钮
- 添加按钮代码:
<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>
- 添加el-button后,会发现el-button后距el-input边框有一定距离,不美观,修改如下:
.code :deep .el-input__wrapper {
padding-right: 1px;
}
- 添加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
- 另外,el-input会有自带的在尾部的×和√的图标,可通过以下方法去掉:
.el-form-item--feedback :deep .el-input__validateIcon {
display: none;
}
或者
.el-form-item :deep .el-input__validateIcon {
display: none;
}
结语:
Element-ui用起来确实是省事,但是有些属性改起来麻烦的很啊。