Vue 自定义组件库通过配置调整样式？

  在 Vue 自定义组件库中，通常可以通过配置来调整样式。为了实现这一点，你可以定义一组样式相关的配置项，并在组件内部使用这些配置项来动态地设置样式。以下是一个简单的示例，演示了如何通过配置调整组件的样式。

自定义组件 (CustomComponent.vue)

<template>
  <div :style="customStyle">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    // 定义样式相关的配置项
    backgroundColor: {
      type: String,
      default: 'white' // 默认背景色为白色
    },
    textColor: {
      type: String,
      default: 'black' // 默认文本颜色为黑色
    },
    padding: {
      type: String,
      default: '20px' // 默认 padding 为 20px
    },
    borderRadius: {
      type: String,
      default: '4px' // 默认边框圆角为 4px
    }
  },
  computed: {
    // 使用配置项来动态生成样式对象
    customStyle() {
      return {
        backgroundColor: this.backgroundColor,
        color: this.textColor,
        padding: this.padding,
        borderRadius: this.borderRadius
      };
    }
  }
}
</script>

<style scoped>
/* 组件样式 */
div {
  border: 1px solid #ccc;
}
</style>

  在这个示例中，我们定义了一组样式相关的配置项，包括 backgroundColor、textColor、padding 和 borderRadius。然后，我们使用这些配置项来动态生成样式对象，并将其应用到组件的根元素上。

父组件

<template>
  <div>
    <!-- 通过配置项调整组件样式 -->
    <custom-component
      :background-color="bgColor"
      text-color="white"
      padding="30px"
      border-radius="8px"
    >
      <h1>Custom Component with Dynamic Styles</h1>
      <p>This is a custom component with dynamic styles.</p>
    </custom-component>
  </div>
</template>

<script>
import CustomComponent from './CustomComponent.vue';

export default {
  components: {
    CustomComponent
  },
  data() {
    return {
      bgColor: 'lightblue'
    };
  }
}
</script>

  在这个示例中，父组件通过配置项直接传递样式相关的参数给子组件。子组件根据这些参数动态调整样式，从而实现了通过配置来调整组件的样式。