首页 > 其他分享 >10个提高开发效率的Vue3常用插件(快来收藏)

10个提高开发效率的Vue3常用插件(快来收藏)

时间:2023-01-11 21:23:19浏览次数:66  
标签:10 插件 vue github Vue https Vue3 js

本篇文章给大家总结分享几个好用的 Vue 插件,可以帮助开发者提高开发效率、解决移动端各种滚动场景需求,希望对大家有所帮助!

1、vue-multiselect-next

Vue.js 的通用选择/多选/标记组件

项目和文档地址:https://vue-multiselect.js.org/

1.png

有关Vue 3的安装,请参阅Github中的自述文件以获取最新说明。(学习视频分享:vuejs教程

2、vue-print-nb

用于印刷、简单、快速、方便、轻便的指令包装器

Github地址:https://github.com/Power-kxLee/vue-print-nb

2.png

在线DEMO:https://power-kxlee.github.io/vue-print-nb/dist/index.html

3、vue-i18n-next(Vue3的国际化插件)

i18n是市面上比较成熟的国际化库,而vue-i18n是一个Vue.js国际化的插件,就是在vue应用中嵌入语言切换功能,可以切换已导入到项目中的各个语系。

vue-i18n-nex是Vue i18n 9用于Vue 3的插件库。

官方地址:https://vue-i18n.intlify.dev/

3.png

4、vue-cropper

简单的vue图片裁剪插件

项目地址:https://github.com/xyxiao001/vue-cropper

演示地址:http://github.xyxiao.cn/vue-cropper/example/

4.png

5、Vue Grid Layout

Vue.js 的网格布局系统

中文官网:https://jbaysolutions.github.io/vue-grid-layout/zh/

5.png

Vue Grid Layout是一个类似于Gridster的栅格布局系统,适用于Vue.js,灵感来源于React Grid Layout。

特性:

  • 可拖拽

  • 可调整大小

  • 静态部件(不可拖拽、调整大小)

  • 拖拽和调整大小时进行边界检查

  • 增减部件时避免重建栅格

  • 可序列化和还原的布局

  • 自动化 RTL 支持

  • 响应式

6、Vue Qrcode Reader

一个Vue.js组件,允许在不离开浏览器的情况下检测和解码二维码

官网:https://gruhn.github.io/vue-qrcode-reader/

6.png

Vue QRcode Reader是一组用于检测和解码QR(二维码)码的Vue.js组件。它使你无需离开浏览器即可检测和解码QR码,所有组件都具有响应能力。除此之外,它接近零样式,因此你可以使它们适合你的布局。使用方法简单明了。

7、Makeit Captcha

基于 Vue3 + Vite + Canvas 开发的滑块验证码,动态生成验证滑块,结合后端的二次校验,能有效的避免被抓取模拟验证。

滑块验证码组件常用于各种表单提交前的验证。

  • 官方地址:https://admin.makeit.vip/components/captcha

    Github:https://github.com/lirongtong/miitvip-captcha

    Npm:https://www.npmjs.com/package/makeit-captcha

7.png

8、vue3-clipboard

Vue 3 的 clipboard.js ,一个基于Vue 3的粘贴复制插件,不依赖于Flash或其他框架。

Github:https://github.com/soerenmartius/vue3-clipboard

9.png

8.png

9、vue.draggable

基于Sortable.js的Vue 3拖放组件

官方地址:https://sortablejs.github.io/vue.draggable.next/#/simple

github地址:https://github.com/SortableJS/Vue.Draggable

10.gif

特性

  • 支持触摸设备

  • 支持拖拽和选择文本

  • 支持智能滚动

  • 支持不同列表之间的拖拽

  • 不以jQuery为基础

  • 和视图模型同步刷新

  • 和vue2的国度动画兼容

  • 支持撤销操作

  • 当需要完全控制时,可以抛出所有变化

  • 可以和现有的UI组件兼容

10、BetterScroll

解决移动端(已支持 PC)各种滚动场景需求的插件。

官方地址:https://better-scroll.github.io/docs/zh-CN/

11.png

BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。

注意:

  • BetterScroll 2.X 里面,我们将 1.X 耦合的 feature 拆分至插件,以达到按需加载、减少包体积的目的。因此,@better-scroll/core 只提供了最核心的滚动能力。如果想要实现上拉加载、下拉刷新的功能,你需要使用对应的插件。

  • 版本 2.0.4 的 BetterScroll 可以通过 specifiedIndexAsContent 来指定 wrapper 的某个子元素作为 content。

(学习视频分享:web前端开发

标签:10,插件,vue,github,Vue,https,Vue3,js
From: https://www.cnblogs.com/moiom/p/17044932.html

相关文章

  • 5-MIGO收货-请维护容差码VP(公司代码1000)的容差限制-消息号 M8215
    请维护容差码VP(公司代码1000)的容差限制消息号M8215诊断系统试图检查输入输入是否在特定的限度范围之内。由于尚未维护显示的容差码限制,所以无法进行此操作。步骤......
  • Win11右键菜单回到Win10样式
    管理员运行命令reg.exeadd"HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32"/f/ve设置为Win10样式。重启电脑,或执行taskkill......
  • 1-MIGO在做收货的时候-表T169P: 表目1000 不存在
     SAP环境在安装完成后,首次在做MIGO收货会报下面的错误  解决办法SPRO-->物料管理-->后勤发票校验-->收入发票-->编辑发票校验中的PO补充文本    ......
  • Win10+Vue环境配置
    发现前年写的代码是答辩,决定试试Vue1.下载npmnpm 是 Node.js 的包管理工具,用来安装各种Node.js的扩展。下载地址安装的时候什么选项都不用勾选。2.修改扩展......
  • 10分钟做好 Bootstrap Blazor 的表格组件导出 Excel/Word/Html/Pdf
    上篇:BootstrapBlazor实战通用导入导出服务(Table组件)1.新建工程新建工程b14tabledotnetnewblazorserver-ob14table将项目添加到解决方案中:dotnetslnadd......
  • vue3之 element-plus的动态图标
    Vue2中使用ElementUI的图标渲染是通过<iclass="el-icon-plus"></i>渲染Vue3中使用ElementPlus图标渲染是通过<el-icon><Plus/></el-icon>渲染所以在使用ElementU......
  • 《Vue3.x +TpyeScript实践指南》勘误
    图书出版已有一段时间,书中已发现错误如下:书的第14页,倒数第3行,npminit-y命令中,init和-y之间应该有个空格;书的第32页,代码的第1行,应该为模板字符串符号`,我看印刷的事单引......
  • CQOI2007,洛谷P4710涂色
    题目描述假设你有一条长度为\(5\)的木版,初始时没有涂过任何颜色。你希望把它的\(5\)个单位长度分别涂上红、绿、蓝、绿、红色,用一个长度为\(5\)的字符串表示这个目......
  • php常见的vs code 插件
     php常见的vscode插件 Chinese(Simplified)LanguagePackforVisualStudioCode适用于VSCode的中文(简体)语言包此中文(简体)语言包为VSCode提供本地化界面。Git......
  • 本地用maven的sonar插件执行扫描
    以下修改都是基于工程pom.xml的修改,即工程结构为父子模块嵌套,无论执行扫描的是父工程下的所有子模块还是其中某一个子模块,sonar的相关配置都是位于父工程的pom.xml中。......