我不能沒有的5個Vue.js庫

微信搜索【前端全棧開發者】關注這個脫髮、擺攤、賣貨、持續學習的程序員，第一時間閱讀最新文章，會優先兩天發表新文章。關注便可大禮包，準能爲你節省很多錢！

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
翻譯：公衆號《前端全棧開發者》