Vuetify - 导航抽屉迷你变体点击替换图标

Posted 2023-02-23

【中文标题】Vuetify - 导航抽屉迷你变体点击替换图标

【英文标题】：Vuetify - navigation drawer mini variant replacing icon on click

【发布时间】：2021-06-14 02:35:39

【问题描述】：

编辑

我找到了解决办法：

<v-icon>
   mini ? 'mdi-chevron-right' : 'mdi-chevron-left' 
</v-icon>

切换导航抽屉变体时是否可以更改图标？默认变体应该有 mdi-chevron-left 图标，当我切换到迷你变体时，图标应该变为 mdi-chevron-right。我可以做这样的事情吗？我在任何地方都找不到这方面的信息。

完整的工作演示代码here

HTML：

<div id="app">
  <v-app id="inspire">
    <v-app-bar
      color="primary"
      dense
      dark
    >
      
      <v-btn
          icon
          @click.stop="mini = !mini"
          class="mr-2"
      >
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>

      <v-toolbar-title>Page title</v-toolbar-title>

    </v-app-bar>
    <v-navigation-drawer
      class="deep-purple accent-4"
      dark
      permanent
      v-model="drawer"
      :mini-variant="mini"
    >
      <v-list>
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
          >
            <v-list-item-icon>
              <v-icon> item.icon </v-icon>
            </v-list-item-icon>
  
            <v-list-item-content>
              <v-list-item-title> item.title </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
  
      <template v-slot:append>
        <div class="pa-2">
          <v-btn block>
            <v-icon left>mdi-logout</v-icon>
            Logout
          </v-btn>
        </div>
      </template>
      </v-navigation-drawer>
  </v-app>
</div>

JS：

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data () 
    return 
      drawer: null,
      mini: false,
      items: [
         title: 'Dashboard', icon: 'mdi-view-dashboard' ,
         title: 'Account', icon: 'mdi-account-box' ,
         title: 'Admin', icon: 'mdi-gavel' ,
      ],
    
  ,
)

【参考方案1】：

是的，这是可能的。我们可以创建一个计算变量（在本例中为appBarIcon），它将检查“this.mini”是真还是假，然后显示正确的图标。

<v-icon> appBarIcon </v-icon>

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data () 
    ...
  ,

  // Create a computed variable for our app bar icon
  computed: 
    appBarIcon() 
      return this.mini ? "mdi-chevron-right" : "mdi-chevron-left";
    ,
  

)

工作demo at codesandbox。