如何删除 vuetify 中的默认图标？

Question

我正在使用 vuetify。我需要“v-combobox”标签，但默认情况下它有一个箭头图标，我翻阅了 Vuetify 文档，但它无助于理解如何删除它，我该怎么做才能不丢失应用程序逻辑？ Maby 我可以在 html 等级杀死它？

<template>
<v-app>
    <v-combobox
        v-model="chips"
        :items="items"
        chips
        clearable
        multiple
        solo>
        <template v-slot:selection="{ item }">
            <v-chip close @click:close="remove(item)">
                <strong>{{ item }}</strong
                >&nbsp;
            </v-chip>
        </template>
    </v-combobox>
</v-app>
</template>

<script>
export default {
    name: "Test",
    data: () => ({
        chips: ["hello", "stack", "overflow"],
    }),
    methods: {
        remove(item) {
            this.chips.splice(this.chips.indexOf(item), 1);
            this.chips = [...this.chips];
            },
        }
    };
</script>

Answer 1

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-71683514-hide-combobox-arrow-icon-yuto05?file=/src/components/Example.vue

如果你只想隐藏特定组合框的图标，你可以使用 CSS，在这个例子中我刚刚创建了一个名为 noicon-combo 的特殊 class，并且配置如下：

<v-col cols="12">
  <v-combobox
    v-model="select"
    class="noicon-combo"
    :items="items"
    label="Combobox No Icon"
    multiple
    outlined
    dense
  ></v-combobox>

  <v-combobox
    v-model="select"
    :items="items"
    label="Combobox"
    multiple
    outlined
    dense
  ></v-combobox>
</v-col>

/* Normal version */
.noicon-combo .v-select__slot .v-input__icon {
  display: none !important;
}

/* Scoped version */
.noicon-combo >>>.v-select__slot .v-input__icon {
  display: none !important;
}

Answer 2

如果只想隐藏箭头图标：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      chips: ["hello", "stack", "overflow"],
      items: [1,2,3]
    }
  },
  methods: {
    remove(item) {
      this.chips.splice(this.chips.indexOf(item), 1);
      this.chips = [...this.chips];
    }
  }
})

.v-application .primary--text .mdi-menu-down {
color: transparent !important;
}
.mdi-menu-down {
color: transparent !important;
}

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
        <v-combobox
        v-model="chips"
        :items="items"
        chips class="aa"
        clearable
        multiple
        solo>
        <template v-slot:selection="{ item }">
            <v-chip close @click:close="remove(item)">
                <strong>{{ item }}</strong
                >&nbsp;
            </v-chip>
        </template>
    </v-combobox></v-container>
      </v-main>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
</html>

如何删除 vuetify 中的默认图标？

How can i delete the default icon in vuetify?

combobox

vue.js

vuejs2

vuetify.js