"Это 6-й день моего участия в ноябрьском испытании обновлений, ознакомьтесь с подробностями события:Вызов последнего обновления 2021 г."

• Эффект предварительного просмотра онлайн
• адрес репозитория git
• Идея реализации скиннинга в этой статье по-прежнему заключается в ручной настройке нескольких наборов тем, а затем динамическом переключении, иДинамическая тема Vue + element-ui и скин веб-сайта 2021, доступны для профессионального тестирования! ! !сходство.

окружающая обстановка

• Система win10 64
• версия узла v15.12.0
• "vue": "^3.0.0"
• "element-plus": "^1.2.0-beta.3"

Быстро реализовать переключение тем

• Основная реализация разделена на две части: 1. Получить файл темы 2. Использовать функцию для динамического переключения и загрузки переменных css в соответствии с типом темы.

Получить файлы темы

• Содержимое файла слишком длинное, скопируйте из репозитория примераНажмите, чтобы открытьИли скопируйте репозиторий напрямуюthemes.jsфайл в проект.

• Конечно, не все переменные css нужно менять, эта статья носит обучающий характер, поэтому все переменные (которые можно получить) сохраняются.Лично удалить и сохранить в соответствии с реальной ситуацией! ! !

Реализация переключателя темы

• Место в проекте, управляющее переключением тем, вводит полученное выше themes.js(Конечно, если имя вашего файла не такое, пожалуйста, приходите в соответствии с реальной ситуацией) Файл темы.
• Автор поставилsrc -> utils -> themes.jsкаталог, поэтому путь импортаimport themes from '@/utils/themes'.
• пройти черезswitchTheme函数Чтобы контролировать переключающий выключатель

switchTheme(type) {
  // 根据不同的主题类型 获取不同主题数据 
  // themes 对象包含 defaultTheme、darkTheme 两个属性即默认主题与深色主题
  // 通过`import themes from '@/utils/themes'` 导入
  type = type || 'darkTheme'
  const colorObj = themes[type]

  // 获取基本色色阶
  // colorMix是一个函数
  for (let i = 1; i < 10; i += 1) {
    colorObj[`--el-color-primary-light-${10 - i}`] = colorMix(colorObj['--el-color-white'], colorObj['--el-color-primary'], i * 0.1)
  }

  // 设置css 变量
  Object.keys(colorObj).map(item => {
    document.documentElement.style.setProperty(item, colorObj[item])
  })
}

• colorMix函数Пример репозитория находится по адресуsrc -> utils -> tool.jsэкспорт.

const colorMix = (color1, color2, weight) => {
  weight = Math.max(Math.min(Number(weight), 1), 0)
  let r1 = parseInt(color1.substring(1, 3), 16)
  let g1 = parseInt(color1.substring(3, 5), 16)
  let b1 = parseInt(color1.substring(5, 7), 16)
  let r2 = parseInt(color2.substring(1, 3), 16)
  let g2 = parseInt(color2.substring(3, 5), 16)
  let b2 = parseInt(color2.substring(5, 7), 16)
  let r = Math.round(r1 * (1 - weight) + r2 * weight)
  let g = Math.round(g1 * (1 - weight) + g2 * weight)
  let b = Math.round(b1 * (1 - weight) + b2 * weight)
  r = ("0" + (r || 0).toString(16)).slice(-2)
  g = ("0" + (g || 0).toString(16)).slice(-2)
  b = ("0" + (b || 0).toString(16)).slice(-2)
  return "#" + r + g + b;
}

Некоторые вопросы о переключении тем

Откуда берутся переменные css для переключения тем?

• Открыть elementPlus-uiОфициальный сайтf12 для проверки элементов. Получить все переменные css.

Как узнать, для чего используются эти переменные css?

• Часть этого можно догадаться по имени переменной css. Остальные могут пройтипредварительный просмотр онлайн-темы element-uiСравнивать! ! !

• Верх можно переключать, чтобы выбрать различные компоненты и стили для настройки

Каков базовый уровень цвета в функции switchTheme?

• Это переменная на картинке, которая управляет цветом фона навигационного меню и т. д.

Как быстро создать тему предварительного просмотра?

• Было замечено, что наименования основных цветовых переменных не сильно изменились.
• все еще проходитпредварительный просмотр онлайн-темы element-uiНастроить, потом вручную найти и заменить реализации, ну и конечно же можно пройти генерацию! !

Сайт меняется синхронно с цветами темы

• Цвет проекта должен соответствовать изменению темы, используйте переменные css темы, например:

Справочная статья

• Простая реализация динамической смены темы в Vue3 Element-Plus

Прошлые статьи

• Openlayers фактическая боевая офлайн-карта
• Эти две внешние библиотеки загрузки рекомендуются для вас
• vue3 JSX с нуля
• Vue3.0 настоящий бой, наступающий на яму
• Рука об руку настраиваем глобальную загрузку в проекте
• Vue реализует скинирование веб-сайта - переменные CSS
• пользовательская тема element-ui
• Динамическая тема Vue + element-ui и скин веб-сайта 2021, доступны для профессионального тестирования! ! !

Здесь все маленькие феи, и у красавца нет мнения, кроме тебя, правда?

• Предыдущая статья о переключении темы, смешно иметь больше избранных, чем лайков! ! ! ! !
• Если у вас есть вопросы по статье, пишите в комментарии!