Vue.js 实现动态修改带icon的input样式

<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>