element UI 中 el-input 的一些样式修改

我心飞翔 分类:javascript

今天也有很努力的在赚猫粮钱

接到一个需求,做一个比较简单的表单,项目中用到的是elementUI框架,所以遵循之前同事的代码风格也就用了这个框架,遇到的问题就是el-input修改默认样式。

如若文章存在错误或不足,望理解并帮我指出,感激不尽


首先看一下需要实现的效果:

image.png

我需要去除el-input的边框,并且文本是只读。

看一下elementUI官方文档的属性说明

image.png

如果只是想要用户无法修改接口返回的内容,用disabled也是可以的,但是样式不太美观

image.png

如果用readonly就可以达到效果啦

然后就是去除el-input 默认的边框

首先去控制台检查里通过dom元素查看elementUI样式的class

image.png

最好是在外层dom上添加自己命名的类名,以防全局样式造成污染

image.png

代码:

<el-form-item label="key:" class="session-file__item">
<el-input type="textarea" autosize  v-model="formSessionFile.fileKey" readonly class="session-file__form"></el-input>
</el-form-item>
<el-form-item label="可填入IP地址:" class="session-file__item">
<el-input v-model="formSessionFile.fileIP" readonly class="session-file__form"></el-input>
</el-form-item>
 
.session-file__form .el-input__inner {
  border: 0 !important;
  outline: none;
}

.session-file__form .el-textarea__inner {
  border: 0 !important;
  resize: none;
}
 

回复

我来回复
  • 暂无回复内容