You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import { Drawer } from 'ant-design-vue'
|
|
|
|
import SiderMenu, { privateSiderMenuProps, siderMenuProps } from './SiderMenu'
|
|
|
|
import type { CSSProperties } from 'vue'
|
|
|
|
const SiderMenuWrapper = defineComponent({
|
|
name: 'SiderMenuWrapper',
|
|
props: {
|
|
...siderMenuProps(),
|
|
...privateSiderMenuProps()
|
|
},
|
|
setup(props, { slots, attrs }) {
|
|
// TODO 计算 flatMenuKeys
|
|
|
|
// 当切换设备为手机时，会自动折叠菜单
|
|
watch(
|
|
() => props.isMobile,
|
|
() => {
|
|
if (props.isMobile == true) {
|
|
props.onCollapse?.(true)
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
if (props.hide) {
|
|
return null
|
|
}
|
|
|
|
const drawerVisible = ref(false)
|
|
watchEffect(() => {
|
|
// @ts-ignore
|
|
drawerVisible.value = !props.collapsed
|
|
})
|
|
|
|
// @ts-ignore
|
|
return () =>
|
|
props.isMobile ? (
|
|
<>
|
|
<Drawer
|
|
visible={drawerVisible.value}
|
|
placement="left"
|
|
class={[`${props.prefixCls}-drawer-sider`, attrs.class]}
|
|
onClose={() => props.onCollapse?.(true)}
|
|
style={{
|
|
padding: 0,
|
|
height: '100vh',
|
|
...(attrs.style as CSSProperties)
|
|
}}
|
|
closable={false}
|
|
getContainer={props.getContainer}
|
|
width={props.siderWidth}
|
|
bodyStyle={{ height: '100vh', padding: 0, display: 'flex', flexDirection: 'row' }}
|
|
>
|
|
<SiderMenu
|
|
{...props}
|
|
// @ts-ignore
|
|
class={[`${props.prefixCls}-sider`, attrs.class]}
|
|
collapsed={props.isMobile ? false : props.collapsed}
|
|
splitMenus={false}
|
|
>
|
|
{slots}
|
|
</SiderMenu>
|
|
</Drawer>
|
|
</>
|
|
) : (
|
|
<SiderMenu
|
|
class={[`${props.prefixCls}-sider`, attrs.class]}
|
|
{...props}
|
|
// @ts-ignore
|
|
style={attrs.style}
|
|
>
|
|
{slots}
|
|
</SiderMenu>
|
|
)
|
|
}
|
|
})
|
|
|
|
export default SiderMenuWrapper
|