主要介绍了Vue在页面右上角实现可悬浮/隐藏的系统菜单,实现思路大概是通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。需要的朋友可以参考下

功能描述： 如图，右侧悬浮菜单按钮，只支持上下方向拖动，点击时展开或关闭菜单。 BUG说明： 鼠标上下方向拖拽，如果松开时鼠标位于悬浮按钮上会默认执行click事件，经验证，click事件与mouse事件的执行顺序为onmousedown =》onmouseup =》onclick,意味着在click事件执行时会与与其相关的mouse事件冲突。 解决方案： 因为click事件执行时间短，所以利用鼠标拖动的时间差作为标志，在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用

这是个大多数网站很常见的功能，点击页面右上角头像显示一个悬浮菜单，点击页面其他位置或再次点击头像则菜单隐藏。 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了，但是对只刚粗看了一遍vue文档的菜鸟来说，坑还是要亲自踩过才算圆满。 知识点 组件及组件间通信 计算属性 正文 1. 父组件 这里暂时只涉及系统菜单这一个功能，因此路由暂未涉及。 基本思路是：通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。

这篇博客主要介绍树形控件的两个小小的功能： 下拉菜单 输入过滤框 以CSS样式为主，也会涉及到Vue组件和element组件的使用。 对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。 使用Vue + Element UI，构建出最基本的树如下图所示： 现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。 下拉菜单 将下拉菜单嵌到树节点中，使操作更加简便、紧凑。 效果演示 效果如图： 图示1：悬浮在树节点状态 图示2：