ETU组件库

Appearance

Return to top
On this page

Menu 组件

用于菜单栏的使用

基础用法

我们使用<etu-MenuGroup></etu-MenuGroup>和<etu-MenuItem></etu-MenuItem>来使用菜单组件，将<etu-MenuItem></etu-MenuItem>放入<etu-MenuGroup></etu-MenuGroup>内部。

菜单位置

我们通过mode,我们提供了horizontal和vertical两种可选值，默认为vertical。分别对应横向菜单和竖向菜单，默认是竖向菜单

横向菜单

首页
菜单
我的
聊天
其他 
<template>
  <etu-MenuGroup mode="horizontal">
    <etu-MenuItem @click="fun_1"> 首页 </etu-MenuItem>
    <etu-MenuItem> 菜单 </etu-MenuItem>
    <etu-MenuItem> 我的 </etu-MenuItem>
    <etu-MenuItem> 聊天 </etu-MenuItem>
    <etu-MenuItem> 其他 </etu-MenuItem>
  </etu-MenuGroup>
</template>
<script setup lang="ts">
function fun_1(): void {
  console.log("fun1");
}
</script>

<style scoped></style>

<template>
  <etu-MenuGroup mode="horizontal">
    <etu-MenuItem @click="fun_1"> 首页 </etu-MenuItem>
    <etu-MenuItem> 菜单 </etu-MenuItem>
    <etu-MenuItem> 我的 </etu-MenuItem>
    <etu-MenuItem> 聊天 </etu-MenuItem>
    <etu-MenuItem> 其他 </etu-MenuItem>
  </etu-MenuGroup>
</template>
<script setup lang="ts">
function fun_1(): void {
  console.log("fun1");
}
</script>

<style scoped></style>

竖向菜单

首页
菜单
我的
聊天
其他 
<template>
  <etu-MenuGroup>
    <etu-MenuItem @click="fun_1"> 首页 </etu-MenuItem>
    <etu-MenuItem> 菜单 </etu-MenuItem>
    <etu-MenuItem> 我的 </etu-MenuItem>
    <etu-MenuItem> 聊天 </etu-MenuItem>
    <etu-MenuItem> 其他 </etu-MenuItem>
  </etu-MenuGroup>
</template>
<script setup lang="ts">
function fun_1(): void {
  console.log("fun1");
}
</script>

<style scoped></style>

<template>
  <etu-MenuGroup>
    <etu-MenuItem @click="fun_1"> 首页 </etu-MenuItem>
    <etu-MenuItem> 菜单 </etu-MenuItem>
    <etu-MenuItem> 我的 </etu-MenuItem>
    <etu-MenuItem> 聊天 </etu-MenuItem>
    <etu-MenuItem> 其他 </etu-MenuItem>
  </etu-MenuGroup>
</template>
<script setup lang="ts">
function fun_1(): void {
  console.log("fun1");
}
</script>

<style scoped></style>

背景色和字体色

我们可以设置bgColor和textColor分别组合背景色和字体色。我们提供了常见的颜色crimson , dodgerblue , limegreen , grey , darkorange , black , white , inherit ,lightslategrey

当然也可以直接覆盖我们样式中的属性。

首页
菜单
我的
聊天
其他 
<template>
  <etu-MenuGroup bgColor="lightslategrey" textColor="white">
    <etu-MenuItem @click="fun_1"> 首页 </etu-MenuItem>
    <etu-MenuItem> 菜单 </etu-MenuItem>
    <etu-MenuItem> 我的 </etu-MenuItem>
    <etu-MenuItem> 聊天 </etu-MenuItem>
    <etu-MenuItem> 其他 </etu-MenuItem>
  </etu-MenuGroup>
</template>
<script setup lang="ts">
function fun_1(): void {
  console.log("fun1");
}
</script>

<style scoped></style>

<template>
  <etu-MenuGroup bgColor="lightslategrey" textColor="white">
    <etu-MenuItem @click="fun_1"> 首页 </etu-MenuItem>
    <etu-MenuItem> 菜单 </etu-MenuItem>
    <etu-MenuItem> 我的 </etu-MenuItem>
    <etu-MenuItem> 聊天 </etu-MenuItem>
    <etu-MenuItem> 其他 </etu-MenuItem>
  </etu-MenuGroup>
</template>
<script setup lang="ts">
function fun_1(): void {
  console.log("fun1");
}
</script>

<style scoped></style>

菜单禁用

我们可以设置disabled属性来决定是否禁用部分菜单，我们提供了true和false两种可供选择。

首页
菜单
我的
聊天室
其他
管理资源 
<template>
  <etu-MenuGroup mode="horizontal" bgColor="lightslategrey" textColor="white">
    <etu-MenuItem @click="fun_1"> 首页 </etu-MenuItem>
    <etu-MenuItem> 菜单 </etu-MenuItem>
    <etu-MenuItem> 我的 </etu-MenuItem>
    <etu-MenuItem> 聊天室 </etu-MenuItem>
    <etu-MenuItem> 其他 </etu-MenuItem>
    <etu-MenuItem disabled="true"> 管理资源 </etu-MenuItem>
  </etu-MenuGroup>
</template>
<script setup lang="ts">
function fun_1():void {
  console.log("fun1");
}
</script>

<style scoped></style>

<template>
  <etu-MenuGroup mode="horizontal" bgColor="lightslategrey" textColor="white">
    <etu-MenuItem @click="fun_1"> 首页 </etu-MenuItem>
    <etu-MenuItem> 菜单 </etu-MenuItem>
    <etu-MenuItem> 我的 </etu-MenuItem>
    <etu-MenuItem> 聊天室 </etu-MenuItem>
    <etu-MenuItem> 其他 </etu-MenuItem>
    <etu-MenuItem disabled="true"> 管理资源 </etu-MenuItem>
  </etu-MenuGroup>
</template>
<script setup lang="ts">
function fun_1():void {
  console.log("fun1");
}
</script>

<style scoped></style>

其他

我们的菜单也可以结合其他组件进行使用，比如下拉菜单。