小編給大家分享一下Vue.js中常用庫有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

站在用戶的角度思考問題，與客戶深入溝通，找到富縣網(wǎng)站設(shè)計(jì)與富縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋富縣地區(qū)。

1.Click Off to Close

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

首選：vue-clickaway

我通常會(huì)將它安裝在 main.js 中，以便在我的應(yīng)用程序中使用。如果你只在一個(gè)或兩個(gè)頁面上使用它，你可能會(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)迫用戶始終單擊元素右上角處的“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í)，無論你點(diǎn)擊什么，它都會(huì)打開，然后一遍遍地關(guān)閉該元素。這很可能不是你想要的結(jié)果，所以請(qǐng)記住使用 close 方法來防止這種情況發(fā)生。

2.Toasts (Notification Bar)

首選：vue-toastification

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

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

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

Show toast

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

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

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

3.Tables

首選：vue-good-table

表格是許多Web應(yīng)用程序的重要組成部分，選擇錯(cuò)誤的表格會(huì)讓你陷入無盡的痛苦之中。嘗試了很長(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ì)我的用戶來說更易讀的東西)。我還使用 formatFn 來格式化我的價(jià)格，調(diào)用了一個(gè)我命名為 toLocale 的單獨(dú)方法，然后我通過綁定 tdClass 到我在 local