Question

我想在模块中分离Vue.js组件中的样式。每个样式模块将不仅仅具有一个类，并且将定期添加新类。因此，很难更改整个组件的模板。所以，我正在寻找更实用的解决方案。

我的想法是，在样式中使用v-if，但不完全确定它应该如何实现，或者毕竟是否可能。

这将更加实用，如果仅仅依靠道具发送的名称，整个样式会发生变化。

<template>
  <div class="color-text">
    Text in the color of the class with just the name
  </div>
</template>

<script>
export default {
  name: 'comp',
  props: ['name']
}
</script>

<!-- General styles -->
<style scoped>
div{
  float: right;
}
</style>

<!-- red styles -->
<style module v-if="name === 'red'">
  .color-text{
    color: red;
  }
</style>

<!-- blue styles -->
<style module v-if="name === 'blue'">
  .color-text{
    color: blue;
  }
</style>

<!-- green styles -->
<style module v-if="name === 'green'">
  .color-text{
    color: green;
  }
</style>

Answer 1

如果我正在解决这个问题，我会使用传递类值。而且根本不担心道具。

<template>
  <div class="color-text">
    Text in the color of the class with just the name
  </div>
</template>

<script>
export default {
  name: 'comp'
}
</script>

<!-- General styles -->
<style scoped>
  div{
    float: right;
  }

  .red .color-text{
    color: red;
  }

  .blue .color-text{
    color: blue;
  }

  .green .color-text{
    color: green;
  }
</style>

然后你可以使用class属性传入你的颜色类型

<div id="app">
    <comp class="red"></comp>
    <comp class="green"></comp>
    <comp class="blue"></comp>
</div>

我已经汇总了一个示例jsfiddle，但是当涉及到范围样式以及webpack如何处理注入时可能需要进行一些调整

Vue.js条件模块样式

1 个答案: