js数组截取前5个_我不能没有的5个Vue.js库

e0627bcd17c1250d3c4b34f5ec41bbe9.png

1.Click Off to Close

有的时候,我们需要在用户点击元素之外的时候触发一个事件。最常见的用例是当你想通过点击关闭一个下拉框或对话框时。这是一个必不可少的包,几乎在我构建的每个应用中都会用到。

首选:vue-clickaway

95848b23ca1bca03dff5f565fe5d8d3b.gif

https://github.com/simplesmiler/vue-clickaway

我通常会将它安装在 main.js 中,以便在我的应用程序中使用。如果你只在一个或两个页面上使用它,你可能会想单独导入它。

如果你真的单独导入,请记住,指令需要在指令下暴露。

✅ directives: { onClickaway }

而不是组件:

❌ components: { onClickaway }

使其全局可用(在 main.js 中):

import { directive as onClickaway } from 'vue-clickaway'Vue.directive('on-clickaway', onClickaway)

在模板中:

001bdc3cdbbbee19dbc0e06eddc8167f.png

想象一下,我有一个完整的选择框,其中包含 li 元素列表(此处未显示)。上面的按钮用于触发我的自定义选择框项目列表,当我在该元素外点击时,会触发一个关闭选项列表的方法。这比强迫用户始终单击元素右上角处的“X”按钮要好得多。我们只需将以下内容添加到按钮即可获得此功能: v-on-clickaway = "closeMethodName"

注意:你应该总是在 close 方法中使用 vue-clickaway ,而不是 toggle 方法。我的意思是这个方法连接到 v-on-clickaway 应该是这样的:

closeMethod() {  this.showSomething = false}

而不是这样:

toggleMethod() {  this.showSomething = !this.showSomething}

如果你使用了 toggle 方法,那么每当你在该元素外点击时,无论你点击什么,它都会打开,然后一遍遍地关闭该元素。这很可能不是你想要的结果,所以请记住使用 close 方法来防止这种情况发生。

2.Toasts (Notification Bar)

首选:vue-toastification

cc956b0db5e616912a146bf4c0b133d0.gif

https://maronato.github.io/vue-toastification/

你有很多toast和类似通知的选择,但我是Maronato的vue-toastification的忠实粉丝。它提供了大量的选项来覆盖你的大部分边界情况,而且样式和动画导致了出色的用户体验,远远超过其他软件包。

Vue-toastification提供了几种在其文档中使用它的方法。你可以在组件级别,全局级别甚至在Vuex内执行此操作,如果你希望根据状态或与服务器相关的操作显示toasts。

全局使用(在 main.js 中):

import Toast from 'vue-toastification'// Toast stylesimport 'vue-toastification/dist/index.css'Vue.use(Toast, {  transition: 'Vue-Toastification__bounce',  maxToasts: 3,  newestOnTop: true,  position: 'top-right',  timeout: 2000,  closeOnClick: true,  pauseOnFocusLoss: true,  pauseOnHover: false,  draggable: true,  draggablePercent: 0.7,  showCloseButtonOnHover: false,  hideProgressBar: true,  closeButton: 'button',  icon: true,  rtl: false})

你可以在每个组件中单独控制样式,但在上面的案例中,我通过将它导入 main.js,然后在那里设置我想使用的选项,使它在我的应用程序中到处可用,这使我不必每次都编写相同的选项属性。Vue-toastification有一个很好的在线演示,在这里你可以看到每个选项属性的结果,只需要复制粘贴你想要的选项,就像我上面做的那样。

/ 选项1:在组件(模板)中使用Toast /

Show toast 
771e54dcab4933584ad80ba9f4877a8e.png

/ 选项2:在Vuex action中发现错误(或成功)时调用Toast /

6433d8b0c72b997a0823e61db5ddbfcb.png

你只需将 .error 改为 .success.info.warning 即可更改所需的Toast类型,也可以将其完全删除以作为默认的Toast通知。

Toasts可以让你根据实时状态的变化或者发生了不可预见的错误来显示消息,这大大改善了用户的体验。Toasts提供了比模态或丑陋的提示框更好的视觉指示,例如,用户必须提供一个额外的点击来关闭。用户会很感激你给他们一个视觉上的提示,让他们知道出了什么问题,防止他们盯着屏幕茫然地等待一些永远不会发生的事情。确认他们执行的操作是否成功完成也很有用。

3.Tables

首选:vue-good-table

638162b2e28137bb357f33f5c6225f74.png

https://xaksis.github.io/vue-good-table

表格是许多Web应用程序的重要组成部分,选择错误的表格会让你陷入无尽的痛苦之中。尝试了很长的包选项列表后,我相信vue-good-table将解决你大部分的表需求。它不仅仅是为了好玩才叫“good-table”。它真的很好,提供了更多的选择和功能,超出了你的能力范围。

在以下情况下,我将 :rows 数据绑定到名为 getOrderHistory 的Vuex getter。

b0e5b613e999e7bcd097489d01481b1b.png

在本地 data() 中定义我的列:

0c088662e34a35fca5f5fadf685256eb.png

label 是显示的列标题,而 field 是我在Vuex getter中绑定的数据。

在上图中,我还使用了vue-good-table的一些自定义选项,比如设置我的日期的输入和输出格式(这让我可以把服务器提供的一个很长的时间戳改成对我的用户来说更易读的东西)。我还使用 formatFn 来格式化我的价格,调用了一个我命名为 toLocale 的单独方法,然后我通过绑定 tdClass 到我在 local 中设置的类来定制每个单元格的外观。Vue-good-table确实内置了无穷的可定制性,他们已经覆盖了非常广泛的边缘案例。

Vue-good-table还可以与自定义模板配合使用,因此你可以轻松地将按钮,选择框或您喜欢的其他任何东西注入到表格的单元格中。为此,你只需使用 v-if 定义应将其注入的位置。

要添加另一个自定义列,只需在你的 v-if 标签后面添加一个 v-else-if(在上面的例子中是一个跨度),然后在那里添加第二个自定义模板的逻辑。无论你需要什么,vue-good-table都能满足你的需求。

4.Date Picker

首选:vue2-datepicker

4a4cb979761650b38bb123a6a776f97a.gif

https://mengxiong10.github.io/vue2-datepicker/index.html#Basic

啊,日期选择器,这是许多应用程序的重要组成部分。在这个列表中,日期选择器的选择比其他任何东西都多,但Mengxiong打造的vue2-datepicker是我不断回归的一个选择。它的风格简单,提供了广泛的选择日期和日期范围的选项,并被包装在一个光滑和用户友好的UI中。它甚至支持i18n语言和日期格式的本地化。

注意:尽管包名为vue2-datepicker,但将这个包(或这里列出的其他包)添加到Vue 3.0应用程序中应该没有问题。

在组件或视图中导入,使其可以使用。

import DatePicker from 'vue2-datepicker';// stylesimport 'vue2-datepicker/index.css';

在模板中:

88921ef7efaeb6717b4438dd655b4e59.png

在这里,我使用的是 range 选项,允许用户选择日期范围,并将用户输入的日期 v-model 以一个名为 dateRange 的数据值绑定。然后,vue-good-table(如下)使用 dateRange 对我的表的结果进行排序。我还使用事件选项 @clear@input 来触发重置表(resetList)或发送服务器请求表数据(searchDate)的方法。Vue2-datepicker提供了更多的选项和事件,以方便你的使用,但这些是我发现自己最经常使用的。

5.User Ratings

首选:vue-star-rating

93fb8e55522feaeff7a1e063b52dc9ed.gif

https://github.com/craigh411/vue-star-rating

虽然你可能不会在每个项目中都使用这个功能,但对于任何需要用户评级元素的网站(比如Amazon或Rotten Tomatoes),vue-star-rating是我的首选。自己创建看似是一件微不足道的事情,但当你进入细节后,星级评定很快就会变得比你预期的要复杂。如果需要特殊功能,它可以让你使用自定义SVG形状,并且可以轻松自定义大小,间距和颜色。

通过这些选项,可以很容易地将用户选择的评级 v-model 绑定到任何你想使用的地方,你可以通过一个prop将评级设置为可更改或只读。

如果你发现需要更多选择,请查看创建者的扩展软件包vue-rate-it。

在模板中(带有选项):

b8bd168577839ab66b8909d5c7f82f5c.png

将其导入到组件或视图中:

a73791bba555ad28fa491124b7a548ec.png

粉丝福利

最近整理了一份优质视频教程资源,想要的可以关注我然后私信“666”即可免费领取哦!如果文章对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。

a4e9e8de2c6c6e13bc5962e9c940c5ce.png

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

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

相关文章

this.$router.push如何刷新页面_小程序丨微信小程序如何实现页面下拉刷新

微信小程序蕴含着众多功能,本期将简单介绍实现页面下拉刷新的方法,通过阅读本文,读者们可以自行动手操作,在实践中认识微信小程序。首先,我们需在json配置中写出以下配置:"enablePullDownRefresh"…

C语言-字符串处理函数strcmp

strcmp-字符串比较函数 原型:int strcmp(const char firststring[], const char secondstring); 功能:比较两个字符串firststring和secondstring 如果等于 返回值为0 如果字符串1大于字符串2 函数值返回为1 如果字符串1小于字符串2 函数值返回为-1 …

导出excel数字前面的0消失_Excel操作中常见的3大坑你遇到过吗?遇到应该这么解决...

在excel中的我们获取数据的方式一是自己录入数据,二是通过网络或其他的途径导出的源数据,不管哪种的方式,对我们处理数据的来说都十分重要,这里我们需要注意这些点并成功跳过这些不按原理只按自己习惯的坑。今天要聊的坑有3个&…

matplot绘制图形入门

一、折线图 """ File: 折线图.py Author: chde_wang Date: 2021-05-23 22:26:04 Description: """ # 绘制折线图 import numpy as np import matplotlib.pyplot as plt x np.linspace(0, 2 * np.pi, 100) y1, y2 np.si…

kafka使用_Kafka介绍与使用

最近在研究kafka,觉得需要输出点东西才能更好的吸收,遂总结与大家分享,话不多说。一、先上思维导图:二、再上kafka整体架构图:2.1、Producer:消息生产者,就是向kafka broker发消息的客户端。2.2…

int 为什么是2147483647_int范围为啥是-2147483648到2147483647

单位换算 1 Byte(B) 8 bit 1 Kilo Byte(KB) 1024B 1 Mega Byte(MB) 1024 KB 1 Giga Byte (GB) 1024 MB 1 Tera Byte(TB) 1024 GB 1 Peta Byte(PB) 1024 TB 从上可以了解计算机最小的存储单位是bit,即一位二进制数(0 或 1),8个二进制位为一个字…

linux 关闭端口_手把手教你在Linux中快速检测端口的 3 个小技巧

一个执着于技术的公众号前言 无论是要解决网络连接问题还是配置防火墙,第一件事是要检查系统实际打开了哪些端口。本文介绍了几种快速查找 Linux 系统上哪些端口向外部开放的方法。什么是开放端口 监听端口是应用程序监听的网络端口。你要得到的监听端口名单通常可以…

2021-01-12

系统设计-设计思路 定义结构体来保存通讯录中联系人的各项信息 使用主菜单实现对通讯录主要功能的管理,不同功能对应着不同的编号 使用结构体数据来存储多个联系人 采用文件来保存联系人的数据,提高操作效率 系统的数据输入包括输入功能编号以及联系…

2020-11-20

ln -s /bis_data/mysql/tmp/mysql.sock /tmp/ find / -name mysql.sock 2>/dev/null

未能找到程序集“platform.winmd_应用程序崩溃后 微软错误报告工具到底是如何联机检查解决方案的?...

在 Windows 应用意外崩溃后,系统似乎会努力地寻找解决方案。但是在绝大多数情况下,这一切都是徒劳的,并不会向用户给出任何结果。即便如此,很多人还是想要知道这个无效的过程期间到底都发生了什么。好消息是,近日微软 …

python升级到最新版本windows64位安装哪个包_手把手windows64位配置安装python2.7

这几天公司要用到python的一些算法,让我调研一番,之前对Python一次没接触的我在安装配置环境的时候由于版本的问题,折腾了好久,这里简单介绍一下我的安装方法,需要安装pyhton的朋友可以不再向我一样安装的那么纠结。。…

python连接服务器sql server_python – 无法通过pymssql连接到SQL Server

我试图通过pymssql从本地服务器上的* nix系统连接到运行在Windows XP系统上的SQL Server.但是,连接失败,如下所示db pymssql.connect(host192.168.1.102,userwww,passwordtest,databaseTestDB)Traceback (most recent call last):File "", line 1, in File "py…

pycharm 配置qt

在cmd中 pip install pyqt5-tools

python 网络编程 异步io_异步IO实现 小例(程序+驱动程序)

结合阻塞与非阻塞访问、poll 函数可以较好地解决设备的读写,但是如果有了异步通知就更方便了。异步通知的意思是:一旦设备就绪,则主动通知应用程序,这样应用程序根本就不需要查询设备状态,这一点非常类似于硬件上“中断…

mysql索引创建和使用注意事项

总结: 1、在使用索引时,一般情况下不建议使用like操作。如果使用,则%放在后面。否则不会使用索引。like ‘%abd%’不会使用索引,而like ‘aaa%’可以使用索引.(最左缀原则) 2、单列索引的使用: 《1》 只…

不同存储结构的文件磁盘io操作次数_MySQL InnoDB存储引擎

第1章 MySQL体系结构和存储引擎1.1数据库和实例数据库:物理操作系统文件或其他形式文件类型的集合。实例:MySQL数据库由后台线程以及一个共享内存区组成。共享内存可以被运行 的后台线程所共享。数据库实例才是真正用于操作数据库文件的。启动MySQL数据库…

我的模型--

from skimage import io, transform # skimage模块下的io transform(图像的形变与缩放)模块 import glob # glob 文件通配符模块 import os # os 处理文件和目录的模块 import tensorflow as tf import numpy as np # 多维数据处理模块 import time import matplotlib.pypl…

python蚁群算法 路径规划_蚁群算法(1) - Python实现

1 importnumpy as np2 importmatplotlib.pyplot as plt345 #建立“蚂蚁”类6 classAnt(object):7 def __init__(self, path):8 self.path path #蚂蚁当前迭代整体路径9 self.length self.calc_length(path) #蚂蚁当前迭代整体路径长度1011 def calc_length(self, path_): #pa…

win10-PC端无法输入中文

试过 任务管理器中,的 MscCtfMonitor任务,先选择结束,然后再选择运行。关闭后输入法就可重新使用了---不行 当出现Win10无法输入中文汉字时,首先我们需要重启一下“输入法”程序: 右击桌面“Windows”图标&#xff0c…

python变量和数据类型_python的变量和数据类型

1.Python的变量不用定义类型,每个语句后面也不用使用分号结束语句(不像java,C,C#要在变量声明后加上分号)如:message"hello python world"print(message)-----------------------------------age19print(age)2.字符串(1).在Python中用引号括起来的都是字符串, 其中的…