집 > 기사 > 웹 프론트엔드 > CSS 모듈 우아한 모드 사용법

CSS 모듈 우아한 모드 사용법

php中世界最好的语言원래의: 2018-04-28 16:41:242058검색

이번에는 엘레강트 모드에서 CSS 모듈을 사용하는 방법과 엘레강트 모드에서 CSS 모듈을 사용할 때의 주의사항에 대해 알려드리겠습니다.

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
컴포넌트의 속성값에 바인딩하려면 로컬 클래스명과 속성명이 동일하더라도 명시적으로 지정해야 합니다.

위의 버튼 컴포넌트의 경우 다음을 사용합니다. vue-css-modules :

<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>

Now:

데이터에 스타일을 전달할 필요는 없지만 믹스인에 스타일을 전달해야 합니다. :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>

이는 다음과 동일합니다:

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

:mini

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

이것은 다음과 동일합니다:

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

이것은 다음과 동일합니다:

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

Usage

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>

템플릿 내부에서 CSS 모듈 사용

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

Vue JSX에서 사용

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

Vue 렌더링 기능에서 사용

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render(h) {
 return h('button', {
  styleName: '@button :mini'
 }, '点我')
 }
}

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!