Yi.Vue2.x.Vuetify/src/layouts/default/Drawer.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
  <v-navigation-drawer id="default-drawer" v-model="$store.state.home.drawer" :dark="dark" :right="$vuetify.rtl"
    :src="drawerImage ? image : ''" :mini-variant.sync="$store.state.home.mini" mini-variant-width="80" app width="260">
    <template v-if="drawerImage" #img="props">
      <v-img :key="image" :gradient="gradient" v-bind="props" />
    </template>

    <div class="px-2">
      <default-drawer-header />

      <v-divider class="mx-3 mb-2" />

      <default-list :items="items" />
    </div>

    <template #append>
      <div class="pa-4 text-center">
        <app-btn class="text-none mb-4" color="white" href="https://vuetifyjs.com" small text>
          Documentation
        </app-btn>

        <app-btn block class="text-none" color="secondary" @click="logout">
          <v-icon left> mdi-package-up </v-icon>

          退出
        </app-btn>
      </div>
    </template>

    <div class="pt-12" />
  </v-navigation-drawer>
</template>

<script>
// Utilities
// import { get, sync } from 'vuex-pathify'
import store from "@/store/index.js";
import { toTree } from "@/util/menuHandle";
export default {
  methods: {
    init() {
      const menus = store.state.user.user.menus.filter((m) => {
        return m.menuType == 0;
      });
      this.items = toTree(menus);
    },
    logout() {
      this.$store.dispatch("Logout")
      this.$router.push({ path: "/login/" });
    },
  },
  created() {
    this.init();
  },
  computed: {
    image() {
      return this.$store.getters.image;
    },
    gradient() {
      return this.$store.getters.gradient;