如何在v-number-input中显示X/Y格式页码（含总页数）

要让Vuetify的v-number-input显示「当前页/总页数」的效果，你可以利用组件的#input插槽自定义输入框的显示内容，既保留数字输入的交互功能，又能展示需要的格式。

基础实现方案 #

修改你的代码，添加自定义插槽来覆盖输入框的显示：

<v-number-input
  v-model="inputPageNumber"
  :max="totalPageCount"
  :min="1"
  :reverse="false"
  controlVariant="split"
  :label="null"
  :hideInput="false"
  inset
  variant="outlined"
  max-width="200"
  color="primary"
>
  <!-- 自定义输入区域显示内容 -->
  <template #input="{ value }">
    {{ value }}/{{ totalPageCount }}
  </template>
</v-number-input>

关键说明 #

• #input插槽允许你完全控制输入框的显示内容，插槽参数里的value就是当前绑定的页码值（即inputPageNumber）。
• 原有的加减按钮、数值范围限制（min/max）等功能都会保留，用户点击按钮或输入页码时，显示内容会自动同步更新。
• 确保totalPageCount是已正确获取的PDF总页数数值，避免出现NaN的情况。

优化体验方案（输入时仅显示数字） #

如果希望用户输入页码时只显示纯数字，失去焦点后再显示完整的「当前页/总页数」格式，可以利用插槽提供的focused状态参数：

<v-number-input
  v-model="inputPageNumber"
  :max="totalPageCount"
  :min="1"
  :reverse="false"
  controlVariant="split"
  :label="null"
  :hideInput="false"
  inset
  variant="outlined"
  max-width="200"
  color="primary"
>
  <template #input="{ value, focused }">
    {{ focused ? value : `${value}/${totalPageCount}` }}
  </template>
</v-number-input>

这样用户输入过程中输入框仅显示数字，输入完成后自动切换为带总页数的格式，交互体验更友好。

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