Quasar 选择下拉所需类别

Question

我正在尝试弄清楚如何在“必需”时在 Quasar 的 Select 组件旁边设置星号 (*)。

我可以使用 Quasar 的“输入”组件很好地做到这一点，但似乎无法复制其下拉菜单的行为。

我尝试使用：deep选择器，我可以直接定位“.q-select”类并更改组件/等的颜色，但似乎无法定位标签或添加：没有它的：required选择器打破。

示例： https://codepen.io/Cori92/pen/dyrVEeR

.q-select__native[required]:invalid ~ .q-select__label:before {
  content: '* ';
  color: red;
}

Answer 1

我可以通过在 q-select 上添加标签槽来实现此功能。

<template v-if="!hiddenValue" v-slot:label>
        <div class="no-selection">
          {{ props.label }}
        </div>
      </template>

CSS

.no-selection:before {
  content: '* ';
  color: red;
}