| | |
| | | placement="left" |
| | | :class="prefixCls" |
| | | :width="getMenuWidth" |
| | | :getContainer="null" |
| | | :visible="!getCollapsed" |
| | | :getContainer="false" |
| | | :open="!getCollapsed" |
| | | @close="handleClose" |
| | | > |
| | | <Sider /> |
| | |
| | | <MixSider v-else-if="getIsMixSidebar" /> |
| | | <Sider v-else /> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent } from 'vue'; |
| | | |
| | | <script lang="ts" setup> |
| | | import Sider from './LayoutSider.vue'; |
| | | import MixSider from './MixSider.vue'; |
| | | import { Drawer } from 'ant-design-vue'; |
| | | |
| | | import { useAppInject } from '/@/hooks/web/useAppInject'; |
| | | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; |
| | | import { useDesign } from '/@/hooks/web/useDesign'; |
| | | export default defineComponent({ |
| | | name: 'SiderWrapper', |
| | | components: { Sider, Drawer, MixSider }, |
| | | setup() { |
| | | const { prefixCls } = useDesign('layout-sider-wrapper'); |
| | | const { getIsMobile } = useAppInject(); |
| | | const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting(); |
| | | import { useAppInject } from '@/hooks/web/useAppInject'; |
| | | import { useMenuSetting } from '@/hooks/setting/useMenuSetting'; |
| | | import { useDesign } from '@/hooks/web/useDesign'; |
| | | |
| | | function handleClose() { |
| | | setMenuSetting({ |
| | | collapsed: true, |
| | | }); |
| | | } |
| | | defineOptions({ name: 'SiderWrapper' }); |
| | | |
| | | return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar }; |
| | | }, |
| | | }); |
| | | const { prefixCls } = useDesign('layout-sider-wrapper'); |
| | | const { getIsMobile } = useAppInject(); |
| | | const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting(); |
| | | |
| | | function handleClose() { |
| | | setMenuSetting({ |
| | | collapsed: true, |
| | | }); |
| | | } |
| | | </script> |
| | | <style lang="less"> |
| | | @prefix-cls: ~'@{namespace}-layout-sider-wrapper'; |