前端项目中常用的工具包（拖拽排序表格、打印导出表格、文本复制等）【持续更新~~~】

表格类：

cdn库

cdn

vxe-table[开源的多功能表格]

简介

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等…
码云地址
官方API
官方带示例的API

sortable[功能强大的JavaScript 拖拽库]

简介：

Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。实现表格拖拽排序、拖拽排版等功能。
文档连接：
官方文档
备份链接

// 基础使用npm install sortablejs --saveimport Sortable from 'sortablejs';// 初始化配置
sorTableInit() {const node = document.getElementById("item-wrap"); // 获取要管理的容器节点Sortable.create(node,{   //  创建拖拽对象delay: 0, // 鼠标点击多久都可拖拽animation: 150, // 拖拽动画时间direction: 'horizontal', // 拖拽方向onEnd:({oldIndex,newIndex})=>{  // 拖拽完成后的回调 【该回调中可收到一个CustomEvent 对象，该对象中有 oldIndex,newIndex属性可用来进行对原有数据进行排序处理】let targeItem = this.itemList.splice(oldIndex,1)[0] // 拿到移动的数据元素this.itemList.splice(newIndex,0,targeItem) // 将移动的元素数据插入到移动的位置}})},

pl-table[完美解决element-ui表格万级数据渲染卡顿问题]

简介

使用pl-table解决 vue+elment el-table 或el-tree （表格列表或树形控件）渲染万条以上的大数据，数据过多导致卡顿问题。
文档连接：
参考一
GitHub链接

// 基本使用npm i pl-tablemain.js文件直接引入：// 支持 element 表格的无限滚动加载，文档：https://github.com/livelyPeng/pl-table
import plTable from 'pl-table';
import 'pl-table/themes/index.css';
Vue.use(plTable);将组件中使用的 el-table 标签 换成 plTable 即可

handsontable-vue [前端在线表格（Excel类型）]

<template><div id="example" ref="example"></div>
</template><script>
import Handsontable from "handsontable";
import "handsontable/dist/handsontable.full.css";
export default {name: "Handsontable",data() {return {tableData: [["日期", "Tesla", "Volvo", "Toyota", "Ford"],["2019", 10, 11, 12, 13],["2020", 20, 11, 14, 13],["2021", 30, 15, 12, 13],],};},mounted() {this.init()},methods: {init() {if(!this.$refs?.example) returnnew Handsontable(this.$refs.example, {data: this.tableData,rowHeaders: true,colHeaders: true,contextMenu:[ // 鼠标右键菜单内容'添加一行',]});},},
};
</script><style>
/*去除未激活的提示文本*/
.hot-display-license-info{display: none;
}
#hot-display-license-info {display: none;
}
</style>

npm
GitHub参考初始化配置
官网
核心API
博客参考
右击配置

工具函数库类：

deepmerge[实现对象的深度合并的js方法库]

npm链接

lodash[功能强大的js函数库]

官方文档

clipboard2[前端能够调用剪切板的一个插件]

npm链接
GitHub链接
优秀的博主链接

xe-utils 【强大的js工具函数类库】

npm使用
API文档

cross-env 【获取全局环境变量】

参考博客

1、给不同的编译命令指定不同环境"scripts": {"dev": "cross-env NODE_ENV=development nuxt",}2、全局会有一个 process.env.NODE_ENV 变量const env = process.env.NODE_ENV3、可以根据变量的值切换不同环境的API请求地址

json-bigint[解决json长数据精度问题]

npm i json-bigint

var JSONbig = require('json-bigint');var json = '{ "value" : 9223372036854775807, "v2": 123 }';
console.log('Input:', json);
console.log('');console.log('node.js built-in JSON:');
var r = JSON.parse(json);
console.log('JSON.parse(input).value : ', r.value.toString());
console.log('JSON.stringify(JSON.parse(input)):', JSON.stringify(r));console.log('\n\nbig number JSON:');
var r1 = JSONbig.parse(json);
console.log('JSONbig.parse(input).value : ', r1.value.toString());
console.log('JSONbig.stringify(JSONbig.parse(input)):', JSONbig.stringify(r1));为 JSON 格式的字符串转

前端验证类：

vue-puzzle-vcode【拖拽滑块验证】

示例一
示例二

日期函数库

moment.js

官网

页面代码展示

highlight.js

npm install highlight.js

import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css' // 主题文件
// 封装成插件
let Highlight = {}
Highlight.install = function (Vue, options) {Vue.directive('highlight', function (el) {let blocks = el.querySelectorAll('pre code');blocks.forEach((block) => {Hljs.highlightBlock(block)})})
}
Vue.use(Highlight)

test:{"code":0,"msg":"success","data":{"project_list":"zzzz"}}<pre v-highlight><code class="javascript">{{test}}</code></pre>pre中不能有换行，否则会默认开头有空格！！！！！

npm
官网
参考博客

Monaco Editor【完美复刻vs code】

npm install vue-monaco@0.32.1

<template><MonacoEditor class="editor" v-model="code" language="javascript" :options="options" />
</template><script>
import MonacoEditor from 'vue-monaco'export default {components: {MonacoEditor},data() {return {code: 'const noop = () => {}'，options:{readOnly: true,automaticLayout: true,}}}
}
</script><style>
.editor {width: 600px;height: 800px;
}
</style>

npm
官网

vue-json-views[JSON展示工具]

用 pre标签或JJSON.stringify()方法也可实现
npm
博客链接

新手引导【intro.js】

博客链接

拖拽

vuegraggable

博客链接

Vue Grid Layout【页面拖拽布局】

官网
参考仓库

vue-resize-directive【自定拖拽放大布局】

npm

screenfull [全屏插件]

npm

svg-sprite-loader【vue项目中 svg 使用】

npm
参考博客

config.module.rule('svg').exclude.add(resolve('src/components/svgIcon')) // svg图标路径.end()config.module.rule('svg-icon').test(/\.svg$/).include.add(resolve('src/components/svgIcon')).end().use('svg-sprite-loader').loader('svg-sprite-loader').tap(options => {return {symbolId: 'svg-icon-[name]'}}).end()

vue-lottie 【 vue 项目中使用loading动画】

将ui的lodading图转为json数据，生成动画。
npm
参考博客

vue-seamless-scroll 【大屏列表无线滚动】

参考博客
参考博客2

<template><div id="app"><div class="backround"><div class="toptitle"><div class="item">日期</div><div class="item">姓名</div><div class="item">地址</div></div><vue-seamless-scroll:data="listData":class-option="optionHover"class="seamless-warp"><el-table :data="listData" border :show-header="status"><el-table-column prop="date" label="日期"> </el-table-column><el-table-column prop="title" label="姓名"> </el-table-column><el-table-column prop="test" label="地址"> </el-table-column></el-table></vue-seamless-scroll><div class="toptitle"><div class="item">总计</div><div class="item">111</div><div class="item">222</div></div></div></div>
</template><script>
export default {data() {return {status: false,listData: [{title: "无缝滚动第一行无缝滚动第一行",date: "2017-12-16",test: "测试",test2: "测试2",test3: "测试3",},{title: "无缝滚动第2行无缝滚动第2行",date: "2017-12-16",test: "测试",test2: "测试2",test3: "测试3",},{title: "无缝滚动第3行无缝滚动第3行",date: "2017-12-16",test: "测试",test2: "测试2",test3: "测试3",},{title: "无缝滚动第4行无缝滚动第4行",date: "2017-12-16",test: "测试",test2: "测试2",test3: "测试3",},{title: "无缝滚动第5行无缝滚动第5行",date: "2017-12-16",test: "测试",test2: "测试2",test3: "测试3",},{title: "无缝滚动第6行无缝滚动第6行",date: "2017-12-16",test: "测试",test2: "测试2",test3: "测试3",},],};},computed: {optionHover() {return {step: 0.5, // 数值越大速度滚动越快limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: false, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 50, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},},
};
</script>
<style lang="less">
// .backround {//   width: 100%;
//   height: 1000px;
// }// 滚动范围
.seamless-warp {height: 200px;overflow: hidden;
}
.el-table .cell {text-align: center;
}
.toptitle {width: 100%;display: flex;background-color: gainsboro;margin-bottom: 10px;border-bottom: 1px solid gainsboro;background-color: transparent;color: red;
}
.item {width: 33.3%;height: 48px;line-height: 48px;text-align: center;
}
</style>