(menu): 新增 menu 组件 expandIcon 插槽

This commit is contained in:
就眠儀式 2022-05-12 09:19:09 +08:00
parent ea06a05198
commit 5440b6ac92
3 changed files with 14 additions and 12 deletions

View File

@ -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>

View File

@ -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">

View File

@ -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>