«Это третий день моего участия в ноябрьском испытании обновлений. Подробную информацию об этом событии см.:Вызов последнего обновления 2021 г.".
Проведите по заголовку, чтобы просмотреть эффект перехода темы
- Адрес склада git этой статьиПроведите, чтобы просмотреть
- Общая идея скина темы в этой статье состоит в том, чтобы настроить несколько наборов тем element-ui, а затем реализовать его, динамически изменяя файл стиля ссылки href, и, наконец, реализовать общий скин веб-сайта в сочетании с переменными css.
- Назовите похвалу здесьarcoDesignОн поставляется с переключением темной темы, что также очень удобно. Но поддерживается только vue3.
- Говоря об этом, я должен сказать, что element-plus так долго обновлялся, онлайн-тема еще не была сделана (2021-11-08), поэтому эта статья не относится к element-plus (element-plus похоже переписали некоторые стили, так что прямо есть некоторые проблемы с использованием стилей element-ui 🤐).
Среда проекта
- системная победа
- vue-cli3.x
- element-ui: "^2.14.1"
- вью: "^ 2.6.11"
пользовательская тема element-ui
- Общий скин element-ui, вы должны сначала настроить тему в соответствии с вашими потребностями, рекомендуется просмотреть официальную документациюО пользовательских темахВ этом разделе представлены официально предоставленные пользовательские инструменты темы.
- Для настройки темы мы используем онлайн-инструмент создания темы element-ui.эта статья
Реализовать динамическое переключение тем
- Судя по окончательным практическим результатам, независимо от того, какая динамическая настройка el (элемент-ui упоминается как el в конце), тема должна динамически переключаться css для достижения. Конечно, я также отношу динамически изменяющиеся переменные sass к динамическому переключению css.
Скопируйте файлы стилей в каталог статических файлов.
- После завершения пользовательской темы el вышенажмите, чтобы скачатьВы получите файл темы, на самом деле вам нужно только содержимое папки темы, но рекомендуется скопировать папку напрямую и закинуть в каталог статических файлов. Статические файлы vue-cli2 обычно находятся в корневом каталоге.
staticПапка, статические файлы vue-cli3 обычно можно поместить вpublicпод папку. - Зачем помещать его в статическую папкуПоскольку файл стиля вводится в index.html по ссылке, файл не будет найден где-либо еще.
- Переключаются два набора тем. В примере используется сочетание темных и светлых цветов. Светлый цвет на самом деле представляет собой меловую тему, а темный цвет — пользовательскую тему. Поместите загруженный файл стиля css в файл темы public ->, чтобы получить такой каталог. (Два документа можно собрать вместе, почему бы не поставить это демо!!! 1)
импортировать файл стиля css
- существуетindex.htmlИмпортируйте файл стиля, как показано на следующем рисунке.
Динамически меняйте темы
- На самом деле, это использование элементов на картинке выше.
idИзмените его позжеlinkизhrefценность . заимствовано здесьэта статьяраздел «Справочные методы».
let themeName = this.currentSkinName || 'defaultTheme'
const typeObj = {
darkTheme: './theme/darkTheme/theme/index.css',
defaultTheme: './theme/defaultTheme/theme/index.css',
}
document.getElementById('themeStyle').href = typeObj[themeName]
Синхронизированная шкурь сайта и темы
- Это требует использования переменных css, предопределенных переменных стиля и как можно меньшего количества цветовых переменных, чтобы делать больше с меньшим количеством переменных.
- В коде примера просто реализован только скиннинг сайта, что не является оптимальным решением, можете сослаться на него, конечно, использовать его напрямую не составляет большой проблемы.
- Исходный код Листайте для просмотра