GaHingZ 发布的文章

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逐层传递的代码如下:


vscode配置同步及拓展批量离线安装


前言

  1. 换电脑后,怎么保持 配置(settings.json,插件,键位设置等)同步?
  2. 离线安装拓展?
  3. 利用脚本自动进行前面两个步骤

配置同步

三分钟教你同步 Visual Studio Code 设置

离线安装拓展

简单的 VSCode 插件离线安装方法

批量下载离线安装包

这个需求的来源是:云桌面不能访问外网但是可以访问宿主机,想要同步宿主机的 vscode 拓展到云桌面环境

可以直接采用 离线安装拓展 的做法,但是当拓展多了就很浪费时间。

故主要做的事情就是:

  1. 获取并解析 拓展列表 配置文件
  2. 根据配置下载安装包


nginx配置HOST请求头及与webpack-dev-server proxy的区别


前言

遇到一个这样的场景:

往CAS系统进行认证需要带上当前(前端server)域名,拿到认证密钥后向后端发起鉴权,后端校验密钥时还会去校验鉴权url的 Host 和刚刚CAS认证时带的前端server域名是否一致,不一致的话即使密钥合法了也无用。

旧平台是jsp项目,所以 鉴权url Host 和 前端server域名 是一样的。

前后端分离后,前端发起的鉴权url是通过代理转发到后端,代理没有额外处理的情况下,该请求的 Host 指的是后端地址,导致后端鉴权时两个 host 匹配不上