disabled状态下placeholder提示信息隐藏与textarea文本显示-input-ElementUI

disabled状态下placeholder提示信息隐藏与textarea文本显示-input-ElementUI

  在实际项目开发中，对于表格内容添加、修改、查看往往会共用同一个组件-对话框，通过一个标志来区分。在查看时，对于表单中输入框，我们希望只能查看不能修改，这是使用disabled属性，那么问题来了：

• 问题
  1. disabled转态下我们希望隐藏placeholder提示信息
  2. textarea文本能正常显示

• 解决
  • 通过属性控制disabled值与placeholder的值
  • 修改样式：f12查看textarea内文字对应的样式类名

 <el-input v-model="form.remarks" :placeholder="editable?'':'请输入XXXXXX'"  :disabled="editable" clearable></el-input>
 
 // 样式
*>>>.el-textarea.is-disabled .el-textarea__inner {
  opacity: 1;
  color: #0A0813;
}

修改后如图：

  但是当我们用IE打开的时候样式没生效，再次f12打开查看，发现特别坑的问题,样式类名居然‘调个了’，好吧在次修改样式：

  *>>>.el-textarea.is-disabled .el-textarea__inner {
      opacity: 1;
      color: #0A0813;
  }

  *>>>.is-disabled.el-textarea .el-textarea__inner {
      opacity: 1;
      color: #0A0813;
  }

  然后小伙伴们发现哪里不一样了吗？遇到其他浏览器不兼容问题同样的方式解决。

  欢迎交流，本人QQ:806797785

项目源代码地址：https://gitee.com/gaogzhen