從事編程這么久了,或多或少都會用的一些庫。今天給大家推薦5個好用的 Vue.js 庫
1.Click Off to Close
有的時候,我們需要在用戶點擊元素之外的時候觸發(fā)一個事件。最常見的用例是當你想通過點擊關(guān)閉一個下拉框或?qū)υ捒驎r。這是一個必不可少的包,幾乎在我構(gòu)建的每個應(yīng)用中都會用到。
首選:vue-clickaway
我通常會將它安裝在 main.js 中,以便在我的應(yīng)用程序中使用。如果你只在一個或兩個頁面上使用它,你可能會想單獨導(dǎo)入它。
如果你真的單獨導(dǎo)入,請記住,指令需要在指令下暴露。
? directives: { onClickaway }
而不是組件:
? components: { onClickaway }
使其全局可用(在 main.js 中):
import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)
在模板中:
想象一下,我有一個完整的選擇框,其中包含 li 元素列表(此處未顯示)。上面的按鈕用于觸發(fā)我的自定義選擇框項目列表,當我在該元素外點擊時,會觸發(fā)一個關(guān)閉選項列表的方法。這比強迫用戶始終單擊元素右上角處的“X”按鈕要好得多。我們只需將以下內(nèi)容添加到按鈕即可獲得此功能: v-on-clickaway = "closeMethodName"。
注意:你應(yīng)該總是在 close 方法中使用 vue-clickaway ,而不是 toggle 方法。我的意思是這個方法連接到 v-on-clickaway 應(yīng)該是這樣的:
closeMethod() {
this.showSomething = false
}
而不是這樣:
toggleMethod() {
this.showSomething = !this.showSomething
}
如果你使用了 toggle 方法,那么每當你在該元素外點擊時,無論你點擊什么,它都會打開,然后一遍遍地關(guān)閉該元素。這很可能不是你想要的結(jié)果,所以請記住使用 close 方法來防止這種情況發(fā)生。
2.Toasts (Notification Bar)
首選:vue-toastification
你有很多toast
和類似通知的選擇,但我是Maronato
的vue-toastification
的忠實粉絲。它提供了大量的選項來覆蓋你的大部分邊界情況,而且樣式和動畫導(dǎo)致了出色的用戶體驗,遠遠超過其他軟件包。
Vue-toastification
提供了幾種在其文檔中使用它的方法。你可以在組件級別,全局級別甚至在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
})
你可以在每個組件中單獨控制樣式,但在上面的案例中,我通過將它導(dǎo)入 main.js,然后在那里設(shè)置我想使用的選項,使它在我的應(yīng)用程序中到處可用,這使我不必每次都編寫相同的選項屬性。Vue-toastification
有一個很好的在線演示,在這里你可以看到每個選項屬性的結(jié)果,只需要復(fù)制粘貼你想要的選項,就像我上面做的那樣。
/ 選項1:在組件(模板)中使用Toast /
<button @click="showToast">Show toast</button>
/ 選項2:在Vuex action中發(fā)現(xiàn)錯誤(或成功)時調(diào)用Toast /
你只需將 .error 改為 .success,.info,.warning 即可更改所需的 Toast 類型,也可以將其完全刪除以作為默認的 Toast 通知。
Toasts 可以讓你根據(jù)實時狀態(tài)的變化或者發(fā)生了不可預(yù)見的錯誤來顯示消息,這大大改善了用戶的體驗。Toasts 提供了比模態(tài)或丑陋的提示框更好的視覺指示,例如,用戶必須提供一個額外的點擊來關(guān)閉。用戶會很感激你給他們一個視覺上的提示,讓他們知道出了什么問題,防止他們盯著屏幕茫然地等待一些永遠不會發(fā)生的事情。確認他們執(zhí)行的操作是否成功完成也很有用。
3.Tables
首選:vue-good-table
表格是許多Web應(yīng)用程序的重要組成部分,選擇錯誤的表格會讓你陷入無盡的痛苦之中。嘗試了很長的包選項列表后,我相信vue-good-table
將解決你大部分的表需求。它不僅僅是為了好玩才叫“good-table”。它真的很好,提供了更多的選擇和功能,超出了你的能力范圍。
在以下情況下,我將 :rows 數(shù)據(jù)綁定到名為 getOrderHistory 的Vuex getter。
在本地 data() 中定義我的列:
label 是顯示的列標題,而 field 是我在Vuex getter
中綁定的數(shù)據(jù)。
在上圖中,我還使用了vue-good-table
的一些自定義選項,比如設(shè)置我的日期的輸入和輸出格式(這讓我可以把服務(wù)器提供的一個很長的時間戳改成對我的用戶來說更易讀的東西)。我還使用 formatFn
來格式化我的價格,調(diào)用了一個我命名為 toLocale 的單獨方法,然后我通過綁定 tdClass 到我在 local <style> 中設(shè)置的類來定制每個單元格的外觀。Vue-good-table
確實內(nèi)置了無窮的可定制性,他們已經(jīng)覆蓋了非常廣泛的邊緣案例。
Vue-good-table
還可以與自定義模板配合使用,因此你可以輕松地將按鈕,選擇框或您喜歡的其他任何東西注入到表格的單元格中。為此,你只需使用 v-if 定義應(yīng)將其注入的位置。
要添加另一個自定義列,只需在你的 v-if 標簽后面添加一個 v-else-if(在上面的例子中是一個跨度),然后在那里添加第二個自定義模板的邏輯。無論你需要什么,vue-good-table
都能滿足你的需求。
4.Date Picker
首選:vue2-datepicker
啊,日期選擇器,這是許多應(yīng)用程序的重要組成部分。在這個列表中,日期選擇器的選擇比其他任何東西都多,但Mengxiong
打造的vue2-datepicker
是我不斷回歸的一個選擇。它的風格簡單,提供了廣泛的選擇日期和日期范圍的選項,并被包裝在一個光滑和用戶友好的UI中。它甚至支持i18n
語言和日期格式的本地化。
注意:盡管包名為vue2-datepicker
,但將這個包(或這里列出的其他包)添加到Vue 3.0
應(yīng)用程序中應(yīng)該沒有問題。
在組件或視圖中導(dǎo)入,使其可以使用。
import DatePicker from 'vue2-datepicker';
// styles
import 'vue2-datepicker/index.css';
在模板中:
在這里,我使用的是 range 選項,允許用戶選擇日期范圍,并將用戶輸入的日期 v-model 以一個名為 dateRange 的數(shù)據(jù)值綁定。然后,vue-good-table(如下)使用 dateRange 對我的表的結(jié)果進行排序。我還使用事件選項 @clear 和 @input 來觸發(fā)重置表(resetList)或發(fā)送服務(wù)器請求表數(shù)據(jù)(searchDate)的方法。Vue2-datepicker提供了更多的選項和事件,以方便你的使用,但這些是我發(fā)現(xiàn)自己最經(jīng)常使用的。
5.User Ratings
首選:vue-star-rating
雖然你可能不會在每個項目中都使用這個功能,但對于任何需要用戶評級元素的網(wǎng)站(比如Amazon或Rotten Tomatoes),vue-star-rating是我的首選。自己創(chuàng)建看似是一件微不足道的事情,但當你進入細節(jié)后,星級評定很快就會變得比你預(yù)期的要復(fù)雜。如果需要特殊功能,它可以讓你使用自定義SVG形狀,并且可以輕松自定義大小,間距和顏色。
通過這些選項,可以很容易地將用戶選擇的評級 v-model 綁定到任何你想使用的地方,你可以通過一個prop將評級設(shè)置為可更改或只讀。
如果你發(fā)現(xiàn)需要更多選擇,請查看創(chuàng)建者的擴展軟件包vue-rate-it。
在模板中(帶有選項):
將其導(dǎo)入到組件或視圖中:
文章來源:www.toutiao.com/a6865327554656469508/ 作者:杭州程序員小張
以上就是W3Cschool編程獅
關(guān)于 推薦5個很好用的Vue.js庫 的相關(guān)介紹了,希望對大家有所幫助。