Vue에서 CSS 모듈을 우아하게 사용

이번에는 Vue에서 CSS Module을 우아하게 사용하는 방법을 알려드리겠습니다. Vue에서 CSS 모듈을 우아하게 사용할 때 Notes는 무엇인가요?

CSS 모듈은 각 로컬 클래스에 전역적으로 고유한 클래스 이름을 부여하므로 구성 요소 스타일이 서로 영향을 미치지 않습니다. 예:

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

다음과 같이 변환됩니다.

/* button.css */
.buttonbutton--d8fj3 {
 font-size: 16px;
}
.buttonmini--f90jc {
 font-size: 12px;
}

CSS 모듈 파일을 가져올 때 로컬 클래스 이름을 전역 클래스 이름으로 매핑하는 개체를 제공합니다.

import styles from './button.css'
// styles = {
// button: 'buttonbutton--d8fj3',
// mini: 'buttonmini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules: 단순화된 클래스 이름 매핑

여기 CSS 모듈을 사용하는 버튼 그룹이 있습니다:

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: true,
 [styles.button]: true,
 [styles.mini]: mini
 }">点我</button>
</template>
<script>
 import styles from './button.css'
 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

실제로 CSS 모듈은 Vue 구성 요소 선택에 좋은 선택입니다. 하지만 다음과 같은 단점도 있습니다.

• 데이터에 스타일을 전달해야 합니다

• 글로벌 클래스 이름을 가져오려면 styles.localClassName을 사용해야 합니다.

• 다른 글로벌 클래스 이름이 있으면 반드시 넣어야 합니다. Together

• 컴포넌트의 property값에 바인딩하려면 로컬 클래스 이름과 속성 이름이 동일하더라도

위의 버튼 컴포넌트에 대해 다음을 사용합니다. vue-css- 이후 모듈:

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

현재:

• 데이터에 스타일을 전달할 필요는 없지만 mixins:full_moon_with_face:

• styles.localClassName에 작별 인사를 할 수 있습니다.

• 로컬 클래스 이름은 styleName 속성에 배치되고, 전역 클래스 이름은 클래스 속성에 배치됩니다. 이로 인해 많은 조정이 이루어집니다.

• 로컬 클래스 이름은 구성 요소의 속성을 동일한 이름으로 바인딩합니다. . 앞에 수정자

modifier

@button

<button styleName="@button">按钮</button>

을 추가하면 됩니다.

<button styleName="button" data-component-button="true">按钮</button>

이것은 구성 요소의 스타일을 외부에서 재설정할 수 있게 해줍니다:

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName="$type">按钮</button>

re 이는 다음과 같습니다. 템플릿

<button :styleName="type">按钮</button>

템플릿 내에서 CSS 모듈 사용

<button styleName=":mini">按钮</button>

Vue JSX에서 사용

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

Vue 렌더링 기능에서

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

사용 , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 자료: vue-cli를 사용하여 다중 모듈 패키징을 확장하는 방법

Vue 패키징을 사용하여 코드 분할을 최적화하는 방법

위 내용은 Vue에서 CSS 모듈을 우아하게 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!