Vue 生态常用工具库（组合、拖拽、图表、校验、懒加载）

码农巧克零

已于 2024-08-30 10:31:34 修改

阅读量925

点赞数 11

分类专栏：前端开发程序员编程文章标签： vue.js 前端 javascript

于 2024-08-30 10:30:56 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47588164/article/details/141711548

版权

vueuse
VueUse 是一个基于 Vue 组合式 API 的工具库，里面提供了一系列高效、易用的组合函数，用于简化 Vue 开发，节省开发时间。
Vue官网：vueuse.org/
VueUse 主要特点：

丰富的组合函数
TS支持
轻量级
良好的文档

VueUse里面有很多的分类，每个分类下面又有各种丰富的 API：

浏览器 API

useFetch：用于发起 HTTP 请求，类似于浏览器的 fetch API。
useClipboard：用于操作剪贴板，例如复制文本。
useLocalStorage：简化 localStorage 的使用。
......

状态管理

useToggle：一个简单的开关状态管理工具。
useCounter：用于计数的状态管理工具。
.....

传感器

useMouse：追踪鼠标的位置和状态。
useGeolocation：获取地理位置信息。

用户界面

useFullscreen：控制元素的全屏状态。
useDark：检测和切换暗模式。

工具函数

useDebounce：提供防抖功能。
useThrottle：提供节流功能。

基本使用
安装：
bash 代码解读复制代码npm install @vueuse/core

然后就可以在项目中引入并使用：
html 代码解读复制代码<template>
<div>{ { x }}</div>
<div>{ { y }}</div>
</template>

const { x, y } = useMouse()
</script>

综合示例：待办事项
要求：用到两个 VueUse 里面的工具方法：useLocalStorage、useToggle
vuedraggable
vuedraggable 是一个基于 Sortable.js 的 Vue 组件，用于实现拖拽和排序功能。它可以让你在 Vue 应用中轻松地实现拖拽排序，并提供了丰富的配置选项和事件来控制拖拽行为。

Sortable.js 是一个轻量级的 JS 库，用于实现拖拽排序功能。它支持 HTML5 的拖拽 API，并提供了丰富的选项和事件，可以轻松地在网页中实现拖拽排序、拖拽交换等功能。Vue.Draggable 是基于 Sortable.js 构建的，用于在 Vue 应用中实现这些功能。
Sortable.js 的特点：

轻量级：Sortable.js 非常轻量，核心库只有几千字节。
高性能：利用现代浏览器的 HTML5 拖拽 API，提供高性能的拖拽体验。
多样的选项：提供丰富的选项和回调函数，可以自定义拖拽行为。
多种场景：支持多种拖拽场景，包括列表排序、网格布局、分组拖拽等。
与框架集成：容易与主流前端框架集成，如 Vue、React、Angular 等。

基本使用
首先安装这个库：
bash 代码解读复制代码npm install vuedraggable@4.0.0

注意在安装的时候，一定要指定安装的版本为 4.0.0
安装后可以从这个库中导入一个组件：
html 代码解读复制代码<template>
<draggable
v-model="myArray"
group="people"
@start="drag=true"
@end="drag=false"
itemKey="id"
>
<template #item="{ element }">
<div class="task">{ { element.name }}</div>
</template>
</draggable>
</template>

这是 vuedraggable 的一个标准用法。

v-model="myArray"：数组包含了需要拖拽排序的元素。
group="people"：group 属性用于配置分组，相同 group 名称的 draggable 实例之间允许相互拖拽元素。
@start="drag=true"：当拖拽操作开始时触发，这里将 drag 变量设置为 true，这可以用于在拖拽开始时触发一些行为，比如改变样式或显示一些提示。
@end="drag=false"：当拖拽操作结束时触发，这里将 drag 变量设置为 false

实战案例
一个“未完成”列表和一个“已完成”列表，两个列表之间的项目可以自由拖动。
v