| 提交 | 用户 | age | ||
| c774a6 | 1 | <template> |
| V | 2 | <Drawer |
| 3 | v-if="getIsMobile" | |
| 4 | placement="left" | |
| 5 | :class="prefixCls" | |
| 6 | :width="getMenuWidth" | |
| 7 | :getContainer="null" | |
| 8 | :visible="!getCollapsed" | |
| 9 | @close="handleClose" | |
| 10 | > | |
| 11 | <Sider /> | |
| 12 | </Drawer> | |
| e6db0d | 13 | <MixSider v-else-if="getIsMixSidebar" /> |
| c774a6 | 14 | <Sider v-else /> |
| V | 15 | </template> |
| 16 | <script lang="ts"> | |
| 17 | import { defineComponent } from 'vue'; | |
| 18 | ||
| de2555 | 19 | import Sider from './LayoutSider.vue'; |
| e6db0d | 20 | import MixSider from './MixSider.vue'; |
| b335e7 | 21 | import { Drawer } from 'ant-design-vue'; |
| V | 22 | |
| c774a6 | 23 | import { useAppInject } from '/@/hooks/web/useAppInject'; |
| V | 24 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; |
| 25 | import { useDesign } from '/@/hooks/web/useDesign'; | |
| 26 | export default defineComponent({ | |
| 27 | name: 'SiderWrapper', | |
| e6db0d | 28 | components: { Sider, Drawer, MixSider }, |
| c774a6 | 29 | setup() { |
| V | 30 | const { prefixCls } = useDesign('layout-sider-wrapper'); |
| 31 | const { getIsMobile } = useAppInject(); | |
| e6db0d | 32 | const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting(); |
| c774a6 | 33 | |
| V | 34 | function handleClose() { |
| 35 | setMenuSetting({ | |
| 36 | collapsed: true, | |
| 37 | }); | |
| 38 | } | |
| 39 | ||
| e6db0d | 40 | return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar }; |
| c774a6 | 41 | }, |
| V | 42 | }); |
| 43 | </script> | |
| 44 | <style lang="less"> | |
| 45 | @prefix-cls: ~'@{namespace}-layout-sider-wrapper'; | |
| d5d4c4 | 46 | |
| c774a6 | 47 | .@{prefix-cls} { |
| V | 48 | .ant-drawer-body { |
| 49 | height: 100vh; | |
| 50 | padding: 0; | |
| 51 | } | |
| 52 | ||
| 53 | .ant-drawer-header-no-title { | |
| 54 | display: none; | |
| 55 | } | |
| 56 | } | |
| 57 | </style> | |
