【学习打卡】第10天 封装组件中级篇

课程名称：基于Vue3+Vite+TS，二次封装element-plus业务组件
课程章节： 封装组件中级篇
主讲老师：五月的夏天

课程内容：

今天学习的内容包括：
4-1 导航菜单-导航菜单的需求分析和数据设计——网站需要一个封装的导航菜单，基于 el-menu 封装。
4-2 导航菜单-巧用 template 实现两级结构的菜单——第三方组件判断显示正好可以使用template进行解决。
4-3 导航菜单-使用 tsx 实现无限层级菜单——多级菜单，需要递归处理，在项目中使用tsx更简洁便于维护。
4-4 导航菜单-利用封装好的导航菜单组件改造项目整体结构——将封装后的导航用于改造项目navSide模块。
4-5 导航菜单-完善细节并增加自定义键名功能——完善图标不显示，导航宽度等细节以及自定义键功能。

课程收获：

导航菜单的需求分析和数据设计

1、element-plus 提供的导航菜单书写太过繁琐
2、通过数据配置导航菜单
3、封装便于维护

巧用 template 实现两级结构的菜单

在 el-menu 中使用div等dom标签进行 v-if 判断时会报错，使用 template 巧妙的解决了这个问题

使用 tsx 实现无限层级菜单

1、之前也有写过 tsx 的语法，都忘完了，这次正好再次熟悉
2、首先语法要 export 出组件，在抛出的组件中处理一系列功能，最终 return 渲染后的dom

export default defineComponent({
	props:{...},
	setup(props,ctx){
		...
		return () => {
			return (
				<div>...</div>
			)
		}
	}
})

3、PropType依旧为类型断言服务，useAttrs() 为接收 $attrs 功能

let attrs = useAttrs()
{...attrs}

4、渲染组件方法

item.i = (Icons as any)[item[props.icon!]]

5、处理插槽方式

 let slots = {
    title: () => {
      return (
        <>
          <item.i />
          <span>{item[props.name]}</span>
        </>
      )
    }
  }
 v-slots={slots}

6、引入样式

import './styles/index.scss'

利用封装好的导航菜单组件改造项目整体结构

使用封装好的 m-menu 组件，将对应数据等参数传入，即可完成功能改造，后续也可存入数据库等进行获取进而动态渲染路由等

完善细节并增加自定义键名功能

针对数据键值对可能不同，为了用户使用的通用性，故设置自定义键名功能

// 菜单标题的键名
    name: {
      type: String,
      default: 'name'
    },
    // 菜单标识的键名
    index: {
      type: String,
      default: 'index'
    },
    // 菜单图标的键名
    icon: {
      type: String,
      default: 'icon'
    },
    // 菜单子菜单的键名
    children: {
      type: String,
      default: 'children'
    }
  // 处理代码中键值对应改为传入键值

今天的学习让我学习到了tsx的使用，在后续工作中可以使用tsx进行解决一些特定组件的封装大有好处，今天对tsx的学习也比较系统性。

下一步就是学习 进度条的封装了。今天学习就先到这里吧。

坚持打卡，坚持学习，未来可期，加油😀~

​