解决Element UI中el-input禁用状态的样式问题

方法一：使用深度选择器与单独设置样式

我发现即使使用了深度选择器（如

::v-deep

），

el-input

在禁用状态下的样式仍然无法按照预期改变，很可能是因为Element UI内部为禁用状态定义了高优先级的样式规则。此时，我们需要更加具体地定位到这些样式，并编写具有更高优先级的自定义样式来覆盖它们。

通过浏览器的开发者工具检查

el-input

在禁用状态下的样式。注意查看哪些样式规则被应用，并且它们的优先级如何。发现在生效样式中.edit-form[data-v-85030258] .el-input.is-disabled .el-input__inner里面只有样式名”.el-input.is-disabled“之间没有空格隔开。

在Vue组件的

<style scoped>

部分，使用深度选择器（如

::v-deep

）来穿透样式作用域。然后，针对

.el-input.is-disabled .el-input__inner

这个选择器（注意这里

.el-input

和

.is-disabled

之间没有空格，表示这两个类同时应用于同一个元素），编写你的自定义样式。如果需要，可以考虑使用更具体的选择器或添加自定义类名来增加样式的优先级。

如果默认的禁用样式仍然覆盖了你的自定义样式，尝试使用

!important

标记来增加你的样式规则的优先级，但请注意，过度使用

!important

可能会使样式表难以维护。

<template>  
  <div class="edit-form" data-v-85030258>  
    <el-input :disabled="isDisabled" placeholder="这是一个禁用的输入框"></el-input>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isDisabled: true,  
    };  
  },  
};  
</script>  
  
<style scoped>  
::v-deep .edit-form[data-v-85030258] .el-input.is-disabled .el-input__inner {  
  background-color: #f5f7fa !important; /* 背景色 */  
  color: #c0c4cc !important; /* 文字颜色 */  
  cursor: not-allowed; /* 禁止光标样式 */  
  /* 其他样式... */  
}  
</style>

方法二：使用遮罩层模拟禁用效果（好用）

如果直接修改

el-input

的禁用样式非常困难或不可行，可以考虑使用遮罩层来模拟禁用效果。这种方法允许保持

el-input

的默认禁用行为（如不可编辑），同时通过视觉上的遮罩层来提供自定义的禁用样式。就是在

el-input

的外部包裹一个

div

容器，并在该容器内添加一个用于遮罩的

div

元素。这个遮罩层将覆盖在

el-input

之上。使用CSS将遮罩层定位到与

el-input

完全重合的位置，并设置其背景色、透明度等属性以达到期望的视觉效果。最后根据

el-input

的

disabled

属性动态地显示或隐藏遮罩层。盒子样式的具体代码参考如下：

<template>  
  <div class="input-wrapper" :class="{ 'is-disabled': isDisabled }">  
    <el-input :disabled="isDisabled" placeholder="这是一个可能禁用的输入框"></el-input>  
    <div class="mask" v-if="isDisabled"></div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isDisabled: true,  
    };  
  },  
};  
</script>  
  
<style scoped>  
.input-wrapper {  
  position: relative;  
  display: inline-block;  
}  
  
.mask {  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background-color: rgba(0, 0, 0, 0.1); /* 半透明背景 */  
  z-index: 1; /* 确保遮罩层在input之上 */  
  pointer-events: none; /* 防止遮罩层接收鼠标事件 */  
}  
  
.is-disabled .el-input {  
  /* 如果需要，也可以在这里添加一些额外的禁用样式 */  
}  
</style>

如此设置盒子会不留缝隙和多余，完美覆盖住input输入框

方法三：使用

readonly

属性代替

disabled

虽然

readonly

属性与

disabled

属性在功能上有所不同（

readonly

允许用户滚动查看文本，但不允许编辑；而

disabled

则完全禁用输入框），但在某些场景下，使用

readonly

属性可能是一个可行的替代方案。这允许保持输入框的视觉样式不变，同时阻止用户编辑内容。

然而，需要注意的是，

readonly

属性并不适用于所有需要禁用输入框的场景，特别是当你想完全阻止用户与输入框交互时。代码参考如下：

<template>  
  <el-input :readonly="isReadOnly" placeholder="这是一个只读的输入框"></el-input>  
  <el-checkbox v-model="isReadOnly">设置为只读</el-checkbox>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isReadOnly: true,  
    };  
  },  
};  
</script>

通过以上三种方法，你可以根据实际需求选择最适合的方式来解决

el-input

禁用状态的样式问题。

总结

综上所述，解决

el-input

禁用状态样式问题的方法多种多样，可以根据具体需求和项目情况选择最适合的方案。无论是通过深度选择器直接修改样式，还是使用遮罩层或

readonly

属性来间接实现，都能在一定程度上提升用户体验和界面美观度。