Vue2:
想要的效果:
默认时el-input想要placeholder文字居中需要深度设置.el-input__inner{text-align为center},但是点击后需要将text-align设置为left。由于是深度设置无法直接修改类名。
解决方法
1.先在data中定义一个变量去作为样式的属性值,如center
data(){
return{
inputText: "center",
}
}
2.在模板动态绑定style,--是深度的意思,--inputAlign是属性值,参照下图的样式
<el-input
v-model="ruleForm.insName"
class="search"
placeholder="请输入企业名称查询"
@keyup.enter.native="searchByName"
@fouce="autoFocus"
@blur="handleBlur"
:autofocus="isauto"
:style="{ '--inputAlign': inputText }"
>
</el-input>
3.在样式中对变量进行使用
::v-deep .el-input__inner {
text-align: var(--inputAlign);
}
4.通过绑定事件对inputText的值进行修改,从而改变--inputAlign
handleBlur() {
this.inputText = "left";
},