在Vue里CSS Modules优雅使用方法

php中世界最好的语言
Lepaskan: 2018-05-25 14:53:04
asal
2491 orang telah melayarinya

这次给大家带来在Vue里CSS Modules优雅使用方法,在Vue里CSS Modules优雅使用的注意事项有哪些,下面就是实战案例,一起来看一下。

CSS Modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了。如:

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

它会被转换为类似这样:

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

当导入一个 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;" />'
Salin selepas log masuk

vue-css-modules :简化类名映射

下面是一个使用了 CSS Modules 的按钮组件:

<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>
Salin selepas log masuk

的确,CSS Modules 对于 Vue 组件是一个不错的选择。但也存在以下几点不足:

  • 你必须在 data 中传入 styles

  • 你必须使用 styles.localClassName 导入全局类名

  • 如果有其他全局类名,你必须将它们放在一起

  • 如果要和组件的属性值绑定,就算局部类名和属性名一样,也要显式指定

对于上面的按钮组件,使用 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>
Salin selepas log masuk
Salin selepas log masuk

现在:

  • 你不必在 data 中传入 styles ,但得在 mixins 中传入 styles :full_moon_with_face:

  • 你可以跟 styles.localClassName 说拜拜了

  • 将局部类名放在 styleName 属性,全局类名放在 class 属性,规整了许多

  • 局部类名绑定组件同名属性,只需在其前面加上 : 修饰符

修饰符

@button

<button styleName="@button">按钮</button>
Salin selepas log masuk

这等同于:

<button styleName="button" data-component-button="true">按钮</button>
Salin selepas log masuk

这让你能在外部重置组件的样式:

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

$type

<button styleName="$type">按钮</button>
Salin selepas log masuk

这等同于:

<button :styleName="type">按钮</button>
Salin selepas log masuk

:mini

<button styleName=":mini">按钮</button>
Salin selepas log masuk

这等同于:

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

这等同于:

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

使用方法

在 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>
Salin selepas log masuk
Salin selepas log masuk

使用模板内部的 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>
Salin selepas log masuk

在 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>
 )
 }
}
Salin selepas log masuk

在 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'
 }, '点我')
 }
}
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样使用vue-cli扩展多模块打包

怎样使用Vue打包优化code spliting

Atas ialah kandungan terperinci 在Vue里CSS Modules优雅使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!