如何删除v展开面板中的图标(Vuetify)

时间:2020-10-27 08:47:35

标签: vue.js vuetify.js

我要删除v扩展面板中的图标。 这是我在Vuejs中的代码

<v-card-text style="height: 300px;"> 
    <v-card class="mx-auto mt-5" max-width="500" flat>
      <v-row justify="center">
         <v-expansion-panels popout>
           <v-expansion-panel
              v-for="(item,i) in 9"
                :key="i"
                >
               <v-expansion-panel-header>Item</v-expansion-panel-header>
               </v-expansion-panel>
             </v-expansion-panels>
          </v-row>
      </v-card>
  </v-card-text>

我尝试过这些操作来删除图标。

.theme--light.v-expansion-panels .v-expansion-panel-header .v-expansion-panel-header__icon .v-icon {
        color: white !important;
    }
    .mdi-chevron-down::before {
        display: none !important;
    }
    .v-expansion-panel-header__icon {
        display: none !important;
    }
    .v-icon notranslate mdi mdi-chevron-down theme--light {
        display: none !important;
    }

但是它们都不起作用。 如何删除图标?请帮助我。

1 个答案:

答案 0 :(得分:0)

expand-icon的{​​{1}}属性设置为空字符串

v-expansion-panel-header

Demo