Vue之从零编写一个ContextMenu(右键菜单)插件


前言

ContextMenu 即右键菜单,当前的需求是:右键点击某些组件时,根据所点击组件的信息,展示不同的菜单。

本插件已开源,具体代码和使用可参考: vue-contextmenu

本文采用的是 vue 技术栈,部分处理对于 react 是可以借鉴的

其中需要注意的点有:

  1. 菜单完全显示,即右键点击位于页面下/右侧时,菜单应该向上/左显示
  2. 具体菜单由上层控制,该组件仅提供slot
  3. 该菜单dom上唯一,不需要时应该销毁
  4. 点击页面其他位置,菜单消失

先不考虑插件形式,按日常组件开发


大屏可视化之组件层级设置


前言

最近在进行大屏可视化产品的技术调研,主要是调研 网易有数 和 datav

在组件层级排列这块,两者的实现是不一样的

  • datav:组件均在同级(z-index都是一样的),后定义的属于高层。调整层级就需要移动dom节点位置
  • 有数:根据z-index去设置,调整层级就需要调整自身z-index以及其他受影响的图表 z-index

通过分析vue上两者的实现,比较两者的优缺点


React Context及换肤功能实现


前言

通过讲解 React Context 的用法,引出 React 换肤功能的实现

Context 概念

在组件树中共享数据,避免逐层传递。

我们经常遇到这样的场景,数据需要传到子组件的子组件更甚至更下层组件,用props逐层传递的代码如下: