Vue에서 CSS 모듈을 우아하게 사용-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-05-25 14:53:04

원래의

2546명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!