这篇文章主要为大家详细介绍了Vue 中使用 CSS Modules优雅方法,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
CSS Modules:局部作用域 & 模块化
CSS Modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了。如:
代码如下:
/* button.css */
.button {
font-size: 16px;
}
.mini {
font-size: 12px;
}
它会被转换为类似这样:
代码如下:
/* button.css */
.button__button--d8fj3 {
font-size: 16px;
}
.button__mini--f90jc {
font-size: 12px;
}
当导入一个 CSS 模块文件时,它会将局部类名到全局类名的映射对象提供给我们。就像这样:
代码如下:
import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="' + styles.button + ' ' + styles.mini + '" />'
下面是一个使用了 CSS Modules 的按钮组件:
代码如下:
<template>
<button :class="{
'global-button-class-name': true,
[styles.button]: true,
[styles.mini]: mini
}">点我</button>
</template>
<script>
import styles from './button.css'
export default {
props: { mini: Boolean },
data: () => ({ styles })
}
</script>
的确,CSS Modules 对于 Vue 组件是一个不错的选择。但也存在以下几点不足:
对于上面的按钮组件,使用 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>
现在:
@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">
点我
</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'
}, '点我')
}
}
以上所述是小编给大家介绍的Vue 中使用 CSS Modules优雅方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持!
本文来自:http://www.q1010.com/184/4957-0.html
注:关于Vue 中使用 CSS Modules优雅方法的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。