Vuetify—— v-navigation-drawer组件中的transitionend事件

v-navigation-drawer组件一般用于管理系统中的左侧菜单，当屏幕视口缩放或屏幕本身小于其一定宽度，其左侧菜单会隐藏掉，这时顶部会展示一个控制其左侧菜单展示按钮，方便使用左侧菜单
当屏幕足够宽时，初始状态展示如下：

当屏幕缩放到一定宽度时，展示如下：

点击顶部右侧三条杠的按钮，来控制其左侧菜单展示如下：

MenuList.vue

<template>
  <div>
    <v-navigation-drawer
      v-model="drawer"
      @transitionend="watchDrawer"
      app
      fixed
      width="260"
      color="#fff"
      class="sidebar"
      style="border-color: rgb(60, 72, 88)"
    >
      <v-app-bar elevation="0" class="sidebar-header">
        <v-badge
          color="#8d6e63"
          :content="$store.state.portal_label"
          offset-x="-5"
          offset-y="14"
          class="menu-title text-center"
        >
          {{ $store.state.system_name }}
        </v-badge>
      </v-app-bar>

      <v-list dense class="nav-list">
        <v-list-item-group color="primary">
          <v-list-item key="dashboard" to="/dashboard" v-ripple="false">
            <span class="iconfont icon-dashboard1"></span>
            <span style="height: 30px; line-height: 30px">系统状态</span>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script>

export default {
  name: "MenuList",
  data() {
    return {
      drawer: true,
    };
  },
  methods: {
    watchDrawer() {
      this.$store.commit("drawer_status", { status: this.drawer });
    },
  },
  watch: {
    "$store.state.drawerStatus"() {
      this.drawer = this.$store.state.drawerStatus;
    },
  },
};
</script>

Header.vue:

<template>
  <div class="header-wrapper d-flex justify-space-between">
    <div style="font-weight: 300; line-height: 40px" class="d-flex">
      <span style="color: rgb(141, 110, 99)">XXX管理系统</span>
    </div>
    <ul class="icon-wrapper d-flex" v-if="$store.state.drawerStatus">
      <router-link to="/dashboard">
        <li class="iconfont icon-dashboard1 hearder-icon"></li>
      </router-link>
      <div class="text-center">
        <v-menu bottom offset-y>
          <template v-slot:activator="{ on, attrs }">
            <li
              v-bind="attrs"
              v-on="on"
              class="iconfont icon-person hearder-icon"
            ></li>
          </template>
          <v-sheet class="overflow-hidden header-menu-con">
            <v-list dense expand nav>
              <v-divider class="px-0 my-2"></v-divider>
              <v-list-item to="/auth/sign_out">
                <v-list-item-title class="pl-4"> 登出 </v-list-item-title>
              </v-list-item>
            </v-list>
          </v-sheet>
        </v-menu>
      </div>
    </ul>
    <div v-else>
      <v-app-bar-nav-icon @click="openDrawer"> </v-app-bar-nav-icon>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header"
  methods: {
    openDrawer() {
      this.$store.state.drawerStatus = !this.$store.state.drawerStatus;
    },
  }
};
</script>

store/index.js

state: {
  drawerStatus: true
},
mutations: {
  drawer_status(state, { status }) {
    state.drawerStatus = status;
  }
}

Vuetify：v-navigation-drawer 组件官方文档地址：添加链接描述