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

表格类：

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 --save

import 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-table

 main.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) return
      new 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_ENV
 
 3、可以根据变量的值切换不同环境的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 [email protected]

<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.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 50, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 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>