naive UI 提供的 useThemeVars 的最佳实践是？

  • Z时代
  • 2024-03-10
  • 分类：IT

import { useThemeVars } from 'naive-ui'
import { computed } from 'vue'
const theme = useThemeVars()
const textColor3 = computed(() => theme.value.textColor3)
.span {
   color: v-bind(textColor3);
}

如上所示，我在vue3中使用 naive UI 并且使用它提供的主题方案，有时候会需要修改一些样式属性，这时候需要使用 naive UI 提供的 useThemeVars 获取变量并通过 v-bind 传入 style 的样式中。
我感觉按照上述写法非常麻烦，在任何地方使用都必须用 computed 计算属性去获取指定的变量，这样每多一个变量就要再写多一行代码，而且换个组件又要写一遍。
可是不这样写的话，比如直接解构出来变量，变量就失去响应性了，无法在主题切换的时候随之一起改变。
我不知道是否有更好的实现方式?
理论上最好的应该是全局使用变量，不用增加在组件中的引入操作，并且还能保持响应性，但我不知道该如何实现。

回答：

发现另一种办法就是直接写在标签内，这样不需要再用计算属性获取变量，但是这样写的话，可能会导致 html 的代码变得比较臃肿。如果在多处地方使用，还不如写到 style 类中。

原来可以这样写：

.span {
    color: v-bind('themeVars.textColor3');
}

加个引号就可以。
这样就又简化了一些。

回答：

naiveui 的主题原理是 css 变量

不想用 useThemeVars + v-bind

可以在 css 里直接用它的 css 变量名

.span {
    padding: var(--n-padding);
    height: var(--n-height);
    font-size: var(--n-font-size);
}

以上是 naive UI 提供的 useThemeVars 的最佳实践是？ 的全部内容， 来源链接： utcz.com/p/934225.html

回到顶部