q-выберите несколько, как закрыть всплывающее окно при выборе - PullRequest
Новая
       69

q-выберите несколько, как закрыть всплывающее окно при выборе

0 голосов
/ 22 апреля 2020

как автоматически закрыть всплывающее окно при использовании q-select множественного выбора. Поведение по умолчанию - это всплывающее окно, все еще открытое и ожидающее выбора пользователем другого элемента.

https://quasar.dev/vue-components/select#Example - множественный выбор% 2 C -counter-and-max-values ​​

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

1 Ответ

0 голосов
/ 23 апреля 2020

В квазаре для этого нет опции по умолчанию, но да, вы можете сделать это, используя пользовательский слот 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 on q-item закроет всплывающее окно при выборе опции.

...