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

邹邹2014

于 2024-09-09 16:26:49 发布

阅读量916

点赞数 15

文章标签： ui javascript vue.js

本文链接：https://blog.csdn.net/qq_62685154/article/details/142061741

版权

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

我发现即使使用了深度选择器（如::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禁用状态的样式问题。