Изменение стиля компонентов element-ui по умолчанию всегда было старой темой.После завершения всего проекта компании я резюмировал следующие 4 метода изменения стиля element-ui по умолчанию.
1. Используйте глобальное единообразное покрытие
Для некоторых общих компонентов с фиксированными стилями их можно обрабатывать глобально, создавая новый.cssилиscssфайл, перезаписывая исходный класс элемента
ты сможешьsrc/stylesСоздайте новый в каталогеelement-ui-reset.scss, в соответствии с потребностями пользовательского интерфейса измените исходное имя класса
использоватьscssПреимущество в том, что вы можете использовать переменные для обработки различных изменений в пользовательском интерфейсе.
Например, наши часто используемые кнопки, пейджинг, флажки и другие компоненты в основном имеют один и тот же дизайн в пользовательском интерфейсе, тогда я могу изменить эти стили единообразно.
element-ui-reset.scss
$danger-btn-color: #F25454;
$primary-btn-color:#3d66e4;
$success-btn-color:#12A763;
//修改默认按钮颜色
.el-button--primary{
background-color: $primary-btn-color;
border-radius: 4px;
//border: 1px solid $primary-btn-color;
font-size: 16px;
border: 0;
}
//修改危险按钮的颜色
.el-button--danger{
background-color: $danger-btn-color;
border-radius: 4px;
//border: 1px solid $danger-btn-color;
font-size: 16px;
border: 0;
}
//修改成功按钮的颜色
.el-button--success{
background-color: $success-btn-color;
border-radius: 4px;
//border: 1px solid $success-btn-color;
font-size: 16px;
border: 0;
}
//修改默认按钮的颜色
.el-button--default{
font-size: 16px;
border-radius: 4px;
}
//修改成功按钮的颜色
.el-button--warning{
//background-color: $success-btn-color;
border-radius: 4px;
//border: 1px solid $success-btn-color;
font-size: 16px;
border: 0;
}
//修改分页颜色
.el-pagination{
position: absolute;
display: inline-block;
margin: 0 auto;
left:50%;
transform: translateX(-50%);
background-color: #fafafa;
border: solid 1px #dfe8eb;
padding: 0 !important;
.el-pager{
margin: 0 !important;
.number{
color: #3d66e4 !important;
border-left: 1px solid #dfe8eb;
border-right: 1px solid #dfe8eb;
background-color: #fafafa !important;
&.active{
color: #fff !important;
//border: 1px solid #3d66e4;
background-color: #3d66e4 !important;
border: 1px solid #3d66e4 !important;
}
}
}
}
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
margin: 0 !important;
background-color: #fafafa !important;
}
//修改checkbox
.el-checkbox__inner{
border: 1px solid #C0C0C0 ;
width: 16px;
height: 16px;
border-radius: 0;
}
тогда в вашемmain.jsвведен в
import './src/styles/element-ui-reset.scss'
так
преимущество
- Глобальное покрытие, избавьте от проблем
- Больше гибкости с scss
- Переопределения стилей можно удалить в любое время.
недостаток
- Необходимо перезаписать при локальном изменении
- Все измененные компоненты имеют одинаковый стиль
2. В.vueизменено в файле
Этот метод заключается в добавлении нового в файл vue.styleЭтикетка
Используется для изменения некоторых конкретных стилей компонентов, но не применяется глобально.
Например, некий.vueфайл требует специально настроенногоtableкомпоненты, в то время как другие файлы должны использовать оригинальный стиль
Таким образом, лучший способ для нас справиться с этим состоит в том, чтобы.vueдобавить новый в файлstyleЭтикетка
редактировать здесьtable的默认样式
<template>
<div class="my-class">
<el-table>
</el-table>
</div>
</template>
<script>
</script>
<style scoped="scoped" lang="scss">
</style>
<style>
/* 修改element-ui中table组件的样式 */
.my-class__expand-column .cell {
display: none;
}
.my-class .el-table tbody tr:hover>td {
cursor: pointer;
}
.my-class .el-form .el-form-item .el-input__inner:focus{
border: 1px solid #3D66E4;
}
</style>
Но обратите внимание,Обязательно добавьте уникальную областьТо есть самое внешнее имя класса, такое как мое вышеmy-class. он ограничивает токtableИзмененный стиль может действовать только в классе и его дочерних элементах.
В противном случае стиль таблицы все равно будет глобально переопределен.
Конечно, если вы хотите, вы можетеclassзаменитьid, что гарантирует, что имена классов не конфликтуют
<template>
<div id="my-class">
<el-table>
</el-table>
</div>
</template>
<style>
/* 修改element-ui中table组件的样式 */
#my-class__expand-column .cell {
display: none;
}
#my-class .el-table tbody tr:hover>td {
cursor: pointer;
}
#my-class .el-form .el-form-item .el-input__inner:focus{
border: 1px solid #3D66E4;
}
</style>
Преимущество этого подхода в том, что вы можете динамически связывать определенные классы
<template>
<div id="my-class">
<el-table :class="my-table">
</el-table>
</div>
</template>
<style>
/* 修改element-ui中table组件的样式 */
#my-class__expand-column .cell {
display: none;
}
#my-class .el-table tbody tr:hover>td {
cursor: pointer;
}
#my-class .el-form .el-form-item .el-input__inner:focus{
border: 1px solid #3D66E4;
}
#my-class .my-table {
}
</style>
преимущество
- Гибкая настройка и динамическая привязка
- глобально не меняется
недостаток
- Необходимо указать уникальную область класса
3. Измените стиль компонента
Я не очень рекомендую этот метод, оставляя в стороне избыточность, я не могу гарантировать, что он сработает (зависит от поддержки исходного кода element-ui).
Однако для некоторых редко используемых компонентов, которым требуются динамически связанные свойства, вы можете использовать его.
так<el-backtop>компонент, мне может понадобиться привязать к нему некоторые свойства динамического стиля
так что вы можете связать егоstyle
<el-backtop target="" :bottom="100" >
<div :style="{
height: 100%;
width: _width;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
border-radius: 50%;
}">
<i class="el-icon-caret-top"></i>
</div>
</el-backtop>
data() {
return{
_width: 50%
}
}
преимущество
- Гибкий и удобный
- динамическая привязка
недостаток
- избыточность
- Высокая муфта
4. Обратитесь к API официальной документации element-ui.
Официальный сайт некоторых компонентов дает апи для изменения стиля
Вы можете указать стиль компонента в соответствии с API
преимущество
- официальный
недостаток
- Поддерживается меньше компонентов
сомневаться
Зачем добавлять новый тег стиля?
Потому что в процессе фактического использования я обнаружил, что запись сscopedНекоторые классы атрибутов не влияют на компоненты element-ui.
В результате какие-то модифицированные стили можно использовать, а какие-то нельзя, поэтому все теги стилей просто переписываются.
Почему бы не использовать атрибут !important
Этот парень слишком властный, более обязательный, чем глобальные перемены. Кроме того, трудно писать
Почему бы не использовать ::v-глубокое проникновение
Во-первых, если не считать отвратительного стиля письма, его связанность слишком высока.
Если вам не нужны переопределения стилей, вы просто удаляете новыеstyleЭтикетка
и использовать::v-deepЕсли да, меняйте строчку за строчкой, кто это выдержит?
Суммировать
Вышеупомянутый метод не является очень официальным методом, но метод, который я подытожил, наступив на яму в своей ежедневной разработке.
Это не идеально, но в значительной степени решает мою проблему.
Если у вас есть хороший метод или вы думаете, что у меня есть какие-либо ошибки или упущения, пожалуйста, укажите их в области комментариев.