如何将Vue类绑定转换为classlist的字符串？

xpcnnkqh 于 2023-10-23 发布在 Vue.js

关注(0)|答案(1)|浏览(150)

我正在构建一个组件，它将在body元素上设置类，该元素位于Vue应用程序之外。因此，我不能在元素上使用类绑定，我必须使用element.classList。
我有一个像Vue类绑定那样接受类的prop;字符串、表达式、数组或对象（React有一个单独的库，名为classnames）。
举例来说：

<BodyBridge background-class="bg-gray-300" />
<BodyBridge :background-class="isCertainPage && 'bg-gray-300'" />
<BodyBridge :background-class="isCertainPage ? 'bg-gray-300' : ''" />
<BodyBridge :background-class="['bg-gray-300', 'text-red-500']" />
<BodyBridge :background-class="{ 'bg-gray-300': isCertainPage }" />
<BodyBridge :background-class="['text-red-500', ['class-in-nested-array'], { 'bg-gray-300': isCertainPage }]" />

然而，我需要计算这些类并获得它们的字符串表示，这样我就可以像这样传递它们：

element.classList.add(...backgroundClasses)

有没有办法将类协调为一个或多个字符串？

vue.js

来源：https://stackoverflow.com/questions/77143864/how-to-convert-vue-class-binding-into-strings-for-classlist

1条答案

按热度按时间

fjnneemd1#

我可能误解了实现细节，但我的想法是观察<BodyBridge>中background-class prop的值，循环prop对象的条目，并为每个键值对添加到主体classList或从主体classList中删除
BodyBridge.vue**

watch(
  () => props.backgroundClass,
  newValue => {
    for (const [key, value] of Object.entries(newValue)) {
      if (value) {
        document.body.classList.add(key)
      } else {
        document.body.classList.remove(key)
      }
    }
  },
  { immediate: true }
)

Parent中的条件逻辑

{ 'bg-gray-300': isCertainPage }

已经在Child组件中计算

{ 'bg-gray-300': true } // prop value

因此，对于每个[key, value]条目，它应该是对value的真实性的简单检查。
Vue Playground示例（确保检查Playground的iframe中的<body>，而不是页面的根<body>）

赞(0）回复(0）举报 2023-10-23

我来回答

如何将Vue类绑定转换为classlist的字符串？

1条答案

相关问题

热门标签

最新问答