javascript - 如何在 Vue 中创建动态的、非预定义的 CSS 样式(就像我们在 Angular 中所做的那样)

Question

在 Angular 中我们可以动态设置 css 属性，像这样:

<style ng-if="color">
.theme-color { color: {{color}}; }
.theme-background-color { background-color: {{color}}; }
.theme-border-color { border-color: {{color}}; }
</style>

在 Vue 中，我们可以修改 :class=... 但这将我们限制为预定义的类选项，而 :style... 则不允许我们使用类名。

有没有办法实现如上的动态CSS？或者我们是否必须对样式进行编码以使其包含所有颜色属性？

谢谢

Answer 1

假设这有某种用户颜色选择干预；我会将用户选择的颜色存储在状态中，因此它可以在全局范围内访问。

然后在您的组件中，您可以执行以下操作...

<app :style="themeStyles"></app>

export default {
  computed: {
    themeStyles () {
      return {
        color: store.state.themeColor,
        backgroundColor: store.state.themeColor,
        borderColor: store.state.themeColor
      }
    }
  }
}

(伪代码以便快速提供示例)

显然，可以在您需要的任何组件上使用它 - 但它应该可以解决问题，只要您有办法存储用户对 themeColor 本身的输入并将其存储在状态中。

编辑:附加选项

JSS