Vue3中如何为BaseInput组件的wrapper元素设置差异化样式？

方案1：新增Props控制wrapper样式 #

给BaseInput组件添加可选的props，直接控制外层label的样式，灵活度高且逻辑清晰。

BaseInput.vue：

<template>
  <label :class="[$style.wrapper, hasBottomMargin ? $style.mb32 : '', wrapperClass]">
    <span v-if="label">{{ label }}</span>
    <input v-bind="$attrs" />
  </label>
</template>

<script setup>
const props = defineProps({
  // 布尔值直接控制是否添加底部边距
  hasBottomMargin: {
    type: Boolean,
    default: false
  },
  // 可选：传递自定义类，支持更复杂的样式定制
  wrapperClass: {
    type: String,
    default: ''
  },
  label: String
})
</script>

<style module>
.wrapper {
  /* 外层label的基础样式 */
}
.mb32 {
  margin-bottom: 32px;
}
</style>

父组件使用：

<template>
  <BaseInput hasBottomMargin label="第一个输入框" :class="$style.field" />
  <BaseInput label="第二个输入框" :class="$style.field" />
</template>

方案2：拆分$attrs，分离wrapper与input的属性 #

利用Vue3的useAttrs，把需要给外层label的属性从$attrs中剥离，剩下的继续传递给内部input，避免属性冲突。

BaseInput.vue：

<template>
  <label :class="wrapperClasses">
    <span v-if="label">{{ label }}</span>
    <input v-bind="inputAttrs" />
  </label>
</template>

<script setup>
import { useAttrs, computed } from 'vue'
const attrs = useAttrs()

const props = defineProps({
  label: String,
  wrapperClass: String
})

// 提取给wrapper的类，过滤后剩下的属性传给input
const wrapperClasses = computed(() => {
  const classes = []
  // 优先使用传入的wrapperClass
  if (props.wrapperClass) classes.push(props.wrapperClass)
  // 也可以约定前缀类，比如wrapper-mb32
  for (const key in attrs) {
    if (key.startsWith('wrapper-')) {
      classes.push(key.replace('wrapper-', ''))
    }
  }
  return classes
})

const inputAttrs = computed(() => {
  const filteredAttrs = {...attrs}
  // 移除wrapper相关的属性，避免传给input
  Object.keys(filteredAttrs).forEach(key => {
    if (key.startsWith('wrapper-')) delete filteredAttrs[key]
  })
  return filteredAttrs
})
</script>

父组件使用：

<template>
  <BaseInput wrapperClass="mb32" label="第一个输入框" :class="$style.field" />
  <!-- 或者用前缀类 -->
  <!-- <BaseInput wrapper-mb32 label="第一个输入框" :class="$style.field" /> -->
  <BaseInput label="第二个输入框" :class="$style.field" />
</template>

<style scoped>
.mb32 {
  margin-bottom: 32px;
}
</style>

方案3：利用CSS结构伪类（无需修改组件） #

如果BaseInput的根元素就是<label>，可以直接在父组件的样式里通过结构伪类选中第一个输入框的外层label，零组件改动。

父组件代码：

<template>
  <div class="input-container">
    <BaseInput label="第一个输入框" :class="$style.field" />
    <BaseInput label="第二个输入框" :class="$style.field" />
  </div>
</template>

<style scoped>
.input-container label:first-child {
  margin-bottom: 32px;
}
</style>

注意：需要确保父容器内只有这两个BaseInput的label元素，避免其他label干扰样式生效。

内容的提问来源于stack exchange，提问作者DFX Nguyễn