antdesign vue pro

<template>
  <a-layout>
    <a-layout-header>
      <menu-unfold-outlined v-if="collapsed" class="trigger" @click="toggleCollapse" />
      <menu-fold-outlined v-else class="trigger" @click="toggleCollapse" />
    </a-layout-header>
    <a-layout-sider :collapsed="collapsed">
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <a-menu-item key="1">
          <user-outlined />
          <span>nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <video-camera-outlined />
          <span>nav 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <upload-outlined />
          <span>nav 3</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout-content>
      <router-view></router-view>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { defineComponent, ref } from 'vue';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue';
import { Layout, Menu } from 'ant-design-vue';

export default defineComponent({
  components: {
    ALayout: Layout,
    ALayoutHeader: Layout.Header,
    ALayoutSider: Layout.Sider,
    ALayoutContent: Layout.Content,
    AMenu: Menu,
    AMenuItem: Menu.Item,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
  },
  setup() {
    const collapsed = ref(false);
    const toggleCollapse = () => {
      collapsed.value = !collapsed.value;
    };
    return {
      collapsed,
      toggleCollapse,
    };
  },
});
</script>

<style scoped>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}
</style>

解释说明

这段代码是一个使用 Ant Design Vue 的简单布局示例，包含了侧边栏和顶部导航栏。主要组件包括：

• ALayout: 布局容器。
• ALayoutHeader: 顶部导航栏。
• ALayoutSider: 侧边栏。
• ALayoutContent: 主要内容区域。
• AMenu 和 AMenuItem: 菜单和菜单项。

功能：

• 点击顶部的折叠/展开图标可以切换侧边栏的显示状态。
• 使用了 Ant Design Vue 的图标组件（如 MenuUnfoldOutlined, MenuFoldOutlined 等）来增强视觉效果。
• collapsed 是一个响应式变量，控制侧边栏的折叠状态。
• toggleCollapse 方法用于切换 collapsed 的值，从而实现侧边栏的折叠与展开。