✨(menu): 新增 menu 组件 expandIcon 插槽
This commit is contained in:
parent
ea06a05198
commit
5440b6ac92
@ -5,14 +5,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import { computed, ComputedRef, provide, Ref, ref, watch } from "vue";
|
||||||
computed,
|
|
||||||
ComputedRef,
|
|
||||||
provide,
|
|
||||||
Ref,
|
|
||||||
ref,
|
|
||||||
watch,
|
|
||||||
} from "vue";
|
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
export interface LayMenuProps {
|
export interface LayMenuProps {
|
||||||
@ -41,7 +34,7 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
|
|||||||
inverted: false,
|
inverted: false,
|
||||||
level: true,
|
level: true,
|
||||||
collapse: false,
|
collapse: false,
|
||||||
collapseTransition: true
|
collapseTransition: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const isTree: ComputedRef = computed(() => props.tree);
|
const isTree: ComputedRef = computed(() => props.tree);
|
||||||
@ -99,7 +92,7 @@ provide("isCollapseTransition", isCollapseTransition);
|
|||||||
inverted ? 'inverted' : '',
|
inverted ? 'inverted' : '',
|
||||||
tree ? 'layui-nav-tree' : '',
|
tree ? 'layui-nav-tree' : '',
|
||||||
theme === 'dark' ? 'layui-nav-dark' : 'layui-nav-light',
|
theme === 'dark' ? 'layui-nav-dark' : 'layui-nav-light',
|
||||||
collapse ? 'layui-nav-collapse' : ''
|
collapse ? 'layui-nav-collapse' : '',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
@ -98,9 +98,15 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
|
|||||||
<slot v-if="slots.title" name="title"></slot>
|
<slot v-if="slots.title" name="title"></slot>
|
||||||
</span>
|
</span>
|
||||||
<!-- 扩展 -->
|
<!-- 扩展 -->
|
||||||
|
<i v-if="slots.expandIcon" class="layui-nav-more">
|
||||||
|
<slot name="expandIcon" :isExpand="isOpen"></slot>
|
||||||
|
</i>
|
||||||
<i
|
<i
|
||||||
:class="[isOpen ? 'layui-nav-mored' : '']"
|
v-else
|
||||||
class="layui-icon layui-icon-down layui-nav-more"
|
:class="[isOpen ?
|
||||||
|
'layui-nav-mored' : '',
|
||||||
|
'layui-icon layui-icon-down',
|
||||||
|
'layui-nav-more']"
|
||||||
></i>
|
></i>
|
||||||
</a>
|
</a>
|
||||||
<template v-if="isTree">
|
<template v-if="isTree">
|
||||||
|
@ -503,6 +503,9 @@ export default {
|
|||||||
目录
|
目录
|
||||||
</router-link>
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-slot:expandIcon={isExpand}>
|
||||||
|
{{isExpand}}
|
||||||
|
</template>
|
||||||
<lay-menu-item id="8">
|
<lay-menu-item id="8">
|
||||||
<router-link to="">
|
<router-link to="">
|
||||||
<lay-icon type="layui-icon-home"></lay-icon>
|
<lay-icon type="layui-icon-home"></lay-icon>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user