进行选择时，如何自定义 Quasar 的 QSelect 以粗体显示文本和轮廓

Question

我正在尝试使用多个 selection (https://quasar.dev/vue-components/select#The-display-value) 自定义 Quasar 的 QSelect，以便在生成 selection 时以粗体显示文本和轮廓。

我受到了这个网站 (https://www.zalando.dk/herretoej/_beige.gra.sort/) 的启发，以及他们如何使用 multi select 来突出显示 selection 的制作时间，例如“法夫”。

我想使用 QSelect 和 API 文档 (https://quasar.dev/vue-components/select#QSelect-API) 中的“显示值”来做类似的事情。

我的例子：https://jsfiddle.net/orbit/351f27ua/30/

My example: https://jsfiddle.net/orbit/351f27ua/30/

基本上我试图让 select 有粗体文本，例如“项目 (2)”，当 2 个项目已被 select 编辑并且最好显示粗边框时 - 如 (https://www.zalando.dk/herretoej/_beige.gra.sort/)

所示

关于如何使用 Quasar 实现此目的的任何想法？

Answer 1

您可以使用样式和条件 class

自定义它

new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      itemOptions: ['Item 1', 'Item 2', 'Item 3'],
      items: [],
      displayValue: ''
    }
  },
  methods: {
    addValue: function (item) {
        this.items.push(item);

      this.displayValue = `Items (${this.items.length})`;
    },
    removeValue: function (item) {
        const index = this.items.findIndex(x => x.value == item.value);

            this.items.splice(index, 1);

      this.displayValue = this.items.length !== 0 ? `Items (${this.items.length})` : '';
    }
    }
})

.custom_selected {
  border: 2px solid #000000;
}

.custom_selected .q-field__label,
.custom_selected .q-field__native {
  color: #000000;
  font-weight: bolder!important;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>

<div id="q-app" class="q-ma-md">
  <div class="q-mb-xl">
    Custom QSelect - needs to show bold text when one or more items are selected and a thick border
  </div>
  
  <q-select
      filled
      v-model="items"
      multiple
      :options="itemOptions"
      :label="items.length < 1 ? 'Items' : undefined"
      :display-value="displayValue"
      style="width: 150px;"
      @add="addValue"
      @remove="removeValue"
      :class="{'custom_selected': items.length>0}">
  </q-select>

</div>

进行选择时，如何自定义 Quasar 的 QSelect 以粗体显示文本和轮廓

How can I customize Quasar's QSelect to show text and outline in bold, when a selection is made

quasar-framework

quasar