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

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.mzph.cn/news/185716.shtml

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

相关文章

JavaEE——简单认识CSS

JavaEE——简单认识CSS

文章目录 一、简单了解什么是 CSS二、CSS 选择器1.标签选择器2.类选择器3.ID 选择器4.后代选择器5.子选择器6.伪类选择器 三、字体属性1.设置字体家族2.设置字体大小3.设置字体粗细4.文字倾斜 四、文本属性1.文本对齐2.文本装饰3.文本缩进4.背景设置 五、圆角矩形六、CSS 盒子模…
阅读更多...
【编码艺术：掌握String类函数接口的妙用指南】

【编码艺术：掌握String类函数接口的妙用指南】

【本节目标】 1. 为什么要学习string类 2. 标准库中的string类 1. 为什么要学习string类 1.1 C语言中的字符串 C语言中，字符串是以\0结尾的一些字符的集合，为了操作方便，C标准库中提供了一些str系列的库函数， 但是这些库函数与…
阅读更多...
SpringBoot项目发送邮件

SpringBoot项目发送邮件

📑前言 本文主要是【SpringBoot】——SpringBoot项目发送邮件的文章，如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介：大家好，我是听风与他🥇 ☁️博客首页：CSDN主页听风与他 &#x1f3…
阅读更多...
【研究中】sql server权限用户设置23.11.26

【研究中】sql server权限用户设置23.11.26

--更新时间2023.11.26 21：30 负责人：jerrysuse DBAliCMSIF EXISTS (select * from sysobjects where namehkcms_user)--判断是否存在此表DROP TABLE hkcms_user CREATE TABLE hkcms_user (id int primary key identity(1, 1),username char(32) NOT N…
阅读更多...
半同步复制与MHA高可用架构设计

半同步复制与MHA高可用架构设计

各位道友好，鼠鼠我呀校招刚通过了移动的面试 ，但是安排的岗位是偏远县城里面的岗位，各位能给给建议吗？鼠鼠我啊真不想有时候变成销售员去卖产品！！！ 半同步复制与MHA高可用架构设计 一、半同步复…
阅读更多...
故障排查：rpm安装报错事务锁定（can‘t create transaction lock on /var/lib/rpm/.rpm.lock）

故障排查：rpm安装报错事务锁定（can‘t create transaction lock on /var/lib/rpm/.rpm.lock）

博客主页：https://tomcat.blog.csdn.net 博主昵称：农民工老王 主要领域：Java、Linux、K8S 期待大家的关注💖点赞👍收藏⭐留言💬 目录 故障详情故障原因解决办法 故障详情 自己编写spec文件，制…
阅读更多...
解密Kafka主题的分区策略：提升实时数据处理的关键

解密Kafka主题的分区策略：提升实时数据处理的关键

目录 一、Kafka主题的分区策略概述1.1 什么是Kafka主题的分区策略？1.2 为什么分区策略重要？ 二、Kafka默认分区策略2.1 Round-Robin分区策略 三、自定义分区策略3.1 编写自定义分区器3.2 最佳实践：如何选择分区策略 四、分区策略的性能考量4.…
阅读更多...
基于SSM健身房管理系统设计与实现

基于SSM健身房管理系统设计与实现

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本健身房管理系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息&…
阅读更多...
C#文件基本操作（判断文件是否存在、创建文件、复制或移动文件、删除文件以及获取文件基本信息）

C#文件基本操作（判断文件是否存在、创建文件、复制或移动文件、删除文件以及获取文件基本信息）

目录 一、判断文件是否存在 1.File类的Exists()方法 2.FileInfo类的Exists属性 二、创建文件 1.File类的Create()方法 2.FileInfo类的Create()方法 三、复制或移动文件 1.File类的Copy()方法 2.File类的Move()方法 3.FileInfo类的CopyTo()方法 四、删除文件 1.File…
阅读更多...
Linux：创建进程 -- fork，到底是什么？

Linux：创建进程 -- fork，到底是什么？

相信大家在初学进程时，对fork函数创建进程一定会有很多的困惑，比如： 1.fork做了什么事情?? 2.为什么fork函数会有两个返回值?3.为什么fork的两个返回值，会给父进程谅回子进程pid，给子进程返回0?4.fork之后:父子进…
阅读更多...
新手村之SQL——分组与子查询

新手村之SQL——分组与子查询

1.GROUP BY GROUP BY 函数就是 SQL 中用来实现分组的函数，其用于结合聚合函数，能根据给定数据列的每个成员对查询结果进行分组统计，最终得到一个分组汇总表。 mysql> SELECT country, COUNT(country) AS teacher_count-> FROM teacher…
阅读更多...
【古月居《ros入门21讲》学习笔记】10_话题消息的定义与使用

【古月居《ros入门21讲》学习笔记】10_话题消息的定义与使用

目录 说明： 1. 话题模型 2. 实现过程（C） 自定义话题消息 Person.msg文件内容 Person.msg文件内容说明 编译配置 在package.xml文件中添加功能包依赖 在CMakeLists.txt中添加编译选项 编译生成语言相关文件 创建发布者代码&#xff…
阅读更多...
关于最近Facebook的未经用户同意收集使用个人信息,

关于最近Facebook的未经用户同意收集使用个人信息,

最近收到深圳市通信管理局的违法违规APP处置通知大概如下: 并且详细列举了 facebook sdk 在未经用户允许前调用的 TelephonyManager.getNetworkOperatorName(); 方法,获取运营商名称. 解决方法, 首先 在用户没有点击允许隐私条款前 不要调用任何Facebook sdk 方法,比如: Fac…
阅读更多...
智慧科研助力科研数据的分析处理

智慧科研助力科研数据的分析处理

如今，科研领域的发展日新月异，数据量也越来越大。这时，智慧科研可视化技术不仅为科研人员提供了快速高效的数据分析手段，而且为科研工作的推进提供了新的思路和方法。通过可视化手段，我们可以将各种数据、信息、知识以…
阅读更多...
助力企业实现更简单的数据库管理，ATOMDB 与 TDengine 完成兼容性互认

助力企业实现更简单的数据库管理，ATOMDB 与 TDengine 完成兼容性互认

为加速数字化转型进程，当下越来越多的企业开始进行新一轮数据架构改造升级。在此过程中，全平台数据库管理客户端提供了一个集中管理和操作数据库的工具，提高了数据库管理的效率和便利性，减少了人工操作的复杂性和错误率&#xff0…
阅读更多...
带大家做一个，易上手的家常土豆片

带大家做一个，易上手的家常土豆片

还是先从冰箱里那一块猪瘦肉 搞一点蒜和生姜 切成小块 装进一个碗里 这里一点就够了 一条绿皮辣椒 切片 三个左右干辣椒 随便切两刀 让它小一点就好了 一起装一个碗 一大一小两个土豆切片 猪肉切片 起锅烧油 然后 下肉翻炒 等肉变颜色捞出来 然后放入土豆 和小半碗水 让…
阅读更多...
【漏洞复现】万户协同办公平台ezoffice SendFileCheckTemplateEdit.jsp接口存在SQL注入漏洞 附POC

【漏洞复现】万户协同办公平台ezoffice SendFileCheckTemplateEdit.jsp接口存在SQL注入漏洞 附POC

漏洞描述 万户ezOFFICE协同管理平台是一个综合信息基础应用平台。 万户协同办公平台ezoffice SendFileCheckTemplateEdit.jsp接口存在SQL注入漏洞。 免责声明 技术文章仅供参考，任何个人和组织使用网络应当遵守宪法法律，遵守公共秩序，尊重社会公德，不得利用网络从事危害…
阅读更多...
HTML-标签之文字排版、图片、链接、音视频

HTML-标签之文字排版、图片、链接、音视频

1、标签语法 HTML超文本标记语言——HyperText Markup Language 超文本是链接标记也叫标签，带尖括号的文本 2、HTML基本骨架 HTML基本骨架是网页模板 html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody…
阅读更多...
抖音本地生活服务商申请入口门槛过高，该怎么办？

抖音本地生活服务商申请入口门槛过高，该怎么办？

近年来，短视频平台的举起让直播带货和本地生活服务行业逐渐兴起，并且以其便捷、高效的特点受到了广大用户的欢迎。很多创业者也加入了本地生活服务商的行列中，但有消息传出，抖音本地生活服务商申请入口可能会关闭，由于…
阅读更多...
从0到字节跳动30W年薪，我在测试行业“混”的第5个年头····

从0到字节跳动30W年薪，我在测试行业“混”的第5个年头····

一些碎碎念 什么都做了，和什么都没做其实是一样的，走出“瞎忙活”的安乐窝，才是避开弯路的最佳路径。希望我的经历能帮助到有需要的朋友。 在测试行业已经混了5个年头了，以前经常听到开发对我说，天天的点点点有意思没…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023