推薦5個(gè)很好用的Vue.js庫(kù)

從事編程這么久了，或多或少都會(huì)用的一些庫(kù)。今天給大家推薦5個(gè)好用的 Vue.js 庫(kù)

1.Click Off to Close

有的時(shí)候，我們需要在用戶(hù)點(diǎn)擊元素之外的時(shí)候觸發(fā)一個(gè)事件。最常見(jiàn)的用例是當(dāng)你想通過(guò)點(diǎn)擊關(guān)閉一個(gè)下拉框或?qū)υ?huà)框時(shí)。這是一個(gè)必不可少的包，幾乎在我構(gòu)建的每個(gè)應(yīng)用中都會(huì)用到。

首選：vue-clickaway

我通常會(huì)將它安裝在 main.js 中，以便在我的應(yīng)用程序中使用。如果你只在一個(gè)或兩個(gè)頁(yè)面上使用它，你可能會(huì)想單獨(dú)導(dǎo)入它。

如果你真的單獨(dú)導(dǎo)入，請(qǐng)記住，指令需要在指令下暴露。

? directives: { onClickaway }

而不是組件：

? components: { onClickaway }

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

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

在模板中：

想象一下，我有一個(gè)完整的選擇框，其中包含 li 元素列表（此處未顯示）。上面的按鈕用于觸發(fā)我的自定義選擇框項(xiàng)目列表，當(dāng)我在該元素外點(diǎn)擊時(shí)，會(huì)觸發(fā)一個(gè)關(guān)閉選項(xiàng)列表的方法。這比強(qiáng)迫用戶(hù)始終單擊元素右上角處的“X”按鈕要好得多。我們只需將以下內(nèi)容添加到按鈕即可獲得此功能： v-on-clickaway = "closeMethodName"。

注意：你應(yīng)該總是在 close 方法中使用 vue-clickaway ，而不是 toggle 方法。我的意思是這個(gè)方法連接到 v-on-clickaway 應(yīng)該是這樣的：

closeMethod() {
  this.showSomething = false
}

而不是這樣：

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

如果你使用了 toggle 方法，那么每當(dāng)你在該元素外點(diǎn)擊時(shí)，無(wú)論你點(diǎn)擊什么，它都會(huì)打開(kāi)，然后一遍遍地關(guān)閉該元素。這很可能不是你想要的結(jié)果，所以請(qǐng)記住使用 close 方法來(lái)防止這種情況發(fā)生。

2.Toasts (Notification Bar)

首選：vue-toastification

你有很多toast和類(lèi)似通知的選擇，但我是Maronato的vue-toastification的忠實(shí)粉絲。它提供了大量的選項(xiàng)來(lái)覆蓋你的大部分邊界情況，而且樣式和動(dòng)畫(huà)導(dǎo)致了出色的用戶(hù)體驗(yàn)，遠(yuǎn)遠(yuǎn)超過(guò)其他軟件包。

Vue-toastification提供了幾種在其文檔中使用它的方法。你可以在組件級(jí)別，全局級(jí)別甚至在Vuex內(nèi)執(zhí)行此操作，如果你希望根據(jù)狀態(tài)或與服務(wù)器相關(guān)的操作顯示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
})

你可以在每個(gè)組件中單獨(dú)控制樣式，但在上面的案例中，我通過(guò)將它導(dǎo)入 main.js，然后在那里設(shè)置我想使用的選項(xiàng)，使它在我的應(yīng)用程序中到處可用，這使我不必每次都編寫(xiě)相同的選項(xiàng)屬性。Vue-toastification有一個(gè)很好的在線(xiàn)演示，在這里你可以看到每個(gè)選項(xiàng)屬性的結(jié)果，只需要復(fù)制粘貼你想要的選項(xiàng)，就像我上面做的那樣。

/ 選項(xiàng)1：在組件（模板）中使用Toast /

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

/ 選項(xiàng)2：在Vuex action中發(fā)現(xiàn)錯(cuò)誤（或成功）時(shí)調(diào)用Toast /

你只需將 .error 改為 .success，.info，.warning 即可更改所需的 Toast 類(lèi)型，也可以將其完全刪除以作為默認(rèn)的 Toast 通知。

Toasts 可以讓你根據(jù)實(shí)時(shí)狀態(tài)的變化或者發(fā)生了不可預(yù)見(jiàn)的錯(cuò)誤來(lái)顯示消息，這大大改善了用戶(hù)的體驗(yàn)。Toasts 提供了比模態(tài)或丑陋的提示框更好的視覺(jué)指示，例如，用戶(hù)必須提供一個(gè)額外的點(diǎn)擊來(lái)關(guān)閉。用戶(hù)會(huì)很感激你給他們一個(gè)視覺(jué)上的提示，讓他們知道出了什么問(wèn)題，防止他們盯著屏幕茫然地等待一些永遠(yuǎn)不會(huì)發(fā)生的事情。確認(rèn)他們執(zhí)行的操作是否成功完成也很有用。

3.Tables

首選：vue-good-table

表格是許多Web應(yīng)用程序的重要組成部分，選擇錯(cuò)誤的表格會(huì)讓你陷入無(wú)盡的痛苦之中。嘗試了很長(zhǎng)的包選項(xiàng)列表后，我相信vue-good-table將解決你大部分的表需求。它不僅僅是為了好玩才叫“good-table”。它真的很好，提供了更多的選擇和功能，超出了你的能力范圍。

在以下情況下，我將 :rows 數(shù)據(jù)綁定到名為 getOrderHistory 的Vuex getter。

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

label 是顯示的列標(biāo)題，而 field 是我在Vuex getter中綁定的數(shù)據(jù)。

在上圖中，我還使用了vue-good-table的一些自定義選項(xiàng)，比如設(shè)置我的日期的輸入和輸出格式(這讓我可以把服務(wù)器提供的一個(gè)很長(zhǎng)的時(shí)間戳改成對(duì)我的用戶(hù)來(lái)說(shuō)更易讀的東西)。我還使用 formatFn來(lái)格式化我的價(jià)格，調(diào)用了一個(gè)我命名為 toLocale 的單獨(dú)方法，然后我通過(guò)綁定 tdClass 到我在 local <style> 中設(shè)置的類(lèi)來(lái)定制每個(gè)單元格的外觀(guān)。Vue-good-table確實(shí)內(nèi)置了無(wú)窮的可定制性，他們已經(jīng)覆蓋了非常廣泛的邊緣案例。

Vue-good-table還可以與自定義模板配合使用，因此你可以輕松地將按鈕，選擇框或您喜歡的其他任何東西注入到表格的單元格中。為此，你只需使用 v-if 定義應(yīng)將其注入的位置。

要添加另一個(gè)自定義列，只需在你的 v-if 標(biāo)簽后面添加一個(gè) v-else-if（在上面的例子中是一個(gè)跨度），然后在那里添加第二個(gè)自定義模板的邏輯。無(wú)論你需要什么，vue-good-table都能滿(mǎn)足你的需求。

4.Date Picker

首選：vue2-datepicker

啊，日期選擇器，這是許多應(yīng)用程序的重要組成部分。在這個(gè)列表中，日期選擇器的選擇比其他任何東西都多，但Mengxiong打造的vue2-datepicker是我不斷回歸的一個(gè)選擇。它的風(fēng)格簡(jiǎn)單，提供了廣泛的選擇日期和日期范圍的選項(xiàng)，并被包裝在一個(gè)光滑和用戶(hù)友好的UI中。它甚至支持i18n語(yǔ)言和日期格式的本地化。

注意：盡管包名為vue2-datepicker，但將這個(gè)包(或這里列出的其他包)添加到Vue 3.0應(yīng)用程序中應(yīng)該沒(méi)有問(wèn)題。

在組件或視圖中導(dǎo)入，使其可以使用。

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

在模板中：

在這里，我使用的是 range 選項(xiàng)，允許用戶(hù)選擇日期范圍，并將用戶(hù)輸入的日期 v-model 以一個(gè)名為 dateRange 的數(shù)據(jù)值綁定。然后，vue-good-table（如下）使用 dateRange 對(duì)我的表的結(jié)果進(jìn)行排序。我還使用事件選項(xiàng) @clear 和 @input 來(lái)觸發(fā)重置表（resetList）或發(fā)送服務(wù)器請(qǐng)求表數(shù)據(jù)（searchDate）的方法。Vue2-datepicker提供了更多的選項(xiàng)和事件，以方便你的使用，但這些是我發(fā)現(xiàn)自己最經(jīng)常使用的。

5.User Ratings

首選：vue-star-rating

雖然你可能不會(huì)在每個(gè)項(xiàng)目中都使用這個(gè)功能，但對(duì)于任何需要用戶(hù)評(píng)級(jí)元素的網(wǎng)站（比如Amazon或Rotten Tomatoes），vue-star-rating是我的首選。自己創(chuàng)建看似是一件微不足道的事情，但當(dāng)你進(jìn)入細(xì)節(jié)后，星級(jí)評(píng)定很快就會(huì)變得比你預(yù)期的要復(fù)雜。如果需要特殊功能，它可以讓你使用自定義SVG形狀，并且可以輕松自定義大小，間距和顏色。

通過(guò)這些選項(xiàng)，可以很容易地將用戶(hù)選擇的評(píng)級(jí) v-model 綁定到任何你想使用的地方，你可以通過(guò)一個(gè)prop將評(píng)級(jí)設(shè)置為可更改或只讀。

如果你發(fā)現(xiàn)需要更多選擇，請(qǐng)查看創(chuàng)建者的擴(kuò)展軟件包vue-rate-it。

在模板中（帶有選項(xiàng)）：

將其導(dǎo)入到組件或視圖中：

文章來(lái)源：www.toutiao.com/a6865327554656469508/ 作者：杭州程序員小張

以上就是W3Cschool編程獅關(guān)于 推薦5個(gè)很好用的Vue.js庫(kù) 的相關(guān)介紹了，希望對(duì)大家有所幫助。