PrimeVue InputNumber宽度超出父容器问题求助

要让InputNumber完全占满其父容器（col-2）的宽度，需要覆盖PrimeVue组件的默认样式，因为组件内部元素存在默认布局限制，具体方案如下：

1. 添加局部样式覆盖（scoped场景）
   在你的Cart.vue组件中添加scoped样式，使用深度选择器穿透PrimeVue的默认样式：

<style scoped>
:deep(.p-inputnumber) {
  width: 100%;
  box-sizing: border-box;
}

:deep(.p-inputnumber .p-inputnumber-input) {
  flex: 1; /* 让输入框占据容器内剩余所有空间 */
}

:deep(.p-inputnumber-buttons-horizontal) {
  width: auto; /* 移除按钮容器的固定宽度限制 */
}
</style>

如果是全局样式文件，直接去掉:deep()前缀即可。

2. 组件属性优化（可选）
   可以给InputNumber添加inputClass属性，进一步优化输入框的弹性布局：

<InputNumber 
  v-model="item.qty"
  inputId="horizontal-buttons"
  showButtons
  buttonLayout="horizontal"
  :step="1"
  inputClass="flex-grow-1"
>
  <template #incrementbuttonicon>
    <span class="material-symbols-sharp">
      add
    </span>
  </template>
  <template #decrementbuttonicon>
    <span class="material-symbols-sharp">
      remove
    </span>
  </template>
</InputNumber>

原理说明 #

PrimeVue的InputNumber默认外层容器.p-inputnumber为inline-block且存在隐含宽度限制，内部输入框与按钮容器未设置弹性布局占满空间。通过上述样式，我们强制外层容器占满父元素宽度，让输入框弹性扩展，同时取消按钮容器的固定宽度限制，最终实现组件完全适配Bootstrap栅格列的宽度。

内容的提问来源于stack exchange，提问作者Angelina