21 布局切换抽屉开发 - udo-bit/naive_admin_pro GitHub Wiki

目标

完成布局切换抽屉样式组件的开发

背景

我们开发了这么多套主题，那么是不是应该有个地方可以去灵活的切换我们的主题呢？ 接下来我们就一起来开发一下这一部分。

开发

创建文件

在layouts目录下创建一个setting-drawer的文件夹，并同时创建一个index.vue的文件。

<script lang="ts" setup>

</script>

<template>
  <div>
    <!---->
  </div>
</template>

<style scoped>

</style>

思路

  1. 页面中要有一个浮动的按钮
  2. 实现一个抽屉以及实现点击按钮打开抽屉功能
  3. 实现关闭抽屉的浮动按钮
  4. 切换布局以及其他个性化配置

一、写一个浮动按钮

<script lang="ts" setup>
import { SettingOutlined } from '@vicons/antd'
</script>

<template>
  <teleport to="body">
    <div class="fixed top-240px right-0 z-10">
      <n-button type="primary" class="b-rd-tr-0! b-rd-br-0!" size="large">
        <template #icon>
          <n-icon size="24">
            <SettingOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </teleport>
</template>

二、实现一个抽屉以及实现点击按钮打开抽屉功能

<script lang="ts" setup>
import { SettingOutlined } from '@vicons/antd'
const show = ref(false)
const onShow = () => {
  show.value = true
}
</script>

<template>
  <teleport to="body">
    <div class="fixed top-240px right-0 z-10">
      <!---->
      <n-button type="primary" class="b-rd-tr-0! b-rd-br-0!" size="large" @click="onShow">
        <template #icon>
          <n-icon size="24">
            <SettingOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </teleport>
  <n-drawer v-model:show="show" width="300">
    <n-drawer-content>
      这里是内容区域
    </n-drawer-content>
  </n-drawer>
</template>

三、实现关闭抽屉的浮动按钮

<script lang="ts" setup>
import { CloseOutlined, SettingOutlined } from '@vicons/antd'
const show = ref(false)
const onShow = () => {
  show.value = true
}

const onHide = () => {
  show.value = false
}
</script>

<template>
  <teleport to="body">
    <div class="fixed top-240px right-0 z-10">
      <!---->
      <n-button type="primary" class="b-rd-tr-0! b-rd-br-0!" size="large" @click="onShow">
        <template #icon>
          <n-icon size="24">
            <SettingOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </teleport>
  <n-drawer v-model:show="show" width="300">
    <n-drawer-content>
      这里是内容区域
    </n-drawer-content>
    <div class="absolute top-240px right-300px">
      <!---->
      <n-button type="primary" class="b-rd-tr-0! b-rd-br-0!" size="large" @click="onHide">
        <template #icon>
          <n-icon size="24">
            <CloseOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </n-drawer>
</template>
⚠️ **GitHub.com Fallback** ⚠️