Quasar框架q-input尺寸问题：日期选择器输入框内容显示不全

有几种方式可以单独调整这个q-input的宽度，不会影响页面其他组件：

方法一：给目标q-input添加自定义类，局部修改样式 #

1. 给q-input添加自定义类（比如date-range-input）：

<q-td>
  <q-input 
    :model-value="`${dateRange.from} - ${dateRange.to}`" 
    dense
    class="date-range-input"
  >
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer" size="xs">
        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
          <q-date v-model="dateRange" range>
            <div class="row items-center justify-end">
              <q-btn v-close-popup label="Close" color="primary" flat/>
            </div>
          </q-date>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</q-td>

2. 在组件的scoped样式中，使用:deep()（Vue3）或/deep/（Vue2）穿透作用域，只修改该类下的输入框内部元素：

<style scoped>
.date-range-input :deep(.q-field__native),
.date-range-input :deep(.q-field__input) {
  width: auto;
}
</style>

方法二：给父元素q-td添加自定义类，针对性修改 #

如果不想给q-input单独加类，也可以给包裹它的q-td加自定义类（比如date-range-cell）：

<q-td class="date-range-cell">
  <!-- 原有q-input代码不变 -->
</q-td>

然后在scoped样式中修改：

<style scoped>
.date-range-cell :deep(.q-field__native),
.date-range-cell :deep(.q-field__input) {
  width: auto;
}
</style>

方法三：使用行内样式（快速临时方案） #

如果是临时调试或简单场景，可直接给q-input加行内样式，让它自适应内容宽度：

<q-input 
  :model-value="`${dateRange.from} - ${dateRange.to}`" 
  dense
  style="min-width: fit-content;"
>
<!-- 插槽内容不变 -->
</q-input>

这种方式无需额外编写CSS，但灵活性不如前两种方法。

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