vue3element-plus menu菜单如何展示到页面底部

在Vue3中，结合Element Plus库使用`<el-menu>`组件展示底部菜单，你可以通过调整默认的位置属性来实现。默认情况下，`el-menu`通常位于页面顶部。如果你想将其放置在底部，可以将`position`属性设置为`"bottom"`，示例如下：

<template>
  <div class="app-container">
    <el-menu
      :default-active="$route.path"
      class="bottom-menu"
      mode="horizontal" <!-- 或者竖直模式 "vertical" -->
      position="bottom"
      router
    >
      <!-- 菜单项配置 -->
      <el-menu-item v-for="(item, index) in menuItems" :key="index" :index="item.path">
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
    <!-- 其他内容... -->
  </div>
</template>

<script setup>
import { ElMenu } from 'element-plus'
import { useRouter } from 'vue-router'

const menuItems = ... // 菜单项数据配置
const router = useRouter()

const bottomMenu = new ElMenu({
  defaultActive: router.currentRoute.path,
  position: 'bottom',
})
</script>

<style scoped>
.bottom-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>