使用vue3和js封装一个公用的组件，根据传进来的字段type内容来展示对应的样式

在Vue 3中，你可以创建一个通用的自定义组件，利用props接收外部传入的数据并动态绑定样式。首先，你需要定义一个名为`GenericComponent.vue`的组件模板，如下所示：

<template>
  <div :class="styleTypeClasses">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';

export default {
  props: {
    type: {
      type: String,
      required: true,
      validator: (value) => ['type1', 'type2', 'type3'].includes(value), // 确保传入的值是预设的类型之一
    },
  },
  setup(props) {
    const styleTypeClasses = computed(() => {
      return {
        'generic-component-type1': props.type === 'type1',
        'generic-component-type2': props.type === 'type2',
        'generic-component-type3': props.type === 'type3', // 根据需要添加更多样式条件
        // 如果只有一两个类型，可以简化为：
        // 'default': true,
        // 'type1': props.type === 'type1',
      };
    });

    return { styleTypeClasses };
  },
}
</script>

<style scoped>
.generic-component-type1, .generic-component-type2, .generic-component-type3 {
  /* 定义每个类型的默认样式 */
}

/* 可以在此添加更具体的类型样式 */
.generic-component-type1 .some-child-selector {
  /* 类型1下某个子元素的样式 */
}

.generic-component-type2 .another-child-selector {
  /* 类型2下另一个子元素的样式 */
}
</style>

在这个例子中，`styleTypeClasses`是一个计算属性，它会根据`type` prop的值动态生成相应的CSS类名。然后你在HTML部分通过`:class="{ ...styleTypeClasses }"`将这些类名应用到组件的根元素上。

使用这个组件时，只需传入`type`属性，并根据实际需求设置内联样式或子元素的样式：

<GenericComponent type="type1" class="custom-class">这是类型1的内容</GenericComponent>
<GenericComponent type="type2" class="other-custom-class">这是类型2的内容</GenericComponent>