更改样式 Quasar 元素

Question

我正在为我的应用程序使用 Quasar 框架 (https://coronavirus-statistics-app.herokuapp.com/timeline)。 在“时间轴”功能中，我使用 q-select 元素来选择一个国家。我修复了 q-select 元素的宽度，但我没有成功修复下面列表的宽度（如果国家名称长或不长，宽度会发生变化，不是很人性化）。

如何固定q-select元素下方列表的宽度？

我的代码：

<q-select outlined v-model="country" :options="data" option-label="name" label="Select a Country" class="input" />

<style scoped lang="scss">
  .bg-color {
    background-color: #e7e8d1;
  }
  
  .input {
    width: 200px;
    margin: 10px 0;
  }
</style>

Answer 1

为下拉列表生成的 HTML 与用于选择它的输入是分开的。你只需要为q-menu指定一个宽度。

.q-menu { 
  width: 200px;
}

你也可以在你的代码中应用一个新的类，这样不是所有的菜单都是 200px。

输出：