【Vue笔记】简单写一个`dropdown`组件

项目介绍无关。顺便用自己的技术实现Teambition的下拉。对了，我也会准备笔记，设计需求结构，形成一个三点图标作为激活下拉菜单栏的入口。小菜单项组件的组成是我自己的想法。为了能够复用布局，菜单需要被入口引用，定位在下方某个位置。当下拉框未激活时，菜单无法显示，菜单出现时不会影响其他组件。布局通过点击menu-item触发事件向上传递事件，向上传递menu-item组件menu-item。菜单项需要svg图标、文本文本和触发事件名称操作。由于svg文字太长，设置为slot插入，其余设置为props的基本结构[Dropdown]代码说明请将@click绑定移到menu-item下面的步骤,里面就有你要找的$emit[Dropdown]样式整体布局div.dropdown{display:flex;弹性方向：列；对齐项目：居中；}.menu{位置：绝对；top:31.5px;}设置入口的图标.entrysvg.icon{width:1em;高度：1em；不透明度：0.5;}.entrysvg.icon:hover{不透明度：1;cursor:pointer;}将条目定位为菜单ref.entrysvg.icon{position:relative;}[Dropdown]behaviorimportmenuItemfrom'@/components/menu-item'exportdefault{components:{'menu-item':menuItem,},props:{active:{type:Boolean,default:false,},},methods:{toggleHandler(){this.$emit('toggled')},handler(action){this.$emit('toggle-menu',action)}},}代码说明active代表下拉是否激活v-show="active"控制菜单的显示[menu-item]基本结构<模板>{{text}}