vue用到的各种三方插件的介绍和使用方法 + 官方文档

本篇文章用于自用，有的地方介绍的可能会不清楚，请谨慎观看

本文会随着做的项目用到的东西会不断的更新

---

1.@riophae/vue-treeselect

@riophae/vue-treeselect 是一个基于 Vue.js 的树形选择组件，用于在用户界面中展示和选择层次结构的数据，是一个树形的下拉菜单

• 下载

npm install --save @riophae/vue-treeselect

• 引入组件和样式

import VueTreeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

• 基本用法

<VueTreeselect
    v-model="selectedNode"
    :options="treeData"
    :multiple="true"
    :clearable="true"
    :flat="false"
    :searchable="true"
    :disable-branch-nodes="false"
    :auto-load-root-options="true"
    placeholder="Select nodes"
  />

其中：

v-model	绑定选择的节点数据，可以是单个节点对象或者是数组
options	树形数据的源，是一个数组，每个元素表示一个节点，可以包含子节点
multiple	是否支持多选，设为 true 表示支持多选，默认为 false
clearable	是否显示清除按钮，默认为 false
flat	是否将树形结构展开为扁平列表，默认为 false
searchable	是否显示搜索框，默认为 true
disable-branch-nodes	是否禁用父节点（仅限展示作用），默认为 false
placeholder	输入框的占位符文本
auto-load-root-options	是否自动加载根节点选项，默认为 true
@select, @deselect,	选择事件，移出选项事件
@open, @close	展开，关闭事件

2.clipboard

js库，用于处理复制和粘贴操作

优点：复制文本到剪贴板，跨浏览器兼容性，简单api，具有安全策略。

• 安装

npm install clipboard --save

• api

1.new ClipboardJS(selector) 创建实例并指定要绑定复制功能的选择器或元素
var clipboard = new ClipboardJS('.btn');

2.clipboard.on('event', handler) 添加事件监听器，捕获复制操作的成功和失败事件
clipboard.on('success', function(e) {})
clipboard.on('error', function(e) {})

3.e.clearSelection() 清除选中的文本

4.destroy() 销毁 ClipboardJS 实例，解除所有事件监听器。
clipboard.destroy();

3.core-js

实现跨浏览器的兼容性，提供 ECMAScript 标准的 polyfill（填充）以及其它功能扩展

4.dom-to-image+jspdf

实现对特定的dom,页面等实现截图，可以进行pdf导出和图片下载

npm i dom-to-image jspdf

• 使用 

import domtoimage from "dom-to-image";

let node = document.querySelector("#pdf-content");
      domtoimage.toPng(node,{
         allowTaint: true,
         useCORS: true}).then((imgData)=>{
          const pdfWidth = 297; // A4 横向宽度，单位是 mm
          let img = new Image();
          img.crossOrigin='anonymous';
          img.src = imgData;
          img.onload=()=>{
            const imgWidth = img.width;
            const imgHeight = img.height;
            const pdfHeight = (imgHeight * pdfWidth) / imgWidth;
            const pdf = new jsPDF("l","mm",[pdfWidth, pdfHeight]);
            // 添加图像到 PDF
            pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);

            // 保存 PDF 文件
            pdf.save(`${this.year}碳经营报告.pdf`);
          }
          // 获取图像属性
          // let imgProps = pdf.getImageProperties(imgData);
          // const pdfWidth = pdf.internal.pageSize.getWidth();
          // const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;          
        })
        .catch(function (error) {
          console.error("转换成PNG时出错：", error);
        });

 5.file-saver

用于浏览器中生成和保存文件

npm install file-saver

file-saver 可以用于保存各种类型的文件

• 保存生成的 PDF 文件。
• 将 canvas 元素保存为图片文件（PNG、JPEG 等）。
• 导出表格数据为 CSV 文件。
• 将生成的 HTML 内容保存为 HTML 文件等。

使用的时候具体用法去网上找案例参考。

6.fuse.js

是一个搜索引擎库，适用于许多需要快速和灵活搜索的应用场景，可以实现高效的模糊搜索，提升用户体验和应用的交互性。

作用：

• 模糊搜索
• 自动补全
• 高度可配置
• 快速和轻量
• 支持多语言

npm install fuse.js

• 使用 

// 导入 fuse.js 库
import Fuse from 'fuse.js';

// 示例数据
const books = [
  { title: 'JavaScript: The Good Parts', author: 'Douglas Crockford' },
  { title: 'JavaScript: The Definitive Guide', author: 'David Flanagan' },
  { title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' },
  { title: 'You Don\'t Know JS', author: 'Kyle Simpson' }
];

// 配置搜索选项
const options = {
  keys: ['title'] // 指定要搜索的字段
};

// 创建 Fuse 实例
const fuse = new Fuse(books, options);

// 执行搜索
const result = fuse.search('javascript');

7.highlight.js

实现语法高亮显示，特别适用于展示代码示例和技术文档

8.js-cookie

是处理浏览器端 Cookie 操作的一个简单而有效的解决方案。

npm install js-cookie --save

•  使用

1.设置 Cookie

// 设置一个名为 'username' 的 Cookie，有效期为 7 天
Cookies.set('username', 'John Doe', { expires: 7 });

2.获取 Cookie
let username = Cookies.get('username');

3.删除 Cookie
Cookies.remove('username');

4.其他选项
// 设置 Cookie 并指定路径和域名
Cookies.set('username', 'John Doe', { expires: 7, path: '/', domain: 'example.com', secure: true });

9.jsencrypt

主要用于在客户端对敏感数据进行加密，例如用户的密码、个人信息等，以便在数据传输过程中提供额外的安全保障

npm install jsencrypt --save

• 使用

1.生成密钥对
var crypt = new JSEncrypt();
crypt.getKey();
var publicKey = crypt.getPublicKey();
var privateKey = crypt.getPrivateKey();

2.使用公钥加密数据
var encrypt = new JSEncrypt();
encrypt.setPublicKey(publicKey);
var encrypted = encrypt.encrypt('Hello World!');
console.log(encrypted);  // 输出加密后的字符串

3.使用私钥解密数据
var decrypt = new JSEncrypt();
decrypt.setPrivateKey(privateKey);
var decrypted = decrypt.decrypt(encrypted);
console.log(decrypted);  // 输出解密后的原始数据 'Hello World!'

10.nprogress

用于在网页加载过程中显示加载进度条,通过显示加载状态来提示用户当前页面的加载进度

npm install nprogress --save

• 使用

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

 NProgress 会在页面加载或异步请求开始时自动显示进度条，请求完成时自动隐藏。

// 开始加载时显示进度条
NProgress.start();

// 加载完成后隐藏进度条
NProgress.done();

可以根据需要对进度条进行更多的配置和定制，例如修改进度条的颜色、调整动画速度等

// 修改进度条的颜色
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false });

// 手动控制进度条显示和隐藏
NProgress.set(0.4); // 设置进度为 40%
NProgress.inc();   // 增加进度条进度

11.quill

用于在网页应用程序中实现富文本编辑功能

具体使用查看网上案例。

12.screenfull

用于实现全屏模式的功能。它提供了一个简单的 API，可以让网页中的元素进入和退出全屏状态

npm install screenfull --save

import screenfull from 'screenfull'

• screenfull.isEnabled：检查当前浏览器是否支持全屏功能。
• screenfull.toggle()：切换当前页面或指定元素的全屏状态。
• screenfull.isFullscreen：检查当前是否处于全屏状态。
• screenfull.raw.fullscreenchange：全屏状态变化事件，在全屏状态改变时触发。
• 事件监听器：可以监听 fullscreenchange 事件来检测全屏状态的变化，并在变化时执行相应的操作

<template>
  <div>
    <button @click="toggleFullscreen">Toggle Fullscreen</button>
  </div>
</template>

<script>
import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(); // 切换全屏状态
      }
    }
  },
  mounted() {
    // 监听全屏状态变化事件
    document.addEventListener(screenfull.raw.fullscreenchange, () => {
      if (screenfull.isFullscreen) {
        console.log('进入全屏模式');
        // 在这里执行进入全屏后的操作
      } else {
        console.log('退出全屏模式');
        // 在这里执行退出全屏后的操作
      }
    });
  }
};
</script>

13.sortablejs

用于创建拖放排序列表的 JavaScript 库，它允许用户通过拖拽方式重新排序列表项

npm install sortablejs --save

• 使用 

import Sortable from 'sortablejs'; // 如果使用了模块化的环境，通过 import 导入

document.addEventListener('DOMContentLoaded', function () {
  const sortableList = document.getElementById('sortable-list');

  // 创建一个 Sortable 实例
  const sortable = new Sortable(sortableList, {
    animation: 150, // 动画时间（毫秒）
    // 可选：其他配置项
    // 可以在官方文档中找到更多的选项和事件处理程序 https://sortablejs.github.io/Sortable/
  });

  // 可以监听排序事件，例如：
  sortableList.addEventListener('sortupdate', function (event) {
    console.log('排序更新事件:', event.detail);
    // 在这里可以处理排序更新后的逻辑
  });
});

14.vue-count-to

用于数字增减动画组件，用于展示数字的过渡效果，比如数字的递增、递减或者定时器效果

npm install vue-count-to --save

• 使用

<template>
  <div>
    <count-to :start-val="startVal" :end-val="endVal" :duration="duration" />
  </div>
</template>

<script>
import CountTo from 'vue-count-to';

export default {
  components: {
    CountTo
  },
  data() {
    return {
      startVal: 0, // 起始值
      endVal: 100, // 结束值
      duration: 3000 // 动画持续时间，单位毫秒
    };
  }
};
</script>

•  属性

• start-val：动画的起始值。
• end-val：动画的结束值。
• duration：动画的持续时间，以毫秒为单位
• :autoplay：是否自动播放，默认为 true。
• :easing-function：动画的缓动函数，默认为线性。
• :decimal：显示的小数位数。
• :group：分组显示，如每三位数用逗号隔开。
• @counted：动画结束时的回调函数等。

15.vue-cropper

它允许用户在前端对图像进行裁剪和编辑操作。这个组件非常适合需要用户上传并裁剪图像的应用程序，比如头像上传、图片编辑等场景。

npm install vue-cropper

• 使用

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :outputSize="{ width: 200, height: 200 }"
      :view-mode="1"
      :drag-mode="cropDragMode"
      :aspect-ratio="1"
      :auto-crop-area="0.8"
      :center="true"
      @ready="onCropperReady"
    ></vue-cropper>
    <button @click="cropImage">Crop Image</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper';

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imageSrc: 'path/to/your/image.jpg',
      cropDragMode: 'crop',
    };
  },
  methods: {
    onCropperReady() {
      console.log('Cropper ready');
    },
    cropImage() {
      this.$refs.cropper
        .getCroppedCanvas({
          width: 200,
          height: 200,
        })
        .toBlob((blob) => {
          // 处理裁剪后的 blob 数据
          console.log(blob);
        });
    },
  },
};
</script>

<style>
/* 可以添加样式来自定义裁剪框的样式 */
</style>

用法

• 在模板中使用 <vue-cropper> 标签，并通过 :src 属性设置要裁剪的图像路径。
• 可以设置 outputSize 来指定裁剪后输出的图像尺寸。
• 使用事件 @ready 可以在裁剪组件加载完成后执行相应的操作。
• 使用 getCroppedCanvas 方法可以获取裁剪后的图像数据，进一步处理或上传至服务器。

16.vue-intersect

用于监听元素与视口的交集变化。这在需要实现滚动监听或者在元素进入视口时执行特定操作的情况下非常有用。

npm install vue-intersect

• 使用

<template>
  <div>
    <div class="intersect-item" v-intersect="handleIntersect" :intersect-options="intersectOptions">
      <!-- 这里是需要监听交集的内容 -->
      <!-- 例如图片、懒加载内容等 -->
    </div>
  </div>
</template>

<script>
import VueIntersect from 'vue-intersect';

export default {
  directives: {
    intersect: VueIntersect,
  },
  data() {
    return {
      intersectOptions: {
        root: null, // 默认为视口
        threshold: 0.5, // 交叉比例阈值，0-1 之间，表示元素多少可见时触发
        rootMargin: '0px', // 视口边界偏移量，可用于进一步定制何时视为进入视口
        once: true, // 是否只触发一次
      },
    };
  },
  methods: {
    handleIntersect(entries, observer) {
      // entries 是交集监听的观察结果数组
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 元素进入视口
          console.log('Element is intersecting with viewport');
        } else {
          // 元素离开视口
          console.log('Element is not intersecting with viewport');
        }
      });
    },
  },
};
</script>

<style>
.intersect-item {
  /* 可以添加样式来定义元素的外观 */
}
</style>

用法

• 使用 v-intersect 指令在需要监听的元素上，并绑定一个处理交集变化的方法（这里是 handleIntersect）。
• 可以通过 intersect-options 属性传递选项来配置监听的条件，如视口边界、交叉比例阈值等。
• 在 handleIntersect 方法中，处理元素进入或离开视口时的逻辑。

 17.vue-meta

用于管理页面的 meta 信息，例如标题（title）、meta 标签、link 标签等。它允许你在每个组件中动态设置和管理页面的头部信息

npm install vue-meta

• 引入

import Vue from 'vue';
import VueMeta from 'vue-meta';

Vue.use(VueMeta);

• 使用

<template>
  <div>
    <h1>My Page</h1>
  </div>
</template>

<script>
export default {
  metaInfo: {
    title: 'My Page Title',
    meta: [
      { name: 'description', content: 'This is my awesome page!' },
      { property: 'og:title', content: 'My Page Title' },
      { property: 'og:description', content: 'This is my awesome page!' }
    ]
  }
};
</script>

可以在组件内部计算或根据组件的动态来生成meta信息

<script>
export default {
  data() {
    return {
      pageTitle: 'Dynamic Page Title',
      pageDescription: 'This is a dynamic page!'
    };
  },
  computed: {
    dynamicMetaInfo() {
      return {
        title: this.pageTitle,
        meta: [
          { name: 'description', content: this.pageDescription },
          { property: 'og:title', content: this.pageTitle },
          { property: 'og:description', content: this.pageDescription }
        ]
      };
    }
  },
  metaInfo() {
    return this.dynamicMetaInfo;
  }
};
</script>

18.vue2-scale-box

用于创建可缩放的容器或框，它允许你在应用程序中轻松地实现可缩放的 UI 元素，例如可缩放的图片、地图等。

npm install vue2-scale-box

• 使用

<template>
  <div>
    <vue2-scale-box
      :scale="scale"
      :min-scale="minScale"
      :max-scale="maxScale"
      @change="handleScaleChange"
    >
      <!-- 在这里放置你想要可缩放的内容 -->
      <img src="your-image.jpg" alt="可缩放的图片" />
    </vue2-scale-box>
  </div>
</template>

<script>
import Vue2ScaleBox from 'vue2-scale-box';

export default {
  components: {
    Vue2ScaleBox,
  },
  data() {
    return {
      scale: 1, // 初始缩放比例
      minScale: 0.5, // 最小缩放比例
      maxScale: 2, // 最大缩放比例
    };
  },
  methods: {
    handleScaleChange(newScale) {
      // 处理缩放比例变化的逻辑
      this.scale = newScale;
    },
  },
};
</script>

属性

• scale：当前缩放比例。
• min-scale：最小允许的缩放比例。
• max-scale：最大允许的缩放比例。

事件

• change：当缩放比例发生变化时触发，回调函数接收新的缩放比例

19. @amap/amap-jsapi-loader

用于动态加载高德地图 JavaScript API 的工具库，帮助开发者在需要时异步加载地图 API，以减少初始加载时间或在需要时再加载地图

npm install @amap/amap-jsapi-loader --save

20.@ant-design/colors

是 Ant Design 官方提供的一个颜色库，用于访问 Ant Design 设计系统中定义的颜色变量

npm install @ant-design/colors --save

• 使用

import { blue } from '@ant-design/colors';

const App = () => {
  return (
    <div style={{ backgroundColor: blue.primary, color: blue.text }}>
      Hello, Ant Design Colors!
    </div>
  );
};

export default App;

21.@antv/g2plot

是 AntV 开发的一个基于 G2 封装的数据可视化库，用于在 Web 应用中创建各种类型的统计图表和数据可视化图形

npm install @antv/g2plot --save

• 使用

import { createApp } from 'vue';
import { Column } from '@antv/g2plot';

const App = {
  setup() {
    const data = [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 }
    ];

    const columnPlot = new Column('chart-container', {
      data,
      xField: 'genre',
      yField: 'sold',
      xAxis: { label: { autoRotate: false } },
      yAxis: { min: 0 },
      label: {
        position: 'middle',
        style: { fill: '#FFFFFF', opacity: 0.6 }
      }
    });

    columnPlot.render();

    return { columnPlot };
  }
};

createApp(App).mount('#app');

22.@chenfengyuan/vue-qrcode

用于在 Vue 项目中生成二维码。它提供了一个简单的方式来创建二维码，并支持多种自定义选项，以便根据需要调整生成的二维码的样式和功能。

npm install @chenfengyuan/vue-qrcode --save

• 使用

<template>
  <div>
    <!-- 使用 qrcode 组件，并传递数据和配置选项 -->
    <qrcode :value="qrData" :options="qrOptions"></qrcode>
  </div>
</template>

<script>
// 导入 @chenfengyuan/vue-qrcode 组件
import Qrcode from '@chenfengyuan/vue-qrcode';

export default {
  components: {
    Qrcode
  },
  data() {
    return {
      qrData: 'https://example.com', // 二维码的内容，可以是任何文本或链接
      qrOptions: {
        // 可选配置选项，例如尺寸、背景颜色等
        size: 200,
        bgColor: '#FFFFFF',
        fgColor: '#000000'
      }
    };
  }
};
</script>

<style>
/* 可以在这里定义二维码的样式，例如设置宽度、高度等 */
</style>

23.@vue-office/docx  @vue-office/excel  @vue-office/pdf

处理文档工具，包括在线编辑，导出等

24.tailwindcss

这是一个很好用的css组件库，可以全局引入后只需要写样式名就可以用封装好的样式了

官网：安装 - TailwindCSS中文文档 | TailwindCSS中文网

25. 若依前后端分离官方文档

前端手册 | RuoYi

26.小诺多租户官方文档

https://xiaonuo.vip/doc?catalogueId=1574674492144766978&menuId=1574684190755540994