[Vue笔记] 简单写一个`dropdown`组件

项目介绍

闲得没事，顺便把Teambition的dropdown用自己的技术实现一下，顺带把笔记也做好

设计需求

1. 结构组成

   • 一个三点的图标作为激活dropdown的菜单栏打开的入口entry
   • dropdown的菜单栏menu
   • menu中由更小的menu-item组件构成，这是我自己的想法，为了能够复用

2. 布局要求

   • menu需要以entry为参照，定位在下方一定位置
   • menu在dropdown未被激活时，不能显示
   • menu出现时不能影响其他组件的布局

3. 向上传递事件

   • 通过点击menu-item来触发事件，并向上传递

4. menu-item组件

   • menu-item需要svg图标，文字text和触发事件名称action
   • 由于svg文字太长，将其设置为slot插入，其余设置为props

[Dropdown] 基本结构

代码说明

• menu-item中的@click绑定请移步下面，有你要找的$emit

[Dropdown] 样式