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

一些好用的前端小插件(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) - 知乎 

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

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

相关文章

点击按钮,按钮的文字变为倒计时,的小技巧(适用于获取验证码)

看效果图&#xff1a; 代码 <a-buttonclick"getSms":disabled"myState.smsSendFlag"v-text"(!myState.smsSendFlag && 获取验证码) || ${myState.time} s" ></a-button>data(){return {myState: {smsSendFlag: false,tim…

【【Linux 常用命令学习 之 一 】】

Linux 常用命令学习 之 一 打开终端之后的 我们会了解 所使用的 字符串含义 其中前面的 zhuxushuai 是 当前的用户名字 接下来的 zhuxushuai-virtual-machine 是 机器名字 最后的符号 $表示 当前是普通用户 输入指令 ls 是打印出当前所在目录中所有文件和文件夹 shell 操…

BUUCTF [WUSTCTF2020]find_me 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 得到的 flag 请包上 flag{} 提交。 感谢 Iven Huang 师傅供题。 比赛平台&#xff1a;https://ctfgame.w-ais.cn/ 密文&#xff1a; 下载附件&#xff0c;得到一个.jpg图片。 解题思路&#xff1a; 1、得到一张图…

vue3-组件传参及计算属性

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue3-组件传参及计算属性 目录 vue3中的组件传参 1、父传子 2、子传父 toRef 与 toRefs vue3中…

【LeetCode刷题笔记】DFSBFS(三)

图的基础知识 邻接矩阵是一个二维表,其中横纵坐标交叉的格子值为 1 的表示这两个顶点是连通的,否则是不连通的。

反爬虫机制与反爬虫技术(二)

反爬虫机制与反爬虫技术二 1、动态页面处理与验证码识别概述2、反爬虫案例:页面登录与滑块验证码处理2.1、用例简介2.2、库(模块)简介2.3、网页分析2.4、Selenium准备操作2.5、页面登录2.6、模糊移动滑块测试3、滑块验证码处理:精确移动滑块3.1、精确移动滑块的原理3.2、滑…

NX二次开发UF_CSYS_ask_wcs 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;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…

Matlab三角剖分插值问题分析

目录 前言 一、问题引入 二、一个例子 1.生成散点图 2.对数据进行剖分 3.点法式分析 三、最后结果 前言 上一篇文章感觉对三角剖分问题没有说清楚&#xff0c;这次专门对三角剖分问题再仔细说说。 一、问题引入 实际上这个问题是用来解决二维曲面插值问题的。 二维插值问题&…

python tkinter使用(五)

python tkinter使用(五) 本篇文章讲述tkinter 中treeview的使用 Treeview是一个多列列表框&#xff0c;可以显示层次数据。 #!/usr/bin/python3 # -*- coding: UTF-8 -*- """Author: zhTime 2023/11/23 下午8:28 .Email:Describe: treeview 使用 "&quo…

YB4051系列设备是高度集成的 Li-lon 和 Li-Pol 线性充电器,针对便携式应用的小容量电池。

YB4051H 300mA 单电池锂离子电池充电器0.1 mA 终端&#xff0c;45nA 电池漏电流 概述&#xff1a; YB4051系列设备是高度集成的 Li-lon 和 Li-Pol 线性充电器&#xff0c;针对便携式应用的小容量电池。它是一个完整的恒流/恒压线性充电器。不需要外部感应电阻&#xff0c;由于…

〖大前端 - 基础入门三大核心之JS篇㊷〗- DOM事件对象及它的属性

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

vulnhub6

靶机地址&#xff1a;https://download.vulnhub.com/evilbox/EvilBox---One.ova 准备工作 可以先安装 kali 的字典: sudo apt install seclists ​ 或者直接输入 seclists​&#xff0c;系统会问你是否安装&#xff0c;输入 y 即可自动安装 733 x 3751414 x 723 ​ 默认路…

opencv 常用操作指南

1.通道交换 读取图像&#xff0c;然后将RGB通道替换成BGR通道&#xff0c;需要注意的是&#xff0c;opencv读取的图像默认是BGR。cv2.cvtColor函数可以参考Color Space Conversions img cv2.imread(imori.jpg) img cv2.cvtColor(img, cv2.COLOR_BGR2RGB) cv2.imwrite(answe…

HarmonyOS(五)—— 认识页面和自定义组件生命周期

前言 在前面我们通过如何创建自定义组件一文知道了如何如何自定义组件以及自定义组件的相关注意事项&#xff0c;接下来我们认识一下页面和自定义组件生命周期。 自定义组件和页面的关系 在开始之前&#xff0c;我们先明确自定义组件和页面的关系 自定义组件&#xff1a;Co…

聚观早报 |一加12正式开启预订;OPPO Reno11系列卖点

【聚观365】11月24日消息 一加12正式开启预订 OPPO Reno11系列卖点 小鹏第三季度营收财报 Claude 2.1 聊天机器人公布 现代汽车将与伦敦大学学院合作 一加12正式开启预订 全新的一加12系列公开亮相已有一段时间&#xff0c;不久前一加官方宣布&#xff0c;该机将于12月4日…

(1)(1.19) TeraRanger One/EVO测距仪

文章目录 前言 1 通过I2C与TeraRanger EVO连接 2 Mission Planner中的设置 3 测试传感器 4 参数说明 前言 TeraBee EVO 系列测距仪是基于红外飞行时间 (TOF) 技术的轻型距离测量传感器。与基于激光的激光雷达相比&#xff0c;它们的速度比超声波快得多&#xff0c;体积更…

Microsoft Office 2019下载工具

今天博主继续推出重磅福利——Microsoft Office合集的安装工具。 Microsoft Office是一套由微软公司开发的办公软件&#xff0c;它为 Microsoft Windows 和 Mac OS X而开发。与办公室应用程序一样&#xff0c;它包括联合的服务器和基于互联网的服务。最近版本的 Office 被称为 …

Linux实验三:shell程序设计: shell基础

实验目的: 进一步巩固shell程序设计语言基本语法&#xff0c;加深对所学知识理解。 实验要求 1. 四种变量的使用 2. 配置环境变量 3. 元字符和正则表达式 4. 引号 1. 本地变量 $ var1"hello Linux" //定义本地变量var1 $ read var2 //定义本地变量vae…

React基础入门

文章目录 创建项目组件和事件更新状态导出组件jsx react是目前最流行的前端框架&#xff0c;几乎也不同太介绍了。 创建项目 首先下载node.js&#xff0c;安装成功后&#xff0c;最好换成国内的源 npm config set registry https://registry.npm.taobao.org然后就可以使用脚…

Ubuntu20.04清理垃圾vscode缓存

使用VM虚拟机安装了Ubuntu系统&#xff0c;主目录空间越来越小&#xff0c;硬盘扩容之后很快又空间不足&#xff0c;甚至出现了开机卡黑屏的情况&#xff0c;这里记录一下解决过程。 1 重新开机进入系统 状态&#xff1a;卡到了开机黑屏状态&#xff0c;左上角有一条小横杠 原…