VUE：如何在 CSS 模块中使用 prop？

Question

row.vue

<script>
  export default {
    name: "Row",
    data() {
      return {
        app: [
          "row",
          "row-test",
          "flex-center"
        ]
      }
    },
    template: `
      <div :class="$module[app]"><slot></slot></div>
    `
  }
  </script>

row.scss

.row {
  color: red; 
}
.row-test {
  color: green; 
}
.flex-center {
  align-items: center;
  justify-content: center; 
}

App.vue

<template>
  <div id="app">
    <row app="row-test flex-center">my row</row>
    <router-view />
  </div>
</template>

vue.config.js

css: {
  requireModuleExtension: true,
  loaderOptions: {
    css: {
      modules: {
        localIdentName: 'hex-[HASH:HEX:3]'
      }
    }
  },
  modules: true
}

我想使用 app 属性声明我的属性，它们的编写方式与普通类类似。然后我希望row.vue中有一个数组，它将只添加我在其中定义的值并使用CSS模块将它们转换为CSS（类是随机生成的）

我明白了

<div app="row-test flex-center">my row</div>

预期结果

<div class="hex-g3D hex-f41">my row</div>

Answer 1

如果您将 app 作为 prop 传递给 Row 组件，请定义一个计算属性以返回具有不同类的模块：

<script>
  export default {
    name: "Row",
   props:['app'],
  computed:{
   modules(){
     return this.app.length? this.app.map(_class=>{
            return this.$module[_class];
      }):[];
    }
  },
    template: `
      <div :class="modules"><slot></slot></div>
    `
  }
  </script>

然后像这样传递它：

<template>
  <div id="app">
    <row :app="['row-test', 'flex-center']">my row</row>
    <router-view />
  </div>
</template>