從事編程這么久了,或多或少都會(huì)用的一些庫(kù)。今天給大家推薦5個(gè)好用的 Vue.js 庫(kù)
1.Click Off to Close
有的時(shí)候,我們需要在用戶點(diǎn)擊元素之外的時(shí)候觸發(fā)一個(gè)事件。最常見(jiàn)的用例是當(dāng)你想通過(guò)點(diǎn)擊關(guān)閉一個(gè)下拉框或?qū)υ捒驎r(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)迫用戶始終單擊元素右上角處的“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)致了出色的用戶體驗(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è)很好的在線演示,在這里你可以看到每個(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)顯示消息,這大大改善了用戶的體驗(yàn)。Toasts 提供了比模態(tài)或丑陋的提示框更好的視覺(jué)指示,例如,用戶必須提供一個(gè)額外的點(diǎn)擊來(lái)關(guān)閉。用戶會(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ì)我的用戶來(lái)說(shuō)更易讀的東西)。我還使用 formatFn
來(lái)格式化我的價(jià)格,調(diào)用了一個(gè)我命名為 toLocale 的單獨(dú)方法,然后我通過(guò)綁定 tdClass 到我在 local <style> 中設(shè)置的類(lèi)來(lái)定制每個(gè)單元格的外觀。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
都能滿足你的需求。
4.Date Picker
首選:vue2-datepicker
啊,日期選擇器,這是許多應(yīng)用程序的重要組成部分。在這個(gè)列表中,日期選擇器的選擇比其他任何東西都多,但Mengxiong
打造的vue2-datepicker
是我不斷回歸的一個(gè)選擇。它的風(fēng)格簡(jiǎn)單,提供了廣泛的選擇日期和日期范圍的選項(xiàng),并被包裝在一個(gè)光滑和用戶友好的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),允許用戶選擇日期范圍,并將用戶輸入的日期 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ì)于任何需要用戶評(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),可以很容易地將用戶選擇的評(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ì)大家有所幫助。