我有一个日期选择器在里面
<q-td>
<q-input :model-value="`${dateRange.from} - ${dateRange.to}`" dense>
<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>
默认情况下,框的大小非常小,只有文本的一部分是可见的。
在DevTools上,我将CSS规则更改为
.q-field__native, .q-field__input {
width: 100%;
}
至
.q-field__native, .q-field__input {
width: auto;
}
它在这里运行得很好,但是当然,它会把页面上的其他Q字段搞乱。
有什么风格或类,我可以用来使这个Q输入更大,使文本可见吗?
发布于 2022-11-04 09:43:44
<q-td style="min-width: 300px">
<q-input :model-value="`${dateRange.from} - ${dateRange.to}`" dense>
<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>
https://stackoverflow.com/questions/74314334
复制相似问题