更改样式类星体元素

Question

我正在为我的应用程序使用 Quasar 框架 (https://coronavirus-statistics-app.herokuapp.com/timeline)。在函数“时间轴”中，我使用 q-select 元素表示一个国家的 selection。我固定了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 与用于 select 的输入分开。您只需要为 q-menu.

指定一个宽度

.q-menu { 
  width: 200px;
}

您还可以在代码中应用新的 class，这样并非所有菜单都是 200 像素。

输出：

更改样式类星体元素

Change Style Quasar Element

css

select

vue.js

quasar