Elements Plus 菜单Menu用法

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

一、Elements Plus 菜单（Menu）用法

1. 基本用法

Elements Plus 的 el-menu 是一个功能强大的菜单组件，支持垂直和水平两种模式，并且可以嵌套子菜单。以下是一个简单的垂直菜单示例：

<template>
  <el-menu :default-active="activeIndex" @select="handleSelect">
    <el-menu-item index="1">
      <template #title>首页</template>
    </el-menu-item>
    <el-menu-item index="2">
      <template #title>用户管理</template>
    </el-menu-item>
    <el-sub-menu index="3">
      <template #title>配置管理</template>
      <el-menu-item index="3-1">配置项 1</el-menu-item>
      <el-menu-item index="3-2">配置项 2</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue';

const activeIndex = ref('1');

const handleSelect = (index) => {
  console.log('Selected menu:', index);
};
</script>

2. 路由模式

当与 Vue Router 结合使用时，可以通过 router 属性激活当前路由对应的菜单项。例如：

<template>
  <el-menu :default-active="$route.path" router>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/users">用户管理</el-menu-item>
    <el-sub-menu index="/settings">
      <template #title>设置</template>
      <el-menu-item index="/settings/profile">个人资料</el-menu-item>
      <el-menu-item index="/settings/account">账户设置</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

3. 动态菜单

可以通过动态绑定数据来生成菜单项。例如，从后端获取菜单数据并渲染：

<template>
  <el-menu :default-active="activeIndex">
    <template v-for="item in menuData" :key="item.index">
      <el-menu-item v-if="!item.children" :index="item.index">
        {{ item.label }}
      </el-menu-item>
      <el-sub-menu v-else :index="item.index">
        <template #title>{{ item.label }}</template>
        <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
          {{ child.label }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue';

const menuData = ref([
  { index: '1', label: '首页' },
  { index: '2', label: '用户管理' },
  {
    index: '3',
    label: '设置',
    children: [
      { index: '3-1', label: '个人资料' },
      { index: '3-2', label: '账户设置' },
    ],
  },
]);

const activeIndex = ref('1');
</script>

二、Vue 路由导航守卫

Vue Router 提供了多种导航守卫，用于控制路由的跳转行为。

1. 全局前置守卫

全局前置守卫 beforeEach 在路由跳转之前被调用，可以用于权限验证或加载提示。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    { path: '/about', component: () => import('./views/About.vue') },
  ],
});

router.beforeEach((to, from, next) => {
  console.log(`Navigating to ${to.path}`);
  // 权限验证示例
  if (to.path === '/about' && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

function isAuthenticated() {
  return localStorage.getItem('isAuth') === 'true';
}

export default router;

2. 全局后置守卫

全局后置守卫 afterEach 在路由跳转完成后被调用，常用于设置页面标题或日志记录。

router.afterEach((to, from) => {
  document.title = to.meta.title || 'Default Title';
});

3. 路由独享守卫

路由独享守卫 beforeEnter 可以在路由定义中直接设置，仅在进入该路由时触发。

const routes = [
  {
    path: '/admin',
    component: () => import('./views/Admin.vue'),
    beforeEnter: (to, from, next) => {
      if (localStorage.getItem('isAdmin')) {
        next();
      } else {
        next('/login');
      }
    },
  },
];

4. 组件内守卫

组件内守卫包括 beforeRouteEnter 和 beforeRouteLeave，用于在组件级别控制路由行为。

<script>
export default {
  beforeRouteEnter(to, from, next) {
    console.log('Entering the component');
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('Leaving the component');
    next();
  },
};
</script>

三、静态表单

静态表单是通过固定的 HTML 结构和 Vue 数据绑定实现的。
示例：静态表单

<template>
  <el-form label-width="100px">
    <el-form-item label="用户名">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input-number v-model="formData.age"></el-input-number>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({
  username: '',
  age: null,
  email: '',
});

const submitForm = () => {
  console.log('Form Data:', formData.value);
};
</script>

四、动态表单

动态表单通过配置驱动的方式生成表单结构，支持字段的动态增删和依赖。

1. 基础动态表单

<template>
  <el-form label-width="100px">
    <div v-for="field in formFields" :key="field.model">
      <el-form-item :label="field.label">
        <el-input v-if="field.type === 'text'" v-model="formData[field.model]"></el-input>
        <el-input-number v-if="field.type === 'number'" v-model="formData[field.model]"></el-input-number>
      </el-form-item>
    </div>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue';

const formFields = ref([
  { label: '用户名', type: 'text', model: 'username' },
  { label: '年龄', type: 'number', model: 'age' },
  { label: '邮箱', type: 'text', model: 'email' },
]);

const formData = reactive({
  username: '',
  age: null,
  email: '',
});

const submitForm = () => {
  console.log('Form Data:', formData);
};
</script>

2. 带路径的动态表单

可以通过表单数据动态生成 URL 并导航。

<template>
  <el-form label-width="100px" @submit.prevent="navigate">
    <el-form-item label="用户名">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">跳转</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const formData = ref({
  username: '',
});

const router = useRouter();

const navigate = () => {
  if (formData.value.username) {
    router.push({ name: 'UserProfile', params: { username: formData.value.username } });
  }
};
</script>

3. 动态表单验证

使用 Element Plus 的表单验证功能，可以实现复杂的验证逻辑。

<template>
  <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input-number v-model="formData.age"></el-input-number>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const formRef = ref(null);

const formData = reactive({
  username: '',
  age: null,
});

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 18, max: 60, message: '年龄在 18 到 60 岁之间', trigger: 'blur' },
  ],
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('Form Data:', formData);
      ElMessage.success('表单验证成功');
    } else {
      ElMessage.error('表单验证失败');
    }
  });
};
</script>

五、总结

本文详细介绍了 Elements Plus 菜单组件的用法、Vue 路由导航守卫的使用方法，以及静态表单和动态表单的实现步骤。通过这些示例，你可以构建功能丰富的 Vue 应用程序，实现复杂的用户界面和交互逻辑。