一些好用的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(enzhplrudekoeszh_twfrpt_brnlhe). 欢迎贡献更多的语言
  • 🎈 可用的 eventscreatetransactionfocusblurdestroy
  • 🍀 高度自定义, 你可以自定义 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.jsVue.js团队成员所开发的,是新一代的Vuex,即Vuex5.x,Pinia 可与 Vue 2 和 Vue 3 配合使用。在Vue3.0 项目的使用中备受推崇。

Pinia.js 定位和特点:

  • 完整的 typescript 的支持;
  • 极其轻量,压缩后的体积只有1.6kb;
  • 去除 mutations,只有 stategettersactions
  • actions 支持同步和异步;
  • 没有模块嵌套,只有 store 的概念,能够构建多个 storestore 之间可以自由使用,更好的代码分割;
  • 关联 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

文章目录 一、简单了解什么是 CSS二、CSS 选择器1.标签选择器2.类选择器3.ID 选择器4.后代选择器5.子选择器6.伪类选择器 三、字体属性1.设置字体家族2.设置字体大小3.设置字体粗细4.文字倾斜 四、文本属性1.文本对齐2.文本装饰3.文本缩进4.背景设置 五、圆角矩形六、CSS 盒子模…

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

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

【JavaFX漏扫开发基础】screen类的使用

文章目录 一、screen获取屏幕信息二、查看当前屏幕的分辨率DPI三、scene类和两个小知识一个图形化的结构让界面打开一个网页改变鼠标的图案一、screen获取屏幕信息 package javafx.test;import javafx.application.Application; import

SpringBoot项目发送邮件

📑前言 本文主要是【SpringBoot】——SpringBoot项目发送邮件的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 &#x1f3…

【研究中】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高可用架构设计 一、半同步复…

Set.toArray(new String[size]) 和 Set.toArray(new String[0]) 区别

Set.toArray(new String[size]) 和 Set.toArray(new String[0]) 区别 在Java中,Set.toArray(T[] array) 方法用于将集合(Set)中的元素转换为数组。两种常见的用法是: Set.toArray(new String[size]) Set.toArray(new String[0])…

记录一次docker搭建tomcat容器的网页不能访问的问题

tomcat Tomcat是Apache软件基金会的Jakarta项目中的一个重要子项目,是一个Web服务器,也是Java应用服务器,是开源免费的软件。它是一个兼容Java Servlet和JavaServer Pages(JSP)的Web服务器,可以作为独立的W…

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

博客主页:https://tomcat.blog.csdn.net 博主昵称:农民工老王 主要领域:Java、Linux、K8S 期待大家的关注💖点赞👍收藏⭐留言💬 目录 故障详情故障原因解决办法 故障详情 自己编写spec文件,制…

Redis链表使用

Redis是优秀的非关系型数据库&#xff0c;源码中的链表是很经典&#xff0c;将其提取使用 /* adlist.c - A generic doubly linked list implementation** Copyright (c) 2006-2010, Salvatore Sanfilippo <antirez at gmail dot com>* All rights reserved.** Redistri…

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

目录 一、Kafka主题的分区策略概述1.1 什么是Kafka主题的分区策略&#xff1f;1.2 为什么分区策略重要&#xff1f; 二、Kafka默认分区策略2.1 Round-Robin分区策略 三、自定义分区策略3.1 编写自定义分区器3.2 最佳实践&#xff1a;如何选择分区策略 四、分区策略的性能考量4.…

【开题报告】OFDM雷达捷变波形信号处理方法研究与仿真

选 题 的 目 的 和 意 义 随着现代科技的不断发展&#xff0c;汽车在人们生活中的比重越来越大&#xff0c;人们对汽车安全的要求越来越高。据统计&#xff0c;我国每年有近万人死于交通事故&#xff0c;汽车在行驶过程中容易出现车速过快、方向失控、侧滑等问题&#xff0c;随…

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

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本健身房管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&…

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,到底是什么?

相信大家在初学进程时&#xff0c;对fork函数创建进程一定会有很多的困惑&#xff0c;比如&#xff1a; 1.fork做了什么事情?? 2.为什么fork函数会有两个返回值?3.为什么fork的两个返回值&#xff0c;会给父进程谅回子进程pid&#xff0c;给子进程返回0?4.fork之后:父子进…

Webpack ECMAScript 模块

文章目录 前言标题一导出导入将模块标记为 ESM 后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;webpack &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&a…

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

1.GROUP BY GROUP BY 函数就是 SQL 中用来实现分组的函数&#xff0c;其用于结合聚合函数&#xff0c;能根据给定数据列的每个成员对查询结果进行分组统计&#xff0c;最终得到一个分组汇总表。 mysql> SELECT country, COUNT(country) AS teacher_count-> FROM teacher…

面试官:说一下ArrayList和LinkedList有什么区别 我:。。。。面试: 对了但是没全对

这是一个面试向的文章&#xff0c;主要描述我在面试某公司的一面的一个过程&#xff0c;印象深刻&#xff0c;故而写下这篇文章 面试官&#xff1a;说一下ArrayList和LinkedList有什么区别 我&#xff08;心里&#xff09;&#xff1a;简单&#xff0c;学过数据结构的都知道有…

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

目录 说明&#xff1a; 1. 话题模型 2. 实现过程&#xff08;C&#xff09; 自定义话题消息 Person.msg文件内容 Person.msg文件内容说明 编译配置 在package.xml文件中添加功能包依赖 在CMakeLists.txt中添加编译选项 编译生成语言相关文件 创建发布者代码&#xff…

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

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