修改v-autocomplete组件Chip删除图标方案咨询

修改后的完整代码 #

<template>
  <v-autocomplete
    v-bind="$props"
    v-on="$listeners"
  >
    <!-- 自定义selection插槽替换Chip删除图标 -->
    <template v-if="!$scopedSlots.selection" #selection="{ item, index, select, selected }">
      <v-chip
        :key="index"
        :selected="selected"
        :disabled="disabled || item.disabled"
        @click="select"
        close
        :small="smallChips"
        :dense="dense"
      >
        <!-- 复用item插槽渲染内容，保留原有自定义能力 -->
        <slot name="item" :item="item">
          {{ item[itemText] || item }}
        </slot>
        <!-- 自定义删除图标，替换默认垃圾桶 -->
        <template #close>
          <v-icon>mdi-close</v-icon>
        </template>
      </v-chip>
    </template>

    <!-- 传递所有其他普通插槽 -->
    <template v-for="(_, name) in $slots" v-if="name !== 'selection'">
      <template :slot="name">
        <slot :name="name"></slot>
      </template>
    </template>

    <!-- 传递所有其他作用域插槽 -->
    <template
      v-for="(_, name) in $scopedSlots"
      v-if="name !== 'selection'"
      #[name]="data"
    >
      <slot
        :name="name"
        v-bind="data"
      ></slot>
    </template>

  </v-autocomplete>
</template>

<script>
import { VAutocomplete } from 'vuetify/lib'

export default {
  extends: VAutocomplete,
  props: {
    dense: {
      default: true
    },
    smallChips: {
      default: true
    }
  }
}
</script>

关键说明 #

1. 插槽优先级保留：仅当父组件没有自定义selection插槽时，才启用删除图标替换逻辑，避免覆盖用户的自定义需求。
2. 完整功能继承：
   • 保留原v-autocomplete的所有Props、事件和交互逻辑（如多选、搜索、禁用状态等）
   • 复用item插槽，用户仍可自定义选中项的显示内容
   • 继承组件原有的dense和smallChips配置
3. 图标自定义：将<v-icon>mdi-close</v-icon>替换为你需要的任意Vuetify图标即可，比如mdi-delete-outline等。

内容的提问来源于stack exchange，提问作者PyKKe