工作这么久,用到了很多js插件,今天就总结一下我常用并且好用的js插件,并附带简单的使用方法,后续会持续更新,会不断分享工作所用过的一些好用的插件,如果对你有帮助关注我哦~
一、时间
1.moment.js
官网:https://momentjs.com/
安装
npm install moment --save
使用
// 引入
import moment from 'moment'
moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
moment(new Date()).format('YYYY-MM-DD')
moment(new Date()).format('HH:mm:ss')
2.timeago.js
官网:https://timeago.org
主要特点
只有2kb,用于格式化日期显示为“***时间以前”,例如“3小时以前”。没有依赖,并支持自动更新模糊时间戳(例如“4分钟前”或“大约1天前”)。 其特点: 支持本地化。支持实时渲染。支持Nodejs和browserjs。
安装
npm install timeago.js
使用
// 引入
// ES6
import { format, render, cancel, register } from 'timeago.js';
// commonjs
const { format, render, cancel, register } = require('timeago.js');
// format the time with locale
format('2016-06-12', 'zh_CN');
二、绘图
Rough.js
官网:https://roughjs.com/
主要特点
Roughjs是一个轻量级的JavaScript图形库(压缩后约9KB),可以让你在网页上绘制素描风格、手绘样式般的图形。Roughjs定义了绘制直线,曲线,圆弧,多边形,圆和椭圆的图元,同时它还支持绘制SVG路径。
安装
npm install --save roughjs
引入
import rough from 'roughjs'
使用
const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height
or SVG
const rc = rough.svg(svg);
let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);
三、生成二维码
qrious
网站地址:https://neocotic.com/qrious
主要特点
qrious是一款基于html5 Canvas的纯js二维码生成插件。通过qrious.js可以快速生成各种二维码,你可以控制二维码的尺寸颜色,还可以将生成的二维码进行Base64编码。
安装
npm install --save qrious
使用
四、穿梭框
krry-transfer
主要特点:
基于 Element UI 的升级版穿梭框组件 多级多选穿梭框(常用于省市区三级联动) 针对数据量庞大的分页穿梭框
安装
npm install krry-transfer --save
依赖 Element checkbox、button 组件和样式
使用
import Vue from 'vue'
import krryTransfer from 'krry-transfer'
Vue.use(krryTransfer)
/*
* or 按需引入
* import { krryCascader, krryPaging } from 'krry-transfer'
*
* Vue.use(krryCascader)
* Vue.use(krryPaging)
*/
kr-cascader
kr-paging
五、正则大全
网址:https://any86.github.io/any-rule/
常用正则大全, 支持vscode扩展插件, 支持图形界面 / vscode插件2种查询方式