一些好用的前端小插件(转自知乎)

一些好用的前端小插件(2)

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-ui 组件,整体样式协调美观
有许多开箱即用的 extension(编辑器扩展)
支持 markdown 语法
支持TypeScript 支持
支持 i18n(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he)
可用的 events: init, transaction, focus, blur, paste, drop, update
高度自定义, 你可以自定义 extension 和它对应的菜单按钮视图
操作灵活,可以通过直接控制编辑器的行为来定制编辑器。
提供中文文档

地址 https://github.com/Leecason/element-tiptap

5. TypeIt

TypeIt是一个通用的JavaScript打字机效果实现程序。凭借其简单而灵活的配置,您可以键入单个或多个字符串,这些字符串可以中断行,删除/替换彼此,轻松处理包含HTML的字符串,循环等等。而且为了获得更高级、更可控的打字效果,TypeIt附带了一些配套功能,这些功能可以链接起来将您的打字控制在单个字符或毫秒,使您能够键入动态叙述,完全控制速度变化、换行、删除和暂停。

动图

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

6. qrcode 二维码

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

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

7. jsbarcode

jsbarcode是一个用于生成条形码的js库

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

8. Clipboard.js

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

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

9. Driver.js

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

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

10. Pinia.js

Pinia.jsVue.js团队成员所开发的,是新一代的Vuex,即Vuex5.x,在Vue3.0 项目的使用中备受推崇。

Pinia.js 定位和特点:

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

11. Vue-CoreVideoPlayer

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

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

原文:一些好用的前端小插件(2) - 知乎 

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

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

相关文章

2024年度投资策略:AI大模型和半导体国产化加速

今天分享的是AI系列深度研究报告:《2024年度投资策略:AI大模型和半导体国产化加速》。 (报告出品方:东方证券) 报告共计:48页 前言: 行情回顾与未来展望 电子板块涨幅转正,信心逐渐回归。截至…

git的使用记录

GitHub是公有的远程仓库,Gitlab是私有的远程仓库。 git add file git commit -m "add file" git mv filea fileb git log 显示提交记录 git log --oneline 一行的简略信息显示 git log --oneline --decorate 显示当前指针 git reset --ha…

矩阵知识补充

正交矩阵 定义: 正交矩阵是一种满足 A T A E A^{T}AE ATAE的方阵 正交矩阵具有以下几个重要性质: A的逆等于A的转置,即 A − 1 A T A^{-1}A^{T} A−1AT**A的行列式的绝对值等于1,即 ∣ d e t ( A ) ∣ 1 |det(A)|1 ∣det(A)∣…

Vim 一下日志文件,Java 进程没了?

一次端口告警,发现 java 进程被异常杀掉,而根因竟然是因为在问题机器上 vim 查看了 nginx 日志。下面我将从时间维度详细回顾这次排查,希望读者在遇到相似问题时有些许启发。 时间线 15:19 收到端口异常 odin 告警。 状态:P1故障 名称:应用端…

黑马点评笔记 redis实现优惠卷秒杀

文章目录 难题全局唯一IDRedis实现全局唯一Id 超卖问题问题解决方案乐观锁问题 一人一单 难题 要解决优惠卷秒杀的问题我们要考虑到三个个问题,全局唯一ID,超卖问题,一人一单。 全局唯一ID 用户抢购时,就会生成订单并保存到同一…

【git】pip install git+https://github.com/xxx/xxx替换成本地下载编译安装解决网络超时问题

目录 🌑🌑 背景 🌒 🌒作用 🌔🌔 问题 🌔🌔解决方案 🌙方法一 🌙方法二 🌝🌝我的解决方案 整理不易,欢迎一键三连…

分布式篇---第三篇

系列文章目录 文章目录 系列文章目录前言一、什么是补偿事务?二、消息队列是怎么实现的?三、那你说说Sagas事务模型前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。…

qgis添加postgis数据

左侧浏览器-PostGIS-右键-新建连接 展开-双击即可呈现 可以点击编辑按钮对矢量数据编辑后是直接入库的,因此谨慎使用。

企业数字化转型的作用是什么?_光点科技

在当今快速变化的商业环境中,数字化转型已成为企业发展的重要策略。企业数字化转型指的是利用数字技术改造传统业务模式和管理方式,以提升效率、增强竞争力和创造新的增长机会。 提升运营效率:数字化转型通过引入自动化工具和智能系统&#x…

NX二次开发UF_CSYS_ask_wcs 函数介绍

文章作者:里海 来源网站:https://blog.csdn.net/WangPaiFeiXingYuan UF_CSYS_ask_wcs Defined in: uf_csys.h int UF_CSYS_ask_wcs(tag_t * wcs_id ) overview 概述 Gets the object identifier of the coordinate system to which the work coordin…

JMeter压测常见面试问题

1、JMeter可以模拟哪些类型的负载? JMeter可以模拟各种类型的负载,包括但不限于Web应用程序、API、数据库、FTP、SMTP、JMS、SOAP / RESTful Web服务等。这使得JMeter成为一个功能强大且灵活的压力测试工具。 2、如何配置JMeter来进行分布式压力测试&a…

在华为昇腾开发板安装gdal-python

作者:朱金灿 来源:clever101的专栏 为什么大多数人学不会人工智能编程?>>> 在华为昇腾开发板安装gdal-python分为两步:编译gdal库和下载gdal对应的python包。 1.编译gdal库 首先下载gdal库,。在linux(arm架构)上编译的gdal库及其第三方库源码,内含一个编译…

智慧法院 | RPA+AI打造智慧执行助手,解决“案多人少”现实难题

为深化政法智能化建设,加强“智慧治理”“智慧法院”“智慧检务”“智慧警务”“智慧司法”等信息平台建设,深入实施大数据战略,实现科技创新成果同政法工作深度融合。法制日报社于今年3月继续举办了2023政法智能化建设创新案例及论文征集宣传…

Unity UGUI的HorizontalLayoutGroup(水平布局)组件

Horizontal Layout Group | Unity UI | 1.0.0 1. 什么是HorizontalLayoutGroup组件? HorizontalLayoutGroup是Unity UGUI中的一种布局组件,用于在水平方向上对子物体进行排列和布局。它可以根据一定的规则自动调整子物体的位置和大小,使它…

Navicat 技术指引 | GaussDB服务器对象的创建/设计(编辑)

Navicat Premium(16.2.8 Windows版或以上) 已支持对GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能,还提供强大的高阶功能(如模型、结构同步、协同合作、数据迁移等),这…

Jenkins Ansible 参数构建

首先在Jenkins中创建自由项目 在web端配置完成后在另一台机子上下载nginx 在gitlab端创建项目并创建文件配置代码 在有Jenkins的机器上下载Ansible [rootslave1 ~]# yum -y install epel-release [rootslave1 ~]# yum -y install ansible再进入下载nginx机器中克隆gitlab项目…

卷积神经网络(AlexNet)鸟类识别

文章目录 一、前言二、前期工作1. 设置GPU(如果使用的是CPU可以忽略这步)2. 导入数据3. 查看数据 二、数据预处理1. 加载数据2. 可视化数据3. 再次检查数据4. 配置数据集 三、AlexNet (8层)介绍四、构建AlexNet (8层)网络模型五、…

居家适老化设计第二十九条---卫生间之花洒

无电源 灯光显示 无障碍扶手型花洒 以上产品图片均来源于淘宝 侵权联系删除 居家适老化卫生间的花洒通常具有以下特点和功能:1. 高度可调节:适老化卫生间花洒可通过调节高度,满足不同身高的老年人使用需求,避免弯腰或过高伸展造…

【开源】基于Vue.js的固始鹅块销售系统

项目编号: S 060 ,文末获取源码。 \color{red}{项目编号:S060,文末获取源码。} 项目编号:S060,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固…

qgis添加xyz栅格瓦片

方式1:手动一个个添加 左侧浏览器-XYZ Tiles-右键-新建连接 例如添加高德瓦片地址 https://wprd01.is.autonavi.com/appmaptile?langzh_cn&size1&style7&x{x}&y{y}&z{z} 双击即可呈现 收集到的一些图源,仅供参考,其中一…