vue 中动态样式的小技巧

平时开发过程中, 肯定会遇到一些动态样式的处理, 不论是 vue2.x、vue3.x 大家第一反应应该是 :style = [...], 今天给大家介绍一个新的小技巧. 今天仅拿 vue3.x 举例子, 因为 vue2.x 和 vue3.x 没太大区别

话不多说, Let’s right

先看传统写法

<template>
  <div class="demo">
    <span :style="[colorRef ? 'color: red' : 'color: blue']">
      看我颜色变化
    </span>
    <button @click="handleChangeColor">点击切换</button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const colorRef = ref(true)

const handleChangeColor = () => (colorRef.value = !colorRef.value)
</script>

虽然能够实现效果, 但是书写很麻烦, 还有就是这种写法生成的是行内样式, 就可能会覆盖样式内容

新的小技巧去实现

<template>
  <div class="demo">
    <span :style="[cssVarsRef]"> 看我颜色变化 </span>
    <button @click="handleChangeColor">点击切换</button>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'

const colorRef = ref(true)
const cssVarsRef = computed(() => {
  let cssVars = {}

  if (colorRef.value) {
    cssVars = {
      '--ray-color': 'red',
    }
  } else {
    cssVars = {
      '--ray-color': 'blue',
    }
  }

  return cssVars
})

const handleChangeColor = () => (colorRef.value = !colorRef.value)
</script>
<style lang="scss" scoped>
.demo span {
  color: var(--ray-color);
}
</style>

利用 css 变量去实现复杂的动态样式, 并且这么写之后会编译为如下结果. 虽然这个例子并不能体现出多大的特点出来, 但是假设一下, 你需要封装一个组件, 是一个很复杂的 UI 样式组件, 去写很多的三目运算明显很不利于后期的拓展

element.style {
    --ray-color: blue;
}

.demo span[data-v-738ab9dc] {
    color: var(--ray-color);
}

vue3.x 的专属写法

<template>
  <div class="demo">
    <span> 看我颜色变化 </span>
    <button @click="handleChangeColor">点击切换</button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const colorRef = ref(true)
const spanColor = ref('red')

const handleChangeColor = () => {
  colorRef.value = !colorRef.value

  colorRef.value ? (spanColor.value = 'red') : (spanColor.value = 'blue')
}
</script>
<style lang="scss" scoped>
.demo span {
  color: v-bind(spanColor);
}
</style>

这是 vue3.x 后, 开箱即用的一种 js in css 的方法. 可以搭配 css 预处理器完成一些样式的初始化

结语

差不多就介绍到这儿了, 如果有不清楚的可以直接在 Github 给我留言一起讨论, ray