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

【问题标题】：Vuetify - navigation drawer mini variant replacing icon on clickVuetify - 导航抽屉迷你变体点击替换图标
【发布时间】：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' },
      ],
    }
  },
})

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案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。

【讨论】：