Question

我有Vuetify颤音和切屑。

当我单击标签时，它会被选中，这很棒。当我单击清除标签时，所有标签都失去了 selected 属性，这也很棒。

问题在于，当我单击芯片时，它会被选中，而再次单击时，它会丢失所选标签中的所选属性，但看起来一直处于选中状态会失去焦点 =直到我单击其他位置。那不是我希望用户拥有的UX。

如何实现正确的切换？意味着被点击的芯片在被点击时获取并释放所选属性。

在我的 toggleTags 方法中是否可以进行焦点对准或模糊selectedTag？请指向我正确的方向。

<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 = [];
},

}，

working pen

Answer 1

您可以添加自定义CSS

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

选中demo here

Vuetify如何模糊处理，重点突出单击的筹码？

1 个答案: