Skip to main content

前端插件

富文本编辑器​

Markdown 编辑器​

通用：

react：

vue：

代码编辑器​

时间日期​

拖拽​

流程图​

业务流​

  • bpmn-js
    • bpmn-js 文档、github 仓库，在后面两个库之上，bpmn-js 定义了 BPMN 细节，例如外观、建模规则和工具（即调色板）
    • bpmn-moddle，读写 BPMN 2.0 模式兼容的 XML 文档，并访问图表上绘制的形状和连接背后的 BPMN 相关信息
    • diagram-js，用来绘制形状和连接，提供与图形元素交互的方法以及其他工具
    • 参考 1
    • 参考 2
    • 参考 3

甘特图​

组织结构图​

思维导图​

  • markmap 将 markdown 格式转为思维导图
  1. Mermaid：用于创建交互式的流程图，时序图，甘特图等
  2. jsMind：用于创建思维导图
  3. D3.js：用于创建交互式的数据可视化，包括思维导图
  4. GoJS：用于创建交互式的流程图，网络图，思维导图等

在线文档​

Canvas 库​

  1. Faloric js：功能强大的 Canvas 库，支持对象的拖放、缩放、旋转和编辑
  2. Konvajs：2D 渲染引擎，支持动画，可以很容易地在 Canvas 中创建交互式图形
  3. pixijs：轻量级的 2D 渲染引擎，非常适合游戏和动画
  4. Three.js：用于 WebGL 的 3D 图形库，可以轻松地在 Canvas 中呈现 3D 场景
  5. Paperjs：强大的向量圈形库，可以用于创建复杂的矢量图形和动画
  6. P5js：基于 Processing 的 JavaScript 库，可以用于创建交互式图形和动画
  7. CreateJS：功能强大的 JavaSeript 库，提供了多种工具，用于创建 HTML5 内容，包括 Canvas
  8. GreenSock：用于动画的 JavaScript 库，支持 Canvas 和 SVG
  9. D3js：强大的数据可视化库，可以用于创建复杂的图表和可视化，包括 Canvas

3D 图形库​

  1. Threejs: 用于 WebGL 的 3D 图形库，非常适合创建复杂的 3D 场景和动画
  2. Babylon.js 功能强大的 3D 图形库，提供了一组强大的工具，用于创建复杂的 3D 场景
  3. A-Frame：用于 webVR 的库，可以轻松地创建交互式 3D 场景
  4. PlayCanvas：用于在线游戏和 3D 内容的引擎，提供了一组强大的工具，用于创建高质量的 3D 场景

地图库​

  1. Leaflet：这是一个开源的 JavaScript 地图库，非常适合创建简单的地图和交互式地图应用程序
  2. OpenLayers：这是一个功能强大的开源 JavaScript 地图库，提供了丰富的地图功能，包括地图瓦片，图层控制，矢量图形等
  3. Mapbox GL JS：这是一个开源的 JavaScript 库，用于创建交互式地图，支持大量的地图图层和自定义样式
  4. Google Maps JavaScript API：这是 Google 提供的地图 API，可以用于在网站和移动应用程 序中嵌入 Google 地图

电子表格库​

  1. Handsontable：这是一个功能强大的 JavaScript 电子表格库，提供了丰富的功能，包括排序，筛选，复制／粘贴等
  2. SheetJS：这是一个开源的电子表格库，支持读写多种格式的电子表格文件，包括 Excel，CSV 等
  3. jExcel：这是一个开源的 JavaScript 电子表格库，提供了丰富的功能，包括编辑，排序，过滤等
  4. Tabulator：这是一个功能强大的 JavaScript 电子表格库，提供了丰富的功能，包括排序，筛选，编辑等

物理引擎库​

  1. Box2D：2D 物理引擎，支持各种物理模拟，如碰撞，重力，弹力等
  2. Chipmunk：2D 物理引擎，提供了丰富的功能，包括碰撞检测，多种物理运动等
  3. Bullet：3D 物理引擎，提供了丰富的功能，包括碰撞检测，刚体运动，软体模拟等
  4. Havok：一个商业的 3D 物理引擎，提供了丰富的功能，包括碰撞检测，刚体运动，软体模拟等

ERP/CMS​

OA 系统​

O2OA​

虚拟列表​

轮播图​

PDF​

加解密​

处理 js 精度​

右键菜单​

数字滚动效果​

图片预览​

图片裁剪​

图片懒加载​

剪贴板​

五彩纸屑​

二维码生成器​

留言板​

中国省市区乡镇村地质数据​

webSocket 通信​

MQTT​

  • MQTT.js Node.js 和浏览器的 MQTT 客户端

页面进度条​

页面滚动动画​

懒加载​

JSON 数据美化​

vuex 状态持久化​

vuex-persistedstate

捕获键盘的输入​

范围滑块​

数据可视化​

生成随机数据​

1、randomjson

根据条件 json 生成随机 json

let axios = require('axios');
let randomjson = require('randomjson');

let dd = Math.random() * 10;

let modelJson = {
  'data<@{5000}>': [
    {
      RDJ_GRBH: '<@index>' + dd,
      BIP_XM: '姓名',
      TJSJ: '20200115000555',
      user: '2333'
    }
  ]
};

let myjson = randomjson(modelJson);

axios
  .post('http://192.168.130.63:5001/lgMulityInsert/ry', myjson)
  .then(res => {
    console.log(res.data);
  })
  .catch(err => {
    console.log(err);
  });

时间轴​

https://github.com/Ivanzgh/timeline

动画库​

Tween.js​

https://github.com/tweenjs/tween.js

let box = document.createElement('div');
box.style.setProperty('background-color', '#008800');
box.style.setProperty('width', '100px');
box.style.setProperty('height', '100px');
document.body.appendChild(box);

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
}
animate();

let coords = { x: 200, y: 0 };
let tween = new TWEEN.Tween(coords)
  .to({ y: 200 }, 3000)
  .easing(TWEEN.Easing.Sinusoidal.InOut)
  .onUpdate(() => {
    box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)');
  })
  .start();

let tweenBcak = new TWEEN.Tween(coords)
  .to({ y: 0 }, 3000)
  .easing(TWEEN.Easing.Sinusoidal.InOut)
  .onUpdate(() => {
    box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)');
  });

tween.chain(tweenBcak);
tweenBcak.chain(tween);

配合 three.js 使用，比如让一个球体沿 z 轴上下运动

let coords = { x: 84771.68253191965, y: 31757.48999119179, z: 8.530729184960364 };
let tween = new TWEEN.Tween(coords)
  .to({ z: coords.z + 1 }, 3000)
  .easing(TWEEN.Easing.Sinusoidal.InOut)
  .onUpdate(() => sphereMesh.translateZ(0.01))
  .start();
let tweenBack = new TWEEN.Tween(coords)
  .to({ z: coords.z }, 3000)
  .easing(TWEEN.Easing.Sinusoidal.InOut)
  .onUpdate(() => sphereMesh.translateZ(-0.01));
tween.chain(tweenBack);
tweenBack.chain(tween);

function animation() {
  requestAnimationFrame(animation);
  TWEEN.update();
  threelayer.renderScene();
}
animation();

lottiefiles​

https://lottiefiles.com/

Lottie 是一种基于 JSON 的动画文件格式，可以创建复杂的 UI SVG 动画

https://lottiereact.com/

在 react 项目中使用 lottiefiles

import Lottie from 'lottie-react';
import animationData from './assets/dlf10_pPYkESohrg.json';

export default function Children() {
  return <Lottie animationData={animationData} />;
}