一些好用的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/

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

php请求okx接口获取比特币价格数据、k线数据

php请求okx接口获取比特币价格数据 环境配置请求头、签名设置签名配置代理 全部代码 环境 我本地用的是thinkphp框架和guzzle 安装guzzle composer require guzzlehttp/guzzle 配置请求头、签名 我们需要准备api_key,secret_key,passphrase api_key…

docker (镜像分层、阿里云镜像推送/拉去)-day02

一、镜像概念 Docker 镜像是 Docker 容器的基础,它提供了一种可重复使用的、跨平台的部署方式,使得应用程序的部署和运行变得简单和高效。 把应用程序和配置依赖打包好形成一个可交付的运行环境(包括代码、运行时需要的库、环境变量和配置文件等),打包好…

ethtool工具添加并验证网口

Filesystem Packages->console->network->ethtool 命令描述: ethtool 是用于查询及设置网卡参数的命令。 使用命令: ethtool ethx //查询ethx网口基本设置,其中 x 是对应网卡的编号,如eth0、eth1等等 ethtool –…

利用 LD_PRELOAD劫持动态链接库,绕过 disable_function

目录 LD_PRELOAD 简介 程序的链接 动态链接库的搜索路径搜索的先后顺序: 利用LD_PRELOAD 简单的劫持 执行id命令 反弹shell 引申至 PHP 绕过disable_function 方法1:使用蚁剑的扩展工具绕过disable_function 方法2:利用 mail 函数…

推荐几款免费的智能AI伪原创工具

在当今信息快速传播的时代,创作者们常常为了在激烈的竞争中脱颖而出而苦苦挣扎,而其中的一项挑战就是创作出独具创意和独特性的内容。然而,时间有限的现实让很多人望而却步。在这个背景下,免费在线伪原创工具成为了创作者们的得力…

Windows核心编程 HOOK

目录 HOOK概述 HOOK API SetWindowsHookExA 函数(winuser.h) UnhookWindowsHookEx 函数(winuser.h) NextHookEx 函数(winuser.h) 局部钩子 全局钩子 为什么全局钩子需要用dll作为过程函数? HOOK概述 本质:Windows消系统的消息过滤器。 全局钩子…

还在愁没项目?来瞧瞧这些另类赚钱方式

客套话不多说,直接上案例,这些都是正儿八经的真实案例,相信大家通过这些人的案例自然能摸索整理出一套属于自己的项目!摸索不出,也多多少少能受一些灵感上的启发。 小A是长期混B站的,大家称他为“B站搬运工…

直流负载与交流负载的作用

直流负载和交流负载都是用来消耗电能的装置或设备,它们的作用是将电能转化为其他形式的能量,以满足特定的需求。直流负载主要用于直流电路中,例如直流电源、电池等。它们可以将直流电能转化为热能、光能、机械能等。直流负载在很多领域都有广…

【BSP开发经验】uboot gpl框架开发经验

文章目录 uboot_gpl 隔离 的目的uboot_gpl 隔离基本原理uboot_gpl 基本框架uboot_gpl 适配新平台的方式uboot 添加hikcmd功能适配调试步骤 链接脚本语法链接脚本的格式链接脚本的简单示例设置入口点(entry)设置输出文件名处理目标文件格式的命令uboot_gp…

whatsapp信息群发脚本开发!

WhatsApp 作为全球广受欢迎的通讯应用,在我们的日常生活中扮演着重要角色,有时候,我们需要向大量联系人发送消息,比如营销推广、活动通知等。 一个个手动发送消息?那简直太落后了!今天,我们将探讨如何利用脚本开发实…

web:catcat-new(文件包含漏洞、flask_session伪造)

前提知识 /etc/passwd 该文件储存了该Linux系统中所有用户的一些基本信息,只有root权限才可以修改。其具体格式为 用户名:口令:用户标识号:组标识号:注释性描述:主目录:登录Shell(以冒号作为分隔符) /proc/self proc是一个伪文件系统…

项目终验的exce表格缩放,排版等经常使用

xxx个项目的验收资料 1.申请表等等很多信息 需求:放在一页内等办法 上述文档,在excel表格打印预览中都是在两页中,很难调节,这个时候采用wps专业版本即可。 wps排版经常使用的功能如下: 经常使用的是 1.把所有列打印…

Apache Doris 整合 FLINK CDC 、Paimon 构建实时湖仓一体的联邦查询入门

1.概览 多源数据目录(Multi-Catalog)功能,旨在能够更方便对接外部数据目录,以增强Doris的数据湖分析和联邦数据查询能力。 在之前的 Doris 版本中,用户数据只有两个层级:Database 和 Table。当我们需要连…

网络视频怎么更改IP?使用静态IP更改地址有哪些好处?

随着互联网的普及,越来越多的人开始使用网络视频。有时候,我们可能会遇到需要更改网络视频的IP地址的情况。那么,如何更改IP地址呢?使用静态IP更改地址又有哪些好处呢? 首先,我们来了解一下什么是静态IP地址…

外贸行业多人文件共享云盘推荐

Zoho WorkDrive外贸行业解决方案致力于为各类外贸企业客户提供数字化转型的支持,全面覆盖市场调研、客户服务与管理、产品设计与制作、采购、供应商管理、财务对账、单证报关、仓储管理以及物流运输等环节。Zoho WorkDrive企业网盘提供文件资料在线存储、共享、同步…

C/C++转义符:\x

文章目录 什么是转义符使用"\x"定义char数组宏定义中的\ 什么是转义符 在C语言中,转义符用于将一些特殊字符表示为单个字符,常用的转义符有: \\:反斜杠符号\:单引号\":双引号\a&#xff1…

动态规划--使用最小花费爬楼梯

题目描述 给你一个整数数组 cost ,其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用,即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 示例…

如何有效避免七个常见的身份验证漏洞

引言 随着网络威胁的数量不断增加,了解学习可能会危及到客户在线身份的常见身份验证漏洞就显得格外重要。如果需要在网上满足客户的需求,并使用传统的身份验证机制时,就要对身份验证漏洞保持警惕。 只有了解了这些漏洞,才可以更…

vue3随机生成8位字母+数字

// 随机生成8位字母数字 export const autoPassword: any () > {// console.log("自动生成");//可获取的字符串const chars ABCDEFGHIJKLMNOPQRSTUVWSYZabcdefghijklmnopqrstuvwsyz0123456789;const list [];//通过随机获取八个字符串的索引下标for (let i 0;…

谁可以从使用 Amazon Lightsail 进行 VPS 托管中受益?

文章作者:Libai 介绍 在当今数字化的环境中,拥有可靠和高效的托管解决方案对于企业和个人来说至关重要。由于其灵活性、可扩展性和成本效益,虚拟专用服务器(VPS)托管已经在市场上获得了巨大的流行。Amazon Lightsail …