javascript - 将 css 注入(inject) Vue 组件？

Question

见下文 my-component.vue。此组件需要可主题化。

它需要获取外部 css 表，因为我需要允许其他开发人员自定义其内部外观。

除了accept a javascript object还有其他方法吗？ ？

<template>
  <div class="container">
    <div class="A"></div>
    <div class="B"></div>
    <div class="C"></div>
  </div>
</template>

<style scoped>
  .A {
    background-color:green;
  }
  .B {
    background-color: red;
  }
  .C {
    background-color: yellow
  }
</style>

Answer 1

在你的组件中:

<template>
  <div :class="boxStyle"></div>
</template>

<script>
  export default {
    props: {
      boxStyle: {
        type: String,
        default: 'box-default'
      }
    }
  }
</script>

<style lang="scss" scoped>
.box-default {
  width: 100px;
  height: 100px;
  background: black;
}
</style>

用户可以这样使用它:

<template>
  <div id="app">
    <my :boxStyle="'mySpecialBox'"></my>
  </div>
</template>


<script>

import myCompoentns from './components/myComponent.vue'

export default {
  name: 'app',
  components: {
    'my': myCompoentns
  },
}
</script>

<style lang="scss">
  .mySpecialBox {
    width: 250px;
    height: 250px;
    background: red;
  }
</style>

这样，用户可以定义任何他想要的样式，任何他想要的类名。他只需要使用适当的属性名称。作用域样式没有副作用。