Vue는 CSS 변수를 사용하여 테마 전환 기능을 구현합니다.-CSS 튜토리얼-php.cn

Vue는 CSS 변수를 사용하여 테마 전환 기능을 구현합니다.

angryTom

풀어 주다： 2019-11-29 16:47:05

앞으로

3663명이 탐색했습니다.

테마 관리는 웹사이트에서 흔히 볼 수 있습니다. 일반적인 아이디어는 테마와 관련된 CSS 스타일을 분리하고 사용자가 테마를 선택하면 해당 CSS 스타일 파일을 로드하는 것입니다. 이제 대부분의 브라우저는 CSS 변수와 잘 호환되며 테마 스타일을 관리하기가 더 쉽습니다. 최근에는 Vue 프로젝트에서 CSS 변수를 사용하여 테마 연습을 했는데요. 전체 과정을 살펴보겠습니다.

Vue는 CSS 변수를 사용하여 테마 전환 기능을 구현합니다.

Github 프로젝트 주소 https://github.com/JofunLiang/vue-project-themable-demo

Demo 주소 https://jofunliang.github.io/vue-project-themable-demo/

타당성 테스트

타당성을 테스트하려면 메소드 속성 중 public 폴더 아래에 테마 폴더를 생성하고 themes 폴더에 새 default.css 파일을 생성합니다:

:root {
  --color: red;
}

로그인 후 복사

#🎜 🎜# 권장 학습:

CSS 비디오 튜토리얼

외부 스타일 소개

theme.css를 공용 폴더의 index.html 파일에 추가합니다. # 🎜🎜#

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-skin-peeler-demo</title>
    <!-- 引入themes文件夹下的default.css -->
    <link rel="stylesheet" type="text/css" href="src/themes/default.css" rel="external nofollow">
  </head>
  <body>
    <noscript>
      <strong>We&#39;re sorry but vue-skin-peeler-demo doesn&#39;t work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

로그인 후 복사

그런 다음 Home.vue에서 CSS 변수를 사용합니다.

<template>
  <div>
    <div :class="$style.demo">变红色</div>
  </div>
</template>
<script>
export default {
  name: &#39;home&#39;
}
</script>
<style module>
  .demo {
    color: var(--color);
  }
</style>

로그인 후 복사

그런 다음 프로젝트를 실행하고 브라우저에서 페이지를 열면 페이지가 정상적으로 표시됩니다.

참고: CSS 스타일을 도입하기 위해 링크 태그를 사용하는 @vue/cli는 "죄송하지만 vue-skin-peeler-demo는 JavaScript 없이는 제대로 작동하지 않습니다"라는 오류가 보고될 수 있습니다. 계속하려면 활성화하세요." 이는 @vue/cli가 webpack을 통해 src 디렉터리의 모든 파일을 패키징했기 때문에 발생합니다. 따라서 정적 파일 리소스는 public(@vue/cli 2.x 버전이 static에 있는 경우) 폴더에 배치되어야 합니다.

테마 전환 달성

여기에서 테마 전환 아이디어는 href를 대체하는 것입니다. 링크 태그의 속성이므로 대체 함수를 작성하고 src 디렉터리에 새

themes.js

파일을 만들어야 합니다. 코드는 다음과 같습니다.

// themes.js
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement(&#39;link&#39;)
    $link.rel = &#39;stylesheet&#39;
    $link.type = &#39;text/css&#39;
    document.querySelector(&#39;head&#39;).appendChild($link)
    return $link
  }
})()
/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = &#39;default&#39;) => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  return theme
}
export default toggleTheme

로그인 후 복사

#🎜🎜 #그런 다음 테마 파일 아래에

default.css와

dark.css 두 개의 테마 파일을 만듭니다. 테마를 구현하기 위해 CSS 변수를 만듭니다. CSS 변수로 테마 전환을 구현하려면 CSS 변수와의 첫 접촉Compatibility

IE 브라우저 및 일부 이전 브라우저를 참조하세요. CSS 변수를 지원하지 않으므로 이전 브라우저와 최신 브라우저 모두에서 CSS 사용자 정의 속성("CSS 변수"라고도 함)에 대한 클라이언트 측 지원을 제공하는 ponyfill인 css-vars-ponyfill을 사용해야 합니다. 감시 모니터링을 활성화해야 하므로 MutationObserver.js도 설치해야 합니다.

설치:

npm install css-vars-ponyfill mutationobserver-shim --save

로그인 후 복사

그런 다음 themes.js 파일에 소개하고 사용하세요.

// themes.js
import &#39;mutationobserver-shim&#39;
import cssVars from &#39;css-vars-ponyfill&#39;
cssVars({
  watch: true
})
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement(&#39;link&#39;)
    $link.rel = &#39;stylesheet&#39;
    $link.type = &#39;text/css&#39;
    document.querySelector(&#39;head&#39;).appendChild($link)
    return $link
  }
})()
/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = &#39;default&#39;) => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  return theme
}
export default toggleTheme

로그인 후 복사

보기 시작 이후 IE 11 브라우저에서 테마 전환 스위치를 클릭하면 작동하지 않습니다. 따라서 테마를 전환할 때마다 cssVars()를 다시 실행하면 여전히 테마를 전환할 수 없습니다. 그 이유는 watch를 켠 후 cssVars()를 다시 실행하는 것이 유효하지 않기 때문입니다. 마지막으로 유일한 옵션은 시계를 껐다가 다시 켜는 것입니다. 테마 전환에 성공한 theme.js 코드는 다음과 같습니다.

// themes.js
import &#39;mutationobserver-shim&#39;
import cssVars from &#39;css-vars-ponyfill&#39;
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement(&#39;link&#39;)
    $link.rel = &#39;stylesheet&#39;
    $link.type = &#39;text/css&#39;
    document.querySelector(&#39;head&#39;).appendChild($link)
    return $link
  }
})()
/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = &#39;default&#39;) => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  cssVars({
    watch: false
  })
  setTimeout(function () {
    cssVars({
      watch: true
    })
  }, 0)
  return theme
}
export default toggleTheme

로그인 후 복사

모든 코드를 보려면 Github 프로젝트 주소로 이동하세요.

테마 기억하기

테마를 기억하는 기능을 구현하려면 하나는 테마를 서버에 저장하는 것이고, 다른 하나는 로컬 저장소 테마를 사용하려면 여기서는 편의상 테마의 로컬 저장 방식을 주로 사용합니다. 즉, 테마를 저장하기 위해 localStorage를 사용합니다. 구체적인 구현을 위해서는 Github 프로젝트 주소를 방문하세요.

이 기사는 PHP 중국어 웹사이트,

CSS 튜토리얼

칼럼에서 가져온 것입니다. 학습을 환영합니다

위 내용은 Vue는 CSS 변수를 사용하여 테마 전환 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!