Question

我想用一些CSS参数创建一个组件。我知道我无法做这样的事情

<template>
  <div id="textContainer">
    {{ content }}
  </div>
</template>

<script>
export default {
  props: {
    content: String,
    textAlign: String
  }
};
</script>

<style scoped>
#textContainer {
  text-align: {{textAlign}}; // this won't work
}
</style>

但是我想过要像本例中那样在HTML代码中创建一个处理css参数的组件

<template>
  <div id="textContainer" :style="'text-align: {{textAlign}}'">
    this should be right aligned
  </div>
</template>

<script>
export default {
  props: {
    textAlign: String
  }
};
</script>

<style scoped>
#textContainer {
  text-align: center;
}
</style>

并用

食用

<MyComponent textAlign="right" />

我不知道这是行不通还是我的语法错误。我提供了一个有效的示例

https://codesandbox.io/s/my002w6oqy

，并想知道是否可以使用动态css参数创建组件。否则，我将不得不创建仅在CSS样式方面有所不同的组件。

Answer 1

You can use the object syntax：

<template>
  <div id="textContainer" :style="{ textAlign }">
    this should be right aligned
  </div>
</template>

<script>
export default {
  props: {
    textAlign: String
  }
};
</script>

https://codesandbox.io/s/wnpl6zvnlw

通过css作为组件参数

1 个答案: