module style

使用场景

在使用项目里使用vue组件编写css样式时会经常考虑到作用域的问题,我们希望样式只在本组件内生效。
这时候经常用到scoped属性。

<template>
  <div>
  <!-- content-->
  </div>
</template>
<style scoped>
// style
</style>

以及和它作用类似的module属性

<template>
  <div>
  <!-- content-->
  </div>
</template>
<style module>
// style
</style>

Vue中的vue-loader已经集成了 CSS Modules,可以直接使用，在vue.config中设置类名的变化规则。

css: {
    loaderOptions: {
      css: {
        localIdentName: '[name]__[local]-[hash:base64:5]',
      }
    }
  }

这样[name]指向组件名字，[local]指向定义的类名，[hash:base64:5]随机生成一个5位的随机值。这样就保证了类名的独一无二。

使用

基础使用

在页面中使用时可以用$style调用类名,这样可以方便的使用js控制类名。

<template>
  <div :class="$style.myClass">
    content
  </div>
</template>
<script>

export default{
	created(){
		this.init()
  },
  methods:{
    init(){
      alert(this.$style.myClass) // app_myClass_2y6wN
    }
  }
}
</script>

<style module>
.myClass{
  color:red;
}
</style>

当一个元素有多个类名的时候直接将变量放入数组即可。

<template>
  <div :class="[$style.myClass,$style.others]">
    content
  </div>
</template>

变量控制类名。

<template>
  <div :class="[$style.myClass, { [$style.selected]: selected }]">
    content
  </div>
</template>

配合scss使用

<template>
  <div :class="$style.myClass">
    content
  </div>
</template>

<template>
  <div :class="[$style.myClass]">
    content
  </div>
</template>
<script>

export default{
	created(){
	this.init()
  },
  methods:{
    init(){
      alert(this.$style.myClass) // app_myClass_2y6wN
    }
  }
}
</script>

<style lang="scss" module>
$-color: red;

.my-class{
  color:$-color;
}
</style>