工作这么久，用到了许多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
使用
<!DOCTYPE html>
<html>
<body>
<canvas id="qr"></canvas>
<script src="/path/to/qrious.js"></script>
<script>
(function() {
var qr = new QRious({
element: document.getElementById('qr'),
value: 'https://github.com/neocotic/qrious'
});
})();
</script>
</body>
</html>
四、穿梭框
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
<template>
<div>
<kr-cascader
:dataObj="dataObj"
:selectedData="selectedData"
@onChange="onChange"
></kr-cascader>
</div>
</template>
<script>
export default {
data() {
return {
dataObj: {
province: {
'101103': '广东省',
},
city: {
'101103': [
{
id: 101164181112,
label: '深圳市'
}
]
},
county: {
'101164181112': [
{
id: 106105142126,
label: '宝安区'
}
]
}
},
selectedData: [
{
id: '101101-101101101112',
label: '北京市-通州区'
}
]
}
},
methods: {
onChange(val) {
console.log('已选中：', val)
}
}
}
</script>
kr-paging
<template>
<div>
<kr-paging
:dataList="dataList"
:selectedData="selectedData"
:pageSize="100"
@onChange="onChange"
></kr-paging>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{
id: 0,
label: '这是第0条数据'
},
{
id: 1,
label: '这是第1条数据'
}
],
selectedData: [
{
id: 0,
label: '这是第0条数据'
}
]
}
},
methods: {
onChange(val) {
console.log('已选中：', val)
}
}
}
</script>
五、正则大全
网址：https://any86.github.io/any-rule/
常用正则大全, 支持vscode扩展插件, 支持图形界面 / vscode插件2种查询方式
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
您必须登录才能参与评论！
立即登录
Day.js
看我这篇文章【js时间插件Dayjs相对Momentjs的优势 – 今日头条】https://m.toutiao.com/is/JV8adUK/
Moment可以换了 dayjs
恩恩，感谢提的建议，明天去一下dayjs
收藏了，感谢分享