プロジェクトのシナリオ:
提示：这里简述项目相关背景：
Vue3+エレメントプラス
問題と解決策
提示：这里描述项目中遇到的问题：
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 を追加すると、el-button の後ろに clear アイコンが表示されるので、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 には独自の X および √ アイコンが末尾にあり、次の方法で削除できます。
.el-form-item--feedback :deep .el-input__validateIcon {
display: none;
}
また
.el-form-item :deep .el-input__validateIcon {
display: none;
}
結論：
Element-ui はとても使いやすいですが、いくつかの属性を変更するのは非常に面倒です。