最近做了一个VUE项目，前端使用的是饿了么框架，但是开发过程中遇到一个问题，饿了么框架的样式都已经封装好了，要想自定义一些个性化的样式，还是比较困难，就比如要修改el-input disabled状态下的字体颜色，就比较麻烦，尝试一番无果后，于是百度一下，得到以下结果

.el-input.is-disabled /deep/ .el-input__inner {

color: #606266;

}

有效果吗？确实有效果，但是随之又带来了另一个问题，就是所有disabled状态下的el-input字体颜色都变了，而我要的效果是针对某一个el-input框去改变字体颜色，兴匆匆的操作查询一番，然并卵...

好吧，看来没有现成的可以伸手了，还是自己造吧，这里也不卖关子了，直接公布结果，上代码...

type="text"

v-model="orderId"

size="mini"

:disabled="true"

@click.native="showOrderDetailDialog=true;"

class="rt-input"

>

.rt-input /deep/ .el-input__inner {

color: rgb(92, 112, 234) !important;

cursor: pointer;

}

看到这里也不需要我多说什么了，赶紧动手试试吧。

本文由周末简设原创出品，如需转载请注明出处

本文出处：http://www.youtiy.com/detail_460.html