Vuetify -带有可拆卸按钮的组合框徽章

fv2wmkja  于 2023-02-19  发布在  Vue.js
关注(0)|答案(3)|浏览(121)

我有一个组合框:

<v-combobox
    v-model="selectedCategories"
    :items="attributeCategories"
    item-text="name"
    item-value="id"
    label="Category"
    multiple
    chips
    v-on:blur="changeCategory(selectedCategories)"
></v-combobox>

它的渲染如下所示:

我想在每个徽章上添加一个x,这样我就可以快速删除它。
是否有需要打开的设置?
在常规输入类型的文本中,我可以添加这些属性

  • 清除图标=“mdi-闭合圆”
  • 可清除的
pftdvrlh

pftdvrlh1#

VComboBoxselection槽允许定制选择的呈现,你可以添加一个VChip,它有一个VIcon子项,当点击它时,它会重新选择项目(从而切换它的选择,并移除芯片):

<v-combobox ⋯ chips>
  <template v-slot:selection="{ attrs, item, parent, selected }">
    <v-chip v-bind="attrs" :input-value="selected">
      <span class="pr-2">
        {{ item.name }}
      </span>
      <v-icon small @click="parent.selectItem(item)"> $delete </v-icon>
    </v-chip>
  </template>
</v-combobox>

demo

ars1skjm

ars1skjm2#

您可以通过在<v-slot>模板中的<v-chip>内添加<v-icon>来简单地实现这一点。我刚刚使用上面提到的截图中的相同数据集创建了工作演示。
演示**:**

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['Weather', 'Geo Location', 'Device', 'Date and Time', 'Product'],
    model: ['Weather', 'Geo Location', 'Device', 'Date and Time', 'Product']
  })
})
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.5/dist/vuetify.min.css"/>
<div id="app">
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/>
<v-app id="inspire">
  <v-container fluid>
    <v-combobox
      v-model="model"
      :items="items"
      label="Category"
      multiple
      small-chips
    >
      <template v-slot:selection="{ item, parent }">
        <v-chip
          label
          small
        >
          <span class="pr-2">
            {{ item }}
          </span>
          <v-icon
            small
            @click="parent.selectItem(item)"
          >
            $delete
          </v-icon>
        </v-chip>
      </template>
    </v-combobox>
  </v-container>
</v-app>
</div>
yi0zb3m4

yi0zb3m43#

有一个芯片 prop 你的<v-combobox...>-所以取决于Vuetify版本有两个 prop 你应该添加:

*可删除芯片用于Vuetify 2(根据文档)

<v-combobox
  ...
  chips
  deletable-chips
/>

*Vuetify 3的可关闭芯片(根据文件)

<v-combobox
  ...
  chips
  closable-chips
/>

此外,还有clearableprop,在右侧添加清除按钮,通过一次点击清除所有芯片(适用于两个Vuetify版本):

<v-combobox
  ...
  clearable
/>

相关问题