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

原创已于 2022-05-17 23:06:54 修改 · 866 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-05-17 23:03:05 首次发布

本文展示了如何利用Vuetify的v-navigation-drawer组件创建一个响应式的左侧菜单，该菜单在屏幕尺寸变化时能自动隐藏，并通过顶部导航栏的按钮控制显示。示例中详细给出了MenuList.vue和Header.vue的代码实现，以及store/index.js中的状态管理。当屏幕宽度足够时，菜单默认展开；在小屏设备上，可通过点击顶部的汉堡图标打开和关闭菜单。

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 组件官方文档地址：添加链接描述