admin管理员组

文章数量:1640619

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

本文标签： 提示信息文本状态下Placeholderdisabled

版权声明：本文标题：disabled状态下placeholder提示信息隐藏与textarea文本显示-input-ElementUI 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1729319081a1195656.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。