<el-input
v-model.trim="loginForm.password"
type="password"
auto-complete="off"
placeholder="秘钥"
show-password
ref ="indexInputps"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
mounted() {
console.log("this.$refs.indexInput",this.$refs.indexInputcd.$el.querySelector('span'));
console.log("this.$refs.indexInput.$refs",this.$refs.indexInputcd.$refs.input);
const prefixcd = this.$refs.indexInputcd.$el.querySelector('span'); // el-input__prefix的DOM元素
const prefixps = this.$refs.indexInputps.$el.querySelector('span');
const prefixuc = this.$refs.indexInputuc.$el.querySelector('span');
const innercd = this.$refs.indexInputcd.$refs.input; // el-input__inner的DOM元素
const innerps = this.$refs.indexInputps.$refs.input; // el-input__inner的DOM元素
const inneruc = this.$refs.indexInputuc.$refs.input; // el-input__inner的DOM元素
//prefix.style={'backgroud':'#f0d29d !important','line-height':'48px !important','left':'1px !important','color':'#f0d29d !important'}; // 添加类名，修改样式
const numh = "48px";
const classT = "#f0d29d";
const leftl = "1px";
innercd.style.paddingLeft=numh;
innercd.style.height=numh;
innercd.style.lineHeight=numh;
prefixcd.style.lineHeight=numh;
prefixcd.style.background=classT;
console.log("prefixcd.style.cssText",prefixcd.style.cssText);
prefixcd.style.left=leftl;
innerps.style.paddingLeft=numh;
innerps.style.height=numh;
innerps.style.lineHeight=numh;
prefixps.style.lineHeight=numh;
prefixps.style.background=classT;
prefixps.style.left=leftl;
inneruc.style.paddingLeft=numh;
inneruc.style.height=numh;
inneruc.style.lineHeight=numh;
prefixuc.style.lineHeight=numh;
prefixuc.style.background=classT;
prefixuc.style.left=leftl;
}
1、这个方式有个缺陷，无法修改js生成的标签比如上面的input下的span标签样式是无效的，因为做了唯一处理，二次刷新就无效
另外一个解决方案：
<style lang="scss"> // 注意这里不要放scoped ，不做唯一处理，其中 .login_index form加了一层
.login_index .el-input__prefix {
background: #f0d29d;
left:1px;
line-height: 48px;
}
.login_index .el-input__inner {
padding-left: 48px;
height:48px;
line-height: 48px;
}
</style>
