打开Drawer时隐藏菜单图标及移动端相关功能问题求助

1. 打开Drawer时隐藏菜单图标 #

通过绑定Drawer的状态，用v-show或v-if控制菜单图标的显示逻辑，当Drawer处于打开状态时隐藏图标：

<v-btn
  icon
  @click="drawer = !drawer"
  v-show="!drawer"
>
  <v-icon>mdi-menu</v-icon>
</v-btn>

2. 将箭头图标移至Drawer左侧 #

在Drawer内部添加头部工具栏，把箭头按钮放在工具栏左侧区域，配合Vuetify的布局组件实现：

<v-navigation-drawer v-model="drawer" app>
  <v-toolbar flat>
    <v-btn icon @click="drawer = false">
      <v-icon>mdi-arrow-left</v-icon>
    </v-btn>
    <v-toolbar-title>Drawer 标题</v-toolbar-title>
  </v-toolbar>
  
  <!-- Drawer 列表内容 -->
  <v-list>
    <v-list-item title="菜单项1"></v-list-item>
    <v-list-item title="菜单项2"></v-list-item>
  </v-list>
</v-navigation-drawer>

3. 修复移动端箭头返回无法关闭Drawer的问题 #

移动端浏览器的返回事件（popstate）不会自动关联Drawer状态，需要手动监听该事件并绑定关闭逻辑，同时处理历史记录避免异常：

<script setup>
import { ref, onUnmounted } from 'vue'

const drawer = ref(false)
let popStateHandler = null

const toggleDrawer = () => {
  drawer.value = !drawer.value
  
  if (drawer.value) {
    // 打开Drawer时添加返回事件监听
    popStateHandler = () => {
      drawer.value = false
    }
    window.addEventListener('popstate', popStateHandler)
    // 新增历史记录，让返回按钮有触发节点
    history.pushState({ drawerOpen: true }, '')
  } else {
    // 关闭Drawer时移除监听并清理历史记录
    if (popStateHandler) {
      window.removeEventListener('popstate', popStateHandler)
      popStateHandler = null
    }
    history.back()
  }
}

onUnmounted(() => {
  // 组件卸载时清理监听，防止内存泄漏
  if (popStateHandler) {
    window.removeEventListener('popstate', popStateHandler)
  }
})
</script>

<!-- 调用toggleDrawer切换Drawer状态 -->
<v-btn icon @click="toggleDrawer" v-show="!drawer">
  <v-icon>mdi-menu</v-icon>
</v-btn>

<v-navigation-drawer v-model="drawer" app>
  <v-toolbar flat>
    <v-btn icon @click="toggleDrawer">
      <v-icon>mdi-arrow-left</v-icon>
    </v-btn>
    <v-toolbar-title>Drawer 标题</v-toolbar-title>
  </v-toolbar>
  
  <v-list>
    <v-list-item title="菜单项1"></v-list-item>
    <v-list-item title="菜单项2"></v-list-item>
  </v-list>
</v-navigation-drawer>

内容的提问来源于stack exchange，提问作者kiyowo