一些好用的12款前端小插件

news2025/1/21 15:45:01

1. cropper.js

Cropper.js 2.0 是一系列用于图像裁剪的 Web 组件。

官网地址：https://fengyuanchen.github.io/cropperjs/v2/zh/

2. Vditor

Vditor是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。

 

 

官网地址：https://b3log.org/vditor/
Github地址:https://github.com/Vanessa219/vditor

3. PPTist

PPTist是一个基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和右键菜单，支持导出本地 PPTX 文件，支持移动端基础编辑和预览，支持 PWA。您可以在此基础上搭建自己的在线幻灯片应用。

在线体验地址：https://pipipi-pikachu.github.io/PPTist/
github地址：https://github.com/pipipi-pikachu/PPTist

4. Element Tiptap Editor

Element Tiptap Editor 是一个在 web 开发领域“所见即所得”的富文本编辑器，基于 tiptap 编辑器和 element-ui 开发，相比很多富文本编辑器，Element Tiptap Editor 使用易上手，对开发者友好，而且可扩展性强，设计简洁。

  • 🎨 使用 element-plus 组件
  • 🔖 支持 markdown 语法
  • 📘TypeScript 支持
  • 🌐 支持 i18n(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he). 欢迎贡献更多的语言
  • 🎈 可用的 events: create, transaction, focus, blur, destroy
  • 🍀 高度自定义, 你可以自定义 extension 和它对应的菜单按钮视图
  • 💻 也可以通过直接控制编辑器的行为来定制编辑器。
地址 https://github.com/Leecason/element-tiptap

5. v-md-editor

v-md-editor 是基于 Vue 开发的 markdown 编辑器组件 ，可轻量化预览markdown，不需要编辑器的情况下使用

 

 

地址：https://www.npmjs.com/package/@kangc/v-md-editor
中文文档：https://ckang1229.gitee.io/vue-markdown-editor/zh/

 

6. TypeIt

TypeIt 是通用的 JavaScript 打字机效果实用程序。凭借其简单而灵活的配置，您可以键入单个或多个字符串来换行、删除和替换彼此，轻松处理包含 HTML、循环等的字符串。

对于更高级、受控的打字效果，TypeIt 附带了配套功能，可以将您的打字控制为单个字符或毫秒，使您能够键入动态叙述，并完全控制速度变化、换行、删除和停顿。

动图

github链接：https://github.com/alexmacarthur/typeit
官网地址：https://www.typeitjs.com/

7. qrcode 二维码

qrcode 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

  • 适用于服务器和客户端（并与 svg 进行原生反应）
  • CLI实用程序
  • 将二维码保存为图像
  • 支持数字、字母数字、汉字和字节模式
  • 支持混合模式
  • 支持中文、西里尔文、希腊文和日文字符
  • 支持多字节字符（如表情符号😄）
  • 自动生成优化的段，以实现最佳数据压缩和最小的 QR 码大小
  • 与应用程序无关的可读性，QR 码根据定义与应用程序无关
文档地址：https://www.npmjs.com/package/qrcode

8. jsbarcode

JsBarcode是一个用 JavaScript 编写的条形码生成器。它支持多种条形码格式，并可在浏览器中和Node.js中使用。当它用于网络时，它没有依赖关系，但如果您喜欢的话，它可以与jQuery一起使用。

 

文档地址：https://www.npmjs.com/package/jsbarcode

9. Clipboard.js

Clipboard.js是一个用于将文本复制到剪贴板的 JS 库。

官网地址：https://clipboardjs.com/

10. Driver.js

Driver.js是一个可以轻松实现 新手指引交互的JavaScript 工具库，主要的作用是为刚接触应用的新手用户快速了解产品，帮助用户把注意力聚焦到某项功能，从而快速熟悉我们的开发的产品。

官网地址：https://kamranahmed.info/driver.js/

11. Pinia.js

Pinia.js由Vue.js团队成员所开发的，是新一代的Vuex，即Vuex5.x，Pinia 可与 Vue 2 和 Vue 3 配合使用。在Vue3.0 项目的使用中备受推崇。

Pinia.js 定位和特点：

  • 完整的 typescript 的支持；
  • 极其轻量，压缩后的体积只有1.6kb;
  • 去除 mutations，只有 state，getters，actions；
  • actions 支持同步和异步；
  • 没有模块嵌套，只有 store 的概念，能够构建多个 store，store 之间可以自由使用，更好的代码分割；
  • 关联 Vue Devtools 钩子，提供更好地开发体验；
官网地址：https://pinia.vuejs.org/

12. Vue-CoreVideoPlayer

Vue-CoreVideoPlayer是一款基于 vue.js 的轻量级的视频播放器插件插件。

文档地址：https://core-player.github.io/vue-core-video-player/zh/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1268782.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

001 基于51单片机的交通灯设计

001 基于51单片机的交通灯设计

001 基于51单片机的交通灯设计 东西向绿灯亮若干秒，黄灯闪烁 5 次后红灯亮， 红灯亮后， 南北向由红灯变为绿灯，若干秒后南北向黄灯闪烁 5 此后变红灯，东西向变绿灯，如此重复 准备工作 keilproteus 完成最…
阅读更多...
【笔记】windows+pytorch：部署一下stable diffusion和NeRF

【笔记】windows+pytorch：部署一下stable diffusion和NeRF

之前都是 *nix 环境使用 pytorch，这次尝试了一下windows。 我们来部署下流行性高的stable diffusion和我觉得实用性比stable diffusion高多了的NeRF Stable Diffusion 其实，我也不知道要写啥，都是按照步骤做就好了，后面等有时间…
阅读更多...
Java数据结构之《直接插入排序》问题

Java数据结构之《直接插入排序》问题

一、前言： 这是怀化学院的：Java数据结构中的一道难度中等的一道编程题(此方法为博主自己研究，问题基本解决，若有bug欢迎下方评论提出意见，我会第一时间改进代码，谢谢！) 后面其他编程题只要我写完…
阅读更多...
const 和 constexpr 深入学习

const 和 constexpr 深入学习

在 C 中，const 和 constexpr 都可以用来修饰对象和函数。修饰对象时，const 表示它是常量，而 constexpr 表示它是一个常量表达式。常量表达式必须在编译时期被计算1。修饰函数时，const 只能用于非静态成员的函数，而 con…
阅读更多...
低功耗蓝牙模块在医疗保健领域中的创新应用

低功耗蓝牙模块在医疗保健领域中的创新应用

医疗保健领域一直在追求更先进的技术，以提高医疗服务的效率和质量。低功耗蓝牙技术的崭新应用为医疗设备的互联性和数据传输提供了可靠的解决方案。本文将深入研究低功耗蓝牙模块在医疗保健领域中的应用，重点关注其在可穿戴设备、远程医疗监测和患者数据…
阅读更多...
YOLOv8 代码部署

YOLOv8 代码部署

一、获取代码 YOLOv8官方GitHub网址 https://github.com/ultralytics/ultralytics 获取YOLOv8代码压缩包 二、虚拟环境配置 这个就不写了，装个Anaconda，网上教程很多 三、PyCharm安装与配置（可选） 这个也不写了，…
阅读更多...
springboot实现邮箱发送功能

springboot实现邮箱发送功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 邮箱效果图一、pom配置二、页面编写三、配置yml四、邮件工具类五、测试发送 邮箱效果图 1.可以利用在出现问题进行邮箱提醒 2.编写html 用于在邮箱中展示的样式 提示…
阅读更多...
基于yolov2深度学习网络的打电话行为检测系统matlab仿真

基于yolov2深度学习网络的打电话行为检测系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1、YOLOv2网络原理 4.2、基于YOLOv2的打电话行为检测 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .................................…
阅读更多...
MEFLUT: Unsupervised 1D Lookup Tables for Multi-exposure Image Fusion

MEFLUT: Unsupervised 1D Lookup Tables for Multi-exposure Image Fusion

Abstract 在本文中，我们介绍了一种高质量多重曝光图像融合（MEF）的新方法。我们表明，曝光的融合权重可以编码到一维查找表（LUT）中，该表将像素强度值作为输入并产生融合权重作为输出。我们为每次…
阅读更多...
后端项目连接数据库-添加MyBatis依赖并检测是否成功

后端项目连接数据库-添加MyBatis依赖并检测是否成功

一.在pom.xml添加Mybatis相关依赖 在Spring Boot项目中&#xff0c;编译时会自动加载项目依赖&#xff0c;然后使用依赖包。 需要在根目录下pom.xml文件中添加Mybatis依赖项 <!-- Mybatis整合Spring Boot的依赖项 --> <dependency><groupId>org.mybatis.s…
阅读更多...
【数据结构】——堆排序

【数据结构】——堆排序

前言&#xff1a;我们已经学习了堆以及实现了堆&#xff0c;那么我们就来给堆进行排序。我们怎么来进行排序呢&#xff1f;这一次我们就来解决这个问题。 如果我们堆排序要求排序&#xff0c;我们是建立大堆还是小堆呢&#xff0c;如果我们建的小堆的话&#xff0c;那我们在排序…
阅读更多...
[PyTorch][chapter 3][李宏毅深度学习-偏差,方差,过拟合,欠拟合]

[PyTorch][chapter 3][李宏毅深度学习-偏差,方差,过拟合,欠拟合]

前言&#xff1a; 这章的目的主要是通过诊断错误的来源,通过错误的来源去优化,挑选模型。 通过本章掌握 过拟合(overfitting)和欠拟合(underfitting)出现原因及解决方案. 目录&#xff1a; 1 概述 2 方差,偏差现象 3 过拟合和欠拟合 4 模型选择 5 概率论回顾 一 概…
阅读更多...
微信小程序获取手机号上限，怎么处理比较省钱

微信小程序获取手机号上限，怎么处理比较省钱

微信新规 微信2023年改了规则&#xff0c;原本免费的小程序获取手机号&#xff0c;现在如果要获取要1分钱一条。 有些小程序的用户非常恐怖&#xff0c; 比如一些工具类的&#xff0c; 群发类的。如果进入小程序就必须要获取小程序&#xff0c;就像是无底洞&#xff0c;让运营…
阅读更多...
基于Java SSM框架实现高校二手交易平台系统项目【项目源码+论文说明】计算机毕业设计

基于Java SSM框架实现高校二手交易平台系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现高校二手交易平台系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个高校二手交易平台&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将…
阅读更多...
token认证机制，基于JWT的Token认证机制实现，安全性的问题

token认证机制，基于JWT的Token认证机制实现，安全性的问题

文章目录 token认证机制几种常用的认证机制HTTP Basic AuthOAuthCookie AuthToken AuthToken Auth的优点 基于JWT的Token认证机制实现JWT的组成认证过程登录请求认证 对Token认证的五点认识JWT的JAVA实现 基于JWT的Token认证的安全问题确保验证过程的安全性如何防范XSS Attacks…
阅读更多...
网络篇---第七篇

网络篇---第七篇

系列文章目录 文章目录 系列文章目录前言一、什么是长连接和短连接？二、长连接和短连接的优缺点？三、说说长连接短连接的操作过程前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分…
阅读更多...
鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Builder组件内自定义构建函数与@Styles自定义组件重用样式（十）

鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Builder组件内自定义构建函数与@Styles自定义组件重用样式（十）

文章目录 一、Builder自定义构建函数1、什么是自定义构建函数2、组件内定义构建函数3、组件外定义构建函数4、Builder装饰器练习 二、Styles重用样式函数1、重用样式的作用2、组件内定义Styles3、组件外定义4、Styles装饰器练习5、注意要点 一、Builder自定义构建函数 1、什么…
阅读更多...
hql面试题之上海某资深数仓开发工程师面试题-求不连续月份的月平均值

hql面试题之上海某资深数仓开发工程师面试题-求不连续月份的月平均值

1.题目 A,B两组产品的月平均值&#xff0c;月平均值是当月的前三个月值的一个平均值&#xff0c;注意月份是不连续的&#xff0c;如果当月的前面的月份不存在&#xff0c;则为0。如A组2023-04的月平均值为2023年1月的数据加2023-02月的数据的平均值&#xff0c;因为没有其他月…
阅读更多...
redis的过期策略以及定时器的实现

redis的过期策略以及定时器的实现

Redis是客户端服务器结构的程序&#xff0c;客户端与服务器通过网络通信&#xff0c;所以对于keys *这种的操作在大型企业中不太建议&#xff0c;生产环境下的key会非常多&#xff0c;Redis是但现成的服务器&#xff0c;执行keys*的时间非常长&#xff0c;就会导致redis服务器阻…
阅读更多...
Linux系统-----进程管理（进程的创建与控制）

Linux系统-----进程管理（进程的创建与控制）

目录 前言 进程 1.基本概念 2.特征 3.Linux系统的进程 进程的创建 1. fork()函数 2. 多进程的创建与输出 进程的控制 1. exec()系列 2. wait() 函数 3. execl( )和fork( )联合使用 4. exit&#xff08; &#xff09; 前言 前面我们学习了Linux系统的基本指令以及如…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023