关于vue.js:我不能没有的5个Vuejs库

微信搜寻【前端全栈开发者】关注这个脱发、摆摊、卖货](https://store.zhangbing.site%…、继续学习的程序员，第一工夫浏览最新文章，会优先两天发表新文章。关注即可大礼包，准能为你节俭不少钱！

1.Click Off to Close

有的时候，咱们须要在用户点击元素之外的时候触发一个事件。最常见的用例是当你想通过点击敞开一个下拉框或对话框时。这是一个必不可少的包，简直在我构建的每个利用中都会用到。

首选：vue-clickaway

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

如果你真的独自导入，请记住，指令须要在指令下裸露。

✅ directives: {onClickaway}

而不是组件：

❌ components: {onClickaway}

使其全局可用（在 main.js 中）：

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

在模板中：

设想一下，我有一个残缺的抉择框，其中蕴含 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

你有很多 toast 和相似告诉的抉择，但我是 Maronato 的 vue-toastification 的忠诚粉丝。它提供了大量的选项来笼罩你的大部分边界状况，而且款式和动画导致了杰出的用户体验，远远超过其余软件包。

Vue-toastification 提供了几种在其文档中应用它的办法。你能够在组件级别，全局级别甚至在 Vuex 内执行此操作，如果你心愿依据状态或与服务器相干的操作显示 toasts。

全局应用（在 main.js 中）：

import Toast from 'vue-toastification'
// Toast styles
import '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

<button @click="showToast">Show toast</button> 

选项 2：在 Vuex action 中发现错误（或胜利）时调用 Toast

你只需将 .error 改为 `.success，.info，.warning 即可更改所需的 Toast 类型，也能够将其齐全删除以作为默认的 Toast 告诉。

Toasts 能够让你依据实时状态的变动或者产生了不可预感的谬误来显示音讯，这大大改善了用户的体验。Toasts 提供了比模态或俊俏的提示框更好的视觉批示，例如，用户必须提供一个额定的点击来敞开。用户会很感谢你给他们一个视觉上的提醒，让他们晓得出了什么问题，避免他们盯着屏幕茫然地期待一些永远不会产生的事件。确认他们执行的操作是否胜利实现也很有用。

3.Tables

首选：vue-good-table

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

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

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

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

在上图中，我还应用了 vue-good-table 的一些自定义选项，比方设置我的日期的输出和输入格局(这让我能够把服务器提供的一个很长的工夫戳改成对我的用户来说更易读的货色)。我还应用 formatFn 来格式化我的价格，调用了一个我命名为 toLocale 的独自办法，而后我通过绑定 tdClass 到我在 local <style> 中设置的类来定制每个单元格的外观。Vue-good-table 的确内置了无穷的可定制性，他们曾经笼罩了十分宽泛的边缘案例。

Vue-good-table 还能够与自定义模板配合应用，因而你能够轻松地将按钮，抉择框或您喜爱的其余任何货色注入到表格的单元格中。为此，你只需应用 v-if 定义应将其注入的地位。

要增加另一个自定义列，只需在你的 v-if 标签前面增加一个 v-else-if（在下面的例子中是一个跨度），而后在那里增加第二个自定义模板的逻辑。无论你须要什么，vue-good-table 都能满足你的需要。

4.Date Picker

首选：vue2-datepicker

啊，日期选择器，这是许多应用程序的重要组成部分。在这个列表中，日期选择器的抉择比其余任何货色都多，但 Mengxiong 打造的 vue2-datepicker 是我一直回归的一个抉择。它的格调简略，提供了宽泛的抉择日期和日期范畴的选项，并被包装在一个润滑和用户敌对的 UI 中。它甚至反对 i18n 语言和日期格局的本地化。

留神：只管包名为 vue2-datepicker，但将这个包 (或这里列出的其余包) 增加到 Vue 3.0 应用程序中应该没有问题。

在组件或视图中导入，使其能够应用。

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

在模板中：

在这里，我应用的是 range 选项，容许用户抉择日期范畴，并将用户输出的日期 v-model 以一个名为 dateRange 的数据值绑定。而后，vue-good-table（如下）应用 dateRange 对我的表的后果进行排序。我还应用事件选项 @clear 和 @input 来触发重置表（resetList）或发送服务器申请表数据（searchDate）的办法。Vue2-datepicker 提供了更多的选项和事件，以不便你的应用，但这些是我发现自己最常常应用的。

5.User Ratings

首选：vue-star-rating

尽管你可能不会在每个我的项目中都应用这个性能，但对于任何须要用户评级元素的网站（比方 Amazon 或 Rotten Tomatoes），vue-star-rating 是我的首选。本人创立看似是一件微不足道的事件，但当你进入细节后，星级评定很快就会变得比你预期的要简单。如果须要非凡性能，它能够让你应用自定义 SVG 形态，并且能够轻松自定义大小，间距和色彩。

通过这些选项，能够很容易地将用户抉择的评级 v-model 绑定到任何你想应用的中央，你能够通过一个 prop 将评级设置为可更改或只读。

如果你发现须要更多抉择，请查看创建者的扩大软件包 vue-rate-it。

在模板中（带有选项）：

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

原文：https://medium.com/better-programming
作者：Titus Decali
翻译：公众号《前端全栈开发者》