欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue中使用CSSModules優(yōu)雅方法

CSS Modules：局部作用域 & 模塊化

成都創(chuàng)新互聯(lián)致力于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過(guò)標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。 選擇成都創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

CSS Modules 為每一個(gè)局部類(lèi)賦予全局唯一的類(lèi)名，這樣組件樣式間就不會(huì)相互影響了。如：

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

它會(huì)被轉(zhuǎn)換為類(lèi)似這樣：

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

當(dāng)導(dǎo)入一個(gè) CSS 模塊文件時(shí)，它會(huì)將局部類(lèi)名到全局類(lèi)名的映射對(duì)象提供給我們。就像這樣：

import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="' + styles.button + ' ' + styles.mini + '" />'

vue-css-modules ：簡(jiǎn)化類(lèi)名映射

下面是一個(gè)使用了 CSS Modules 的按鈕組件：

<template>
 <button :class="{
 'global-button-class-name': true,
 [styles.button]: true,
 [styles.mini]: mini
 }">點(diǎn)我</button>
</template>
<script>
 import styles from './button.css'

 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

的確，CSS Modules 對(duì)于 Vue 組件是一個(gè)不錯(cuò)的選擇。但也存在以下幾點(diǎn)不足：

  • 你必須在 data 中傳入 styles
  • 你必須使用 styles.localClassName 導(dǎo)入全局類(lèi)名
  • 如果有其他全局類(lèi)名，你必須將它們放在一起
  • 如果要和組件的屬性值綁定，就算局部類(lèi)名和屬性名一樣，也要顯式指定

對(duì)于上面的按鈕組件，使用 vue-css-modules 后：

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 點(diǎn)我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'

 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

現(xiàn)在：

  • 你不必在 data 中傳入 styles ，但得在 mixins 中傳入 styles :full_moon_with_face:
  • 你可以跟 styles.localClassName 說(shuō)拜拜了
  • 將局部類(lèi)名放在 styleName 屬性，全局類(lèi)名放在 class 屬性，規(guī)整了許多
  • 局部類(lèi)名綁定組件同名屬性，只需在其前面加上 : 修飾符

修飾符

@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 ? 'mini' : ''">按鈕</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按鈕</button>

這等同于：

<button :styleName="isDisabled ? 'disabled' : ''">按鈕</button>

使用方法

在 Vue 模板中使用

引入模板外部的 CSS 模塊

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

使用模板內(nèi)部的 CSS 模塊

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 點(diǎn)我
 </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">點(diǎn)我</button>
 )
 }
}

在 Vue 渲染函數(shù)中使用

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'
 }, '點(diǎn)我')
 }
}

總結(jié)

以上所述是小編給大家介紹的Vue 中使用 CSS Modules優(yōu)雅方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

本文題目：Vue中使用CSSModules優(yōu)雅方法
轉(zhuǎn)載來(lái)于：http://chinadenli.net/article2/gehhic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、自適應(yīng)網(wǎng)站、虛擬主機(jī)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開(kāi)發(fā)