Vuetify 更改 v-select / v-combobox 中的复选框图标

Question

我使用 Vuetify 但禁用了所有图标的导入，因为 treeshaking 在 Nuxt 中无法正常工作，相反，我听从了建议并按照此线程中的说明手动导入它们：

然而，这意味着许多需要图标的组件，例如 v-checkbox、v-select 或 v-combobox（在其下拉菜单中使用 v-checkbox）需要他们的图标是手动添加的。仅使用 v-checkbox 允许使用 :on-icon & :off-icon 道具，但我无法弄清楚当其他组件使用复选框时我将如何到达它们。我一直在尝试更改 v-select 和 v-combobox.

中的行为

这是我得到的，但很明显这没有添加选中的图标，只是添加了空白图标。

<v-combobox outlined multiple chips v-model="select" :items="items">
    <template v-slot:item="{ item }">
       <v-icon>{{mdiCheckboxBlankOutline}}</v-icon>{{ item }}
   /template>
</v-combobox>

import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";

Data(){
select: ["Stockholm"],
      items: [
        "Stockholm",
        "London",
      ],

}

因此，我的问题是，如何使用导入的图标复制组合框菜单的默认复选框行为？该线程似乎在谈论它，但从未最终显示代码示例： https://github.com/vuetifyjs/vuetify/issues/10904 （意味着它应该看起来像这样）

Answer 1

您可以使用 item 插槽，其中提供了 item、on 和 attrs 对象，以复制默认行为。

您将 on（事件）和 attrs（属性）对象绑定到自定义列表项，以将点击事件从您的列表项发送到组合框组件。

接下来根据所选值设置适当的图标。请参阅下面的代码和代码沙箱。

<template>
  <v-app>
    <v-combobox
      label="Label"
      outlined
      multiple
      chips
      v-model="select"
      :items="items"
    >
      <template v-slot:item="{ item, on, attrs }">
        <v-list-item v-on="on" v-bind="attrs">
          <v-list-item-icon>
            <v-icon>
              {{ select.includes(item) ? checkIcon : uncheckIcon }}
            </v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item" class="text-left"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-combobox>
  </v-app>
</template>

<script>
import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";
export default {
  name: "HelloWorld",
  data() {
    return {
      items: ["One", "Two", "Three"],
      select: [],
      uncheckIcon: mdiCheckboxBlankOutline,
      checkIcon: mdiCheckboxMarked,
    };
  },
};
</script>

代码沙箱：https://codesandbox.io/s/recursing-banach-cb7ys?file=/src/components/HelloWorld.vue

Vuetify 更改 v-select / v-combobox 中的复选框图标

Vuetify change checkbox icon in v-select / v-combobox

vue.js

nuxt.js

vuetify.js