Vuetify Как размыть, сфокусировать нажатые фишки? - PullRequest
Новая
       37

Vuetify Как размыть, сфокусировать нажатые фишки?

0 голосов
/ 11 декабря 2018

У меня Vuetify truoble с переключением фишек.

Когда я нажимаю на тег, он получает selected , и это здорово.Когда я нажимаю сбросить теги , все они теряют выбранный атрибут, который тоже великолепен.

Проблема в том, что когда я один раз щелкаю по фишке -> он получает выбранный и при повторном нажатии теряет выбранный атрибут в выбранных тегах , но выглядит выбранным, пока не потеряет фокус =, пока я не щелкну где-нибудь еще.Это не UX, который я хочу, чтобы пользователи имели.

Как мне добиться правильного переключения?Означает, что нажатая фишка получает и теряет выбранный атрибут во время нажатия.

Есть ли способ фокусировки или размытия selectedTag в моем методе toggleTags ?Укажите мне правильное направление, пожалуйста. 

<v-chip v-for="categoryTag in tag.categoryTags"
        :key="categoryTag.id"
        label
        small
        outline
        color="info"
        :selected="isSelected(categoryTag)"
        @click="toggleTags(categoryTag)">
  {{categoryTag.name}}
</v-chip>

methods: {
toggleTags(clickedTag) {
  if (this.isSelected(clickedTag)) {
    this.selectedTags = this.selectedTags.filter(tag => tag !== clickedTag);
    return;
  }
  this.selectedTags.push(clickedTag);
},
clearTags() {
  this.selectedTags = [];
},

},

рабочая ручка

1 Ответ

0 голосов
/ 11 декабря 2018

Вы можете добавить пользовательские CSS 

.v-chip:focus:not(.v-chip--selected):after {
  background: none !important;
}

Проверьте демо здесь

...