22 changed files with 255 additions and 68 deletions
@ -0,0 +1,43 @@ |
|||
import { |
|||
DoubleRightOutlined, |
|||
DoubleLeftOutlined, |
|||
MenuUnfoldOutlined, |
|||
MenuFoldOutlined, |
|||
} from '@ant-design/icons-vue'; |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
// store
|
|||
import { menuStore } from '/@/store/modules/menu'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'LayoutTrigger', |
|||
props: { |
|||
sider: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
theme: { |
|||
type: String, |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
function toggleMenu() { |
|||
menuStore.commitCollapsedState(!menuStore.getCollapsedState); |
|||
} |
|||
|
|||
return () => { |
|||
const siderTrigger = menuStore.getCollapsedState ? ( |
|||
<DoubleRightOutlined /> |
|||
) : ( |
|||
<DoubleLeftOutlined /> |
|||
); |
|||
if (props.sider) return siderTrigger; |
|||
|
|||
return ( |
|||
<span class={['layout-trigger', props.theme]} onClick={toggleMenu}> |
|||
{menuStore.getCollapsedState ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} |
|||
</span> |
|||
); |
|||
}; |
|||
}, |
|||
}); |
|||
@ -1,12 +0,0 @@ |
|||
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue'; |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
// store
|
|||
import { menuStore } from '/@/store/modules/menu'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'SideBarTrigger', |
|||
setup() { |
|||
return () => (menuStore.getCollapsedState ? <DoubleRightOutlined /> : <DoubleLeftOutlined />); |
|||
}, |
|||
}); |
|||
Loading…
Reference in new issue