初学者学习Element-plus时一个小小的注意事项

云起&

于 2024-08-04 13:14:04 发布

阅读量276

点赞数 3

文章标签： elementui vue 前端

本文链接：https://blog.csdn.net/c335000/article/details/140904859

版权

省流：vue的scoped影响Element-plus组件样式修改

一、前提

一开始看到Element-plus组件库，觉得熟练使用肯定能快速提高前端开发的效率。然而在简单复制组件源代码，并试图进行修改时，发现无论怎么修改，页面都没有正常显示修改内容。

二、学习过程

1.在使用<el-input ></el-input>时，可以设置宽度却不能设置高度，查阅官方文档，提供了size属性，可使用的值为：'large' | 'default' | 'small'。四方的矩形没踩在我的审美之上，仅仅想简单增加一个圆角属性，无论加在哪里都没有效果。

2.到处查阅之后，有方法说使用深度选择器＞＞＞和 /deep/，在认为马上就要解决问题并开心地学习如何使用后,修改代码——>运行代码——>报错：

the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

3.报错内容还是很容易理解的，于是在重新学习并认为马上就要解决问题后,修改代码——>运行代码——>没反应。至此，加上到处捣鼓的时间，已经花费了一个小时了（从头开始设计<input>的样式最多也就十分钟吧！！！）。因此放弃，自己设计

4.代码中还使用了<el-checkbox></el-checkbox>，原生的浅蓝色实在不搭我的风格。于是想要修改颜色。有了前车之鉴，在查询到解决办法，并稍作修改后：

.myCheckBox.is-bordered.is-checked {
  border-color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
  color:  rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: rgba(51, 63, 80, 0.7);
  background-color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-focus .el-checkbox__inner{
  border-color:  rgba(51, 63, 80, 0.7);
}

好！没反应！！！

三、解决方法

后来看到一篇文章，里面提到“重新写的样式不能写在scoped的style里面，放scoped里面的话修改无效！”

于是在原有的vue文件最下面，新增如下代码：

<style>
.myCheckBox.is-bordered.is-checked {
  border-color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
  color:  rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: rgba(51, 63, 80, 0.7);
  background-color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-focus .el-checkbox__inner{
  border-color:  rgba(51, 63, 80, 0.7);
}
</style>

终于得到改变：