vue3中样式的多种动态写法

vue3中样式的多种动态写法

1.:slotted() :global()

<!--  -->
<script setup lang='ts'>
</script>
<template>
<div class=''>
  <slot></slot>
</div>
</template>

<style lang='scss' scoped>
:slotted(.text) { // 插槽里面的class是text的样式
  color: yellowgreen;
}
// :global(div) { // 全局的div都会添加上
//   border: 2px solid red;
// }
</style>

2. script动态定义style中的属性值

<!--  -->
<script setup lang='ts'>
import {ref,reactive} from 'vue'
const color = ref('pink')
// 如果是对象的形式
const colorObj = ref({color: 'yellow'})
</script>
<template>
<div class=''>
  <slot></slot>
</div>
</template>

<style lang='scss' scoped>
:slotted(.text) {
  color: v-bind(color)
  border: 3px solid v-bind('colorObj.color')// 注意这个写法
}
</style>

3. 样式module的写法, module=‘xxx’也可以自定义名字,自定义名字之后$style也要做相应的改变

<!--  -->
<template>
<div :class='[$style.textSty,$style.boderSty]'> //只有一个用字符,多个用数组

    样式穿透:vue3 使用 :deep(.el-input__inner) {font-size:12px}
</div>
</template>
<style lang='scss' module>
.textSty {
  color: red
}
.boderSty {
  border-bottom: 4px solid black;
}
</style>

4.获取模块样式的hook钩子函数useCssModule

<!--  -->
<script setup lang='ts'>
import {ref,reactive,useCssModule} from 'vue'
const css = useCssModule('lxm')
console.log(css)
</script>
<template>
<div :class='[lxm.textSty,lxm.boderSty]'>
    样式穿透:vue3 使用 :deep(.el-input__inner) {font-size:12px}
</div>
</template>
<style lang='scss' module="lxm">
.textSty {
  color: red
}
.boderSty {
  border-bottom: 4px solid black;
}
</style>