如何让 CSS 模块在 Vue 类绑定中工作？

Question

Google 已经帮不了我了。

我在 Vue 中有这样的模板：

<template>
    <button
        :class="{ 'button-selected': isSelected }">
    </button>
</template>

一切都很顺利，直到我尝试使用 CSS 模块：

<template>
    <button
        :class="{ styles['button-selected']: isSelected }">
    </button>
</template>

...

import styles from "./Button.scss"

...

data () {
    return {
        styles
    }
}

当然。我无法使用它，因为

let obj = { style['button-selected']: this.isSelected }

也是无效的表达。

我找到了临时解决方案：

<template>
    <button
        :class="classes">
    </button>
</template>
...
computed: {
    classes () {
        let obj = {}
        obj[this.styles['button-selected']] = this.isSelected
        return obj
    }
}

但是由于我使用这种模式，我需要为每个元素创建一个计算的 prop。
我正在尝试寻找另一种方法来做到这一点。

感谢您提前的帮助。

Answer 1

您可以使用 es6 计算属性名称：

<button :class="{ [styles['button-selected']]: isSelected }">

styles['button-selected']

周围的外括号将该表达式计算为属性名称。

new Vue({
  el: "#app",
  data() {
    return {
      isSelected: true,
      styles: {
        'button-selected': 'redclass'
      }
    }
  }
});

.redclass {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button :class="{ [styles['button-selected']]: isSelected }">
  asdf
  </button>
</div>

您也可以使用三元：

<button :class="isSelected ? styles['button-selected'] : ''">

Answer 2

对于 nuxt3，我添加到 nuxt.config.ts

  vite: {
    css: {
      modules: {
        localsConvention: 'camelCase'
      }
    }
  }

现在我可以使用代码自动完成

  <button :class="{[styles.btn]: true, [styles.btnPrimary]: primary}">
    <slot/>
  </button>

对于 css 中的此类

.btn-primary