q-select multiple 如何在选择时关闭弹出窗口

Question

如何在使用 q-select 多项选择时自动关闭弹出窗口。默认行为是弹出窗口仍然打开并等待用户选择另一个项目。

https://quasar.dev/vue-components/select#Example--Multiple-selection%2C-counter-and-max-values

<q-select
  filled
  v-model="model"
  multiple
  :options="options"
  counter
  hint="With counter"
  style="width: 250px"
 ></q-select>

Answer 1

类星体中没有可用的默认选项，但是您可以使用自定义插槽来实现它option。

  <q-select
    filled multiple
    v-model="model"
    :options="options"
    label="Standard"
    color="teal"
    clearable
    options-selected-class="text-deep-orange"
  >
    <template v-slot:option="scope">
      <q-item v-close-popup
        v-bind="scope.itemProps"
        v-on="scope.itemEvents"
      >
        <q-item-section avatar>
          <q-icon :name="scope.opt.icon"></q-icon>
        </q-item-section>
        <q-item-section>
          <q-item-label v-html="scope.opt.label"></q-item-label>
          <q-item-label caption>{{ scope.opt.description }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
  </q-select>

codepen - https://codepen.io/Pratik__007/pen/jObywmR?editors=1010

因此v-close-popup，q-item将关闭选择选项时的弹出窗口。