LayoutTrigger.tsx
952 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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>
);
};
},
});