动态地::v-deep深度修改element组件样式

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";
    },