「后端小伙伴来学前端了」Element修改默认样式 | 记录自己学习前端踩坑日记

一、Element修改下拉框角标

就比如我最近遇上的一个问题，想要重定义 element 组件库中的下拉选择框的角标，一直不知道怎么覆盖才好。

最后才知道是由伪元素做的。

image-20211106003357324

如果我们想要重定义element中下拉框的图标，就只要将它的伪元素做一下样式的修改就好了。

.el-select__caret::before{
    content: "\e78f"!important;
    font-size: 18px;
}

只要替换content中的内容即可。便可以轻松换掉图标了。

我的效果图

image-20211106003629400

二、Element修改文本框样式

问题：

就是最近在我们老师布置的项目中，要求这个文本框必须没有那个三角、其次能够根据输入内容自动扩大。

但是在Element中的组件中，这些都是默认的。

image-20211106233137129

2.1、去掉默认的三角

textarea{resize: none};

这个resize属性就是规定是否可由用户调整元素的尺寸。

1. none：用户无法调整元素的尺寸。
2. both：用户可调整元素的高度和宽度。
3. horizontal：用户可调整元素的宽度。
4. vertical：用户可调整元素的高度。

2.2、根据输入内容自动扩大

查了下element文档，就是给这个标签添加一个autosize属性，便可以做到根据内容自动增长。

<el-input
          type="textarea"
          :rows="5"
          placeholder="Enter Question..."
          v-model="textarea"
          autosize
          >
</el-input>

结果。

image-20211106234208660

注意点

修改这些默认样式的时候，应该放在scope里面，否则会造成样式污染。

小白玩家已经踩坑😂，大家一定要注意。

三、自言自语

目前还是前端小白，希望大家多多谅解，正在努力中。

纸上得来终觉浅，绝知此事要躬行。 大家好，我是博主宁在春：主页 一名喜欢文艺却踏上编程这条道路的小青年。 希望：我们，待别日相见时，都已有所成。

明天写伪元素的文章，先立个Flag在这😁

在这里插入图片描述