- 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
因为开发中为了提高开发效率经常会找一些比较不错的轮子来使用，但是有时候过段时间再用有时候就忘了还得重新查，所以就用这篇文章来记录一下曾经使用过的轮子，本篇文章会持续更新。
1.数字滚动效果
// 安装
npm i countup.js
// 使用
import { CountUp } from './js/countUp.min.js';
window.onload = function() {
var countUp = new CountUp('target', 2000);
countUp.start();
}
2.vue项目实现拖动功能
// 安装
npm i -S vuedraggable
// 使用
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
3.react项目解析Markdown文件
// 安装
npm install react-markdown
// 使用
<ReactMarkdown source={markdown} escapeHtml={false} />
4.react项目Markdown文件导航
// 安装
npm install --save markdown-navbar
// 使用
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
<MarkNav
className="article-menu"
source={markdown}
ordered={false}
/>
5.vue项目可视化
自定义程度较低可以使用v-charts: v-charts.js.org/#/
自定义程序中等可以使用echarts: echarts.apache.org/zh/index.ht… 或者 viser-vue
自定义程度较高可以使用zoomcharts: zoomcharts.com/en/ 或者 AntV: antv.vision/zh
6.不同操作系统绑定快捷键事件
// 安装
npm i -S mousetrap
// 使用
Mousetrap.bind(['command+k', 'ctrl+k'], function() {
console.log('command k or control k');
// return false to prevent default browser behavior
// and stop event from bubbling
return false;
});
7.时间格式转换
// 安装
npm install moment --save
// 使用
moment().format('MMMM Do YYYY, h:mm:ss a')
8.对数据进行复杂操作
// 安装
npm install --save lodash
9.vue项目在线展示pdf文件
npm install vue-pdf --save
