在 q-select quasar 中使选择选项更大

【问题标题】：Make select options larger in q-select quasar在 q-select quasar 中使选择选项更大
【发布时间】：2021-08-10 12:56:30
【问题描述】：

我使用 q-select 来显示月份，而且字体非常小，所以我想让选项变大。我尝试在 css 中更改字体大小，但没有成功。

我选择的atm

          <q-select
            ref="month"
            input-style="zoom: 1.2; text-align: right;"
            rounded outlined
            clearable
            class="text-h4" 
            v-model="oMonth" 
            :options="oMonths"
          />

输出的样子 months selection

【问题讨论】：

标签： javascript select font-size quasar-framework

【解决方案1】：

您需要影响弹出菜单及其选项的<q-select> 属性是popup-content-class 和/或popup-content-style。（如果您需要对每个项目的内容进行更多控制，也可以使用option 插槽。）

对于 h6 大小的文本，类似的方法会起作用：

          <q-select
            ref="month"
            input-style="zoom: 1.2; text-align: right;"
            rounded outlined
            clearable
            class="text-h4" 
            popup-content-class="text-h6"
            v-model="oMonth" 
            :options="oMonths"
          />

【讨论】：