20 移动端布局开发 - udo-bit/naive_admin_pro GitHub Wiki

目标

完成移动端布局反转色支持 完成移动端到pad端到pc端的菜单转换

改进反转色模式

我们在移动端模式下，我们的侧边栏和我们的header部分都需要反转色的功能，并且是单独控制的，所以删除原先的属性，并增加两个新的属性分别是headerInverted�,drawerInverted

实现drawer反转色功能

我们要实现drawer的反转色功能的话，我们可以借助layout布局的方式实现。

  1. 取消边框的padding
  2. 使用n-layout布局
  3. 显示logo和标题，可以动态的隐藏和显示（参考side-layout的布局效果）

只复制了有改动的部分代码

<script lang="ts" setup>
  const props = withDefaults(defineProps<{
  headerHeight?: number
  logo?: string
  title?: string
  + headerInverted?: boolean
  + drawerInverted?: boolean
  visible?: boolean
  + logoVisible?: boolean
}>(), {
  headerHeight: 48,
  visible: false,
  logoVisible: true,
})
</script>

<template>
  <n-drawer-content body-content-style="padding:0">
    <n-layout class="h-100%">
      <n-layout-header class="h-100%" :inverted="drawerInverted">
            《斯通纳》是美国作家约翰·威廉姆斯在 1965 年出版的小说。
      </n-layout-header>
    </n-layout>
  </n-drawer-content>
</template>

三端布局模式

如果当我们拖动的过程中，窗口大小会发生变化，同时我们的布局模式也应该跟随变化。

  • 从桌面到pad端

如果从桌面到pad端，那么我们应该自动收起侧边栏增大可用空间

  • 从pad端到移动端

直接切到移动端布局模式，不需要处理

  • 移动端到pad端

同样不需要做处理

  • pad端到桌面端，我们需要自动打开侧边栏

实现代码在basic-layout中：

const { isMobile, isDesktop, isPad } = useQueryBreakpoints()
watchEffect(() => {
  if (isDesktop.value)
    appStore.updateCollapsed(false)
  else if (isPad.value)
    appStore.updateCollapsed(true)
  if (isMobile.value)
    appStore.updateVisible(false)
})

先将布局修改为混合布局进行测试

⚠️ **GitHub.com Fallback** ⚠️