如何缩小PrimeVue日历弹窗尺寸且不改变输入框宽度？

针对你使用Vue 3.2 + PrimeVue 3.15遇到的Calendar弹窗宽度和输入框一致的问题，因为Calendar的弹出面板默认通过Portal挂载到<body>下，不属于当前组件的DOM作用域，所以常规的组件样式prop无法直接修改弹窗尺寸，你可以通过以下几种方式解决：

方式一：使用深度选择器（适用于组件scoped样式） #

在组件的<style scoped>标签中，通过深度选择器穿透作用域，修改弹窗宽度：

::v-deep .p-calendar-panel {
  /* 让弹窗宽度自适应日历内容 */
  width: auto !important;
  /* 也可以设置固定宽度，比如 */
  /* width: 280px !important; */
}

方式二：全局样式修改 #

在全局样式文件（如main.css）或者App.vue的非scoped样式中添加：

.p-calendar-panel {
  width: auto;
  /* 自定义固定宽度 */
  /* width: 280px; */
}

方式三：配合panelClass prop #

给Calendar组件添加panelClass自定义类名：

<Calendar
  id="paid-on"
  dateFormat="yy-mm-dd"
  placeholder="yy-mm-dd"
  v-model="v$.paid_on.$model"
  :manualInput="false"
  :showIcon="true"
  @date-select="onDateChanged"
  panelClass="custom-calendar-panel"
/>

然后在全局样式中定义这个类的样式：

.custom-calendar-panel {
  width: auto !important;
  /* 或者固定宽度 */
  /* width: 280px !important; */
}

注意：!important是为了覆盖PrimeVue默认的宽度继承样式，如果你的样式优先级足够高，也可以不用。

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