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

bjg7j2ky 于 2023-01-17 发布在 Vue.js

关注(0)|答案(3)|浏览(200)

我正在使用vuetify。我需要“v-组合框”标签，但默认情况下它有一个箭头图标，我翻遍了Vuetify文档，它没有帮助了解如何删除它，我能做什么，而不失去应用程序的逻辑？也许我可以杀死它在html lvl？

<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>

vue.js

来源：https://stackoverflow.com/questions/71683514/how-can-i-delete-the-default-icon-in-vuetify

3条答案

按热度按时间

oogrdqng1#

检查我做的代码：https://codesandbox.io/s/stack-71683514-hide-combobox-arrow-icon-yuto05?file=/src/components/Example.vue

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

<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;
}

赞(0）回复(0）举报 2023-01-17

slhcrj9b2#

如果只想隐藏箭头图标：

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>

赞(0）回复(0）举报 2023-01-17

bf1o4zei3#

将此 prop 添加到组合框：append-icon=“null”

赞(0）回复(0）举报 2023-01-17