Vuetify V-Combobox 自定义下拉图标指南：如何摆脱多余的图标？

2024-03-25 19:51:26

Vuetify V-Combobox 自定义下拉图标指南

问题

使用 Vuetify 的 V-Combobox 时，添加自定义下拉图标会导致出现两个图标，这是因为 Vuetify 组件本身内置了一个默认的下拉图标。

解决方案

方法 1：隐藏默认下拉图标

添加 CSS 样式：

.v-combobox .v-input__append-inner {
  display: none !important;
}

方法 2：覆盖默认下拉图标

使用 v-icon-wrapper 覆盖默认图标：

<template v-slot:append-inner>
  <v-icon-wrapper>
    <v-icon @click="yourFunction">mdi-menu-down</v-icon>
  </v-icon-wrapper>
</template>

方法 3：禁用默认下拉图标

设置 hide-details 属性：

<v-combobox hide-details>
  <template v-slot:append-inner>
    <v-icon @click="yourFunction">mdi-menu-down</v-icon>
  </template>
</v-combobox>

示例代码

<template>
  <v-container fluid>
    <v-combobox
      v-model="userInput"
      :items="propItems"
      dense
      item-text="name"
      item-value="name"
      multiple
      return-object
      hide-details
    >
      <template v-slot:append-inner>
        <v-icon-wrapper>
          <v-icon @click="yourFunction">mdi-menu-down</v-icon>
        </v-icon-wrapper>
      </template>
    </v-combobox>
  </v-container>
</template>

<script setup>
  import { ref } from 'vue'

  const propItems = ref(['Gaming', 'Programming', 'Vue', 'Vuetify'])
  const selectedItems = ref([])
  const userInput = ref('')
  const isDropOpen = ref(false)

  const yourFunction = () => {
    alert('here')
  }
</script>