一些好用的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.rhkb.cn/news/204736.html

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

相关文章

【Python深度学习第二版】学习笔记之——什么是深度学习

【Python深度学习第二版】学习笔记之——什么是深度学习

机器学习是将输入（比如图像）映射到目标（比如标签“猫”）的过程。 这一过程是通过观察许多输入和目标的示例来完成的。 深度神经网络通过一系列简单的数据变换（层）来实现这种输入到目标的映射，这…
阅读更多...
C++ day42背包理论基础01 + 滚动数组

C++ day42背包理论基础01 + 滚动数组

背包问题的重中之重是01背包 01背包 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]，得到的价值是value[i] 。每件物品只能用一次，求解将哪些物品装入背包里物品价值总和最大。 每一件物品其实只有两个状态，取或者不…
阅读更多...
抖音视频如何无水印下载，怎么批量保存主页所有视频没水印？

抖音视频如何无水印下载，怎么批量保存主页所有视频没水印？

现在最火的短视频平台莫过于抖音，当我们刷到一个视频想下载下来怎么办？我们知道可以通过保存到相册的方式下载，但用这种方法下载的视频带有水印，而且有些视频不能保存到相册（这是视频作者设置了禁止下载）。…
阅读更多...
Breadcrumb面包屑（antd-design组件库）简单用法和自定义分隔符

Breadcrumb面包屑（antd-design组件库）简单用法和自定义分隔符

1.Breadcrumb面包屑 显示当前页面在系统层级结构中的位置，并能向上返回。 2.何时使用 当系统拥有超过两级以上的层级结构时； 当需要告知用户『你在哪里』时； 当需要向上导航的功能时。 组件代码来自： 面包屑 Breadcrumb - Ant Des…
阅读更多...
【代码随想录】算法训练计划35

【代码随想录】算法训练计划35

贪心 1、860. 柠檬水找零 题目： 输入：bills [5,5,5,10,20] 输出：true 思路： 模拟大法 func lemonadeChange(bills []int) bool {//贪心，代码一刷， 感觉要用到hashmap，也不用five, ten : 0…
阅读更多...
开源语音大语言模型来了！阿里基于Qwen-Chat提出Qwen-Audio!

开源语音大语言模型来了！阿里基于Qwen-Chat提出Qwen-Audio!

论文链接：https://arxiv.org/pdf/2311.07919.pdf 开源代码：https://github.com/QwenLM/Qwen-Audio 引言 大型语言模型（LLMs）由于其良好的知识保留能力、复杂的推理和解决问题能力，在通用人工智能（AGI&am…
阅读更多...
Unity SRP 管线【第三讲：URP 光照】

Unity SRP 管线【第三讲：URP 光照】

3.2.3 以前属于Shader部分，Shader部分不进行讲解。 这里只涉及Unity内部管线的设置问题。 文章目录 3.2.3 向GPU发送灯光数据设置光源数据设置主光源设置额外点光源 Shader中的数据 3.2.3 向GPU发送灯光数据 在UniversalRenderPipeline.cs > RenderSingleCamera…
阅读更多...
WPF中DataGrid解析

WPF中DataGrid解析

效果如图&#xff1a; 代码如下&#xff1a; <DataGrid Grid.Row"1" x:Name"dataGrid" ItemsSource"{Binding DataList}" AutoGenerateColumns"False"SelectedItem"{Binding SelectedItem,UpdateSourceTriggerPropertyChange…
阅读更多...
网络安全小白自学

网络安全小白自学

一、网络安全应该怎么学&#xff1f; 1.计算机基础需要过关 这一步跟网安关系暂时不大&#xff0c;是进入it行业每个人都必须掌握的基础能力。 计算机网络计算机操作系统算法与数据架构数据库 Tips:不用非要钻研至非常精通&#xff0c;可以与学习其他课程同步进行。 2.渗透技…
阅读更多...
【UE】绘制抛物线并投射物体

【UE】绘制抛物线并投射物体

效果 步骤 1. 先新建父类为Actor的蓝图&#xff0c;这里命名为“BP_发射物” 打开“BP_发射物”&#xff0c;添加一个球形的静态网格体和一个发射物移动组件 2. 新建一个父类为角色的蓝图&#xff0c;这里命名为“BP_绘制抛物线” 打开“BP_绘制抛物线” 我们希望可以通过控制…
阅读更多...
芯片技术前沿：了解构现代集成电路的设计与制造

芯片技术前沿：了解构现代集成电路的设计与制造

芯片技术前沿&#xff1a;解构现代集成电路的设计与制造 摘要&#xff1a;本文将深入探讨芯片技术的最新进展&#xff0c;重点关注集成电路的设计与制造。我们将带领读者了解芯片设计的基本流程&#xff0c;包括电路分析、版图设计和验证等步骤&#xff0c;并介绍当前主流的制…
阅读更多...
LeetCode Hot100 236.二叉树的最近公共祖先

LeetCode Hot100 236.二叉树的最近公共祖先

题目&#xff1a; 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节…
阅读更多...
每日一练2023.11.28———N个数求和【PTA】

每日一练2023.11.28———N个数求和【PTA】

题目链接&#xff1a; L1-009 N个数求和 题目要求&#xff1a; 本题的要求很简单&#xff0c;就是求N个数字的和。麻烦的是&#xff0c;这些数字是以有理数分子/分母的形式给出的&#xff0c;你输出的和也必须是有理数的形式。 输入格式&#xff1a; 输入第一行给出一个正整…
阅读更多...
与中通支付对接

与中通支付对接

最近项目接入商户&#xff0c;商户需要同步给中通支付&#xff0c;报错两个异常已解决。 一、json报错 未接入中通SKD之前&#xff0c;不会报错&#xff0c;接入后&#xff0c;json转换异常。 排查后发现&#xff0c;中通的jar包里JSON版本太低&#xff0c;与自身项目的版本冲…
阅读更多...
docker 安装elasticsearch集群

docker 安装elasticsearch集群

准备工作 docker 安装好&#xff0c;docker compose 安装好编辑好docker-compose.yml文件&#xff08;本文会提供&#xff09;生成elastic-certificates.p12密钥&#xff0c;与docker-compose文件在同一个目录&#xff08;本文会介绍生成方式&#xff09;准备elasticsearch配置…
阅读更多...
虚拟机系列：vmware和Oracle VM VirtualBox虚拟机的区别，简述哪一个更适合我？以及相互转换

虚拟机系列：vmware和Oracle VM VirtualBox虚拟机的区别，简述哪一个更适合我？以及相互转换

一. VMware和Oracle VM VirtualBox虚拟机的区别主要体现在以下几个方面： 首先两种软件的安装使用教程如下： VMware ESXI 安装使用教程 Oracle VM VirtualBox安装使用教程 商业模式：VMware是一家商业公司，而Oracle VM VirtualBox是开源软件； 功能：VMware拥有更多的功能和…
阅读更多...
11.27二叉查找树，遍历二叉树，层序（判断是不是完全二叉树），根据遍历序列重构二叉树，递归输入建树（树的定义，结构体细节，typedef)

11.27二叉查找树，遍历二叉树，层序（判断是不是完全二叉树），根据遍历序列重构二叉树，递归输入建树（树的定义，结构体细节，typedef)

如果left<right&#xff0c;就表明其之间还有元素&#xff0c;即左右指针重合&#xff0c;区间只有一个元素也被包含其中&#xff1b; left<right,就表明递归过程中&#xff0c;只允许区间有两个及以上的元素&#xff0c;不允许区间只有一个元素&#xff0c;那么对应地&…
阅读更多...
万户协同办公平台ezoffice SendFileCheckTemplateEdit.jsp接口存在SQL注入漏洞 附POC

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

@[toc] 万户协同办公平台ezoffice SendFileCheckTemplateEdit.jsp接口存在SQL注入漏洞 附POC 免责声明：请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失，均由使用者本人负责，所产生的一切不良后果与文…
阅读更多...
如何拥有免费的docker镜像仓库

如何拥有免费的docker镜像仓库

shigen日更文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 hello&#xff0c;伙伴们&#xff0c;最近在研究devops的事情&#xff0c;发现了很有意思的东西。 就是我们所有…
阅读更多...
qgis添加arcgis的mapserver

qgis添加arcgis的mapserver

左侧浏览器-ArcGIS地图服务器-右键-新建连接 Folder: / 展开-双击图层即可
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023