vue3-实战-04-管理后台表单校验-layout-菜单组件封装

目录

1-自定义校验规则

2-layout组件静态页面搭建

3-logo组件封装

4-左侧菜单静态组件搭建

4.1-动态获取菜单数据

4.2-封装菜单动态展示组件

4.3-配置菜单名称-隐藏-图标属性

4.4-菜单刷新定位当前菜单

5-内容展示区组件封装

1-自定义校验规则

       上一篇我们在登录表单进行了基础的表单校验，但是在实际开发项目过程中，我们需要自定义校验规则，比如手机号，身份证号，邮箱等校验...需要使用相关或者复杂的正则表达式来校验。比如我们自定义校验用户名密码（参考element-plus官网form表单自定义校验）：

2-layout组件静态页面搭建

       我们分析一下，一般的后台管理系统分为三部分，左侧-顶部-内容区三个；我们需要对layout进行三块划分。

组件文件：src\layout\index.vue；将路由登录成功后展示的页面替换为该组件

 为了方便开发者根据自己的实际情况，自行决定页面样式的宽-高-颜色等相关参数，我们将一些参数抽取为全局变量，变更一处就好。

 

3-logo组件封装

       我们将项目菜单上的logo组件进行封装，封装为一个组件src\layout\logo\index.vue在layout组件中引入，我们对logo的标题-图片-展示与否 都可以做成配置文件方便开发者自行决定是否展示。

 src\setting.ts内容如下：

//用于项目logo|标题配置
export default {
  title: '羊叔运营平台', //项目的标题
  logo: '/logo.png', //项目logo设置
  logoHidden: true,//logo组件是否隐藏设置
}

4-左侧菜单静态组件搭建

      我们需要对左侧菜单进行静态页面开发和搭建，实际项目中，菜单的获取是通过接口获取是动态的，我们需要动态展示菜单。但是有一些路由组件，不是后台返回的，比如常量路由，任意路由和404路由等；所以我们有些路由组件是不需要展示在菜单栏中，我们可以在路由组件中meta中添加字段来控制隐藏和显示，我们通过给meta中添加标题字段来动态展示菜单的标题，我们还需要给菜单名字前面显示图标等，我们将element-plus图标注册为全局组件，然后在路由配置中meta中增加一个图标属性，动态展示菜单。

4.1-动态获取菜单数据

      目前因为我们没有调用后台接口，我们先把所有的路由都配置在常量路由里面，所有用户都展示一样的页面菜单。但是我们如何获取所有的路由呢？采用仓库形式获取，在用户小仓库的state对象UserState中定义一个属性menuRoutes，属性的类型是RouteRecordRaw，通过使用这个类型就可以获取到所有的路由配置。

4.2-封装菜单动态展示组件

       通过4.1我们可以获取到所有的路由组件信息，这个时候我们将这些信息封装为一个菜单组件，这样只需要传递获取的菜单路由数据，就可以展示。 在src\layout\index.vue文件中，我们使用

 菜单组件src\layout\menu\index.vue的内容如下：

核心逻辑循环遍历路由数据，按照不同的条件展示在页面上。

ps:
1-父子组件通信，采用defineProps来接受数据；
2-需要递归处理菜单，使用添加了一段js代码

4.3-配置菜单名称-隐藏-图标属性

       将图标注册为全局组件，这样我们在项目中就可以直接使用图标的名称进行获取图标。配置方式参考官网：Icon 图标 | Element Plus

我们在路由配置文件中，配置相关的菜单名称，是否隐藏，图标等属性。

4.4-菜单刷新定位当前菜单

当我们点击某个二级菜单时候，点击浏览器刷新，所有菜单都折叠了，不能定位到之前选中的菜单，我们优化一下。需要使用到element-plus菜单组件的default-active属性。

 

5-内容展示区组件封装

我们将layout的内容展示区，也封装为一个组件，这样我们方便复用，

文件src\layout\main\index.vue的内容如下：