Kynnumst Vuelendar: dagatal með dagsetningavali skrifað í VueJS

Þar sem sérsniðningin varð sífellt flóknari og tímafrekari, ákváðum við að leita að annarri lausn. Enn fremur leyfðu API-in ekki okkur að innleiða margar kröfur sem voru nokkuð mikilvægar fyrir gæði endans vara. Þetta er ástæðan fyrir því að Vuelendar var gert.

Þú getur fundið uppsprettuna kóði af Vuelendar í okkar GitHub-geymsla.

Hvað er það nákvæmlega?

Eins og þú gætir þegar giskað á í upphafi þessa greinar, a Vuelendar er dagatalseining skrifuð í VueJs. Hún gerir þér kleift að velja dagabil eða einn dag. Enn fremur geturðu auðveldlega skipt út fyrir óvirkum dögum! Einnig gerir hún þér kleift að bæta við sérsniðnum CSS-kóða sem getur að lokum breytt útliti og upplifun.

Sköpunarferlið

Áður notuðum við jQuery til að innleiða dagatalvirkni í einu verkefni okkar og við rekumst á vandamál – það var erfitt að sérsníða það. Þá ákváðum við að búa til okkar eigin íhlut. Í fyrstu notuðum við það aðallega í okkar eigin verkefnum, en með tímanum komumst við að þeirri niðurstöðu að það gæti verið hentug lausn fyrir aðra forritara – þá deildum við því á GitHub-reikningi The Codest sem kóðasafni.

Uppsetning

npm install [email protected]

Notkun

Innganga stíla í .vue-skránni þinni:

<style src="vuelendar/scss/vuelendar.scss" lang="ssc">

Skrá íhluti:

import VRangeSelector from 'vuelendar/components/vl-range-selector';
import VDaySelector from 'vuelendar/components/vl-day-selector';

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
},
  gögn () {
    return {
 range: {},
 date: null
    }
  }
  // ...
}

Notkun í sniðmáti:

Óvirkjunardagar

Vuelendar gerir kleift að óvirkja dagsetningar á tvo vegu.

Að nota fylki:

Mun gera 21. apríl 2019 og 25. apríl 2019 óvirk.

Að nota hlut til að lýsa dagssviði:

Mun gera allar dagsetningar frá 21. apríl 2019 til 25. apríl 2019 óvirkar.

Að tilgreina eingöngu ‘from’ eiginleikann mun gera allar dagsetningar eftir þá dagsetningu óvirkar.

Mun gera allar dagsetningar frá og með 21. apríl 2019 óvirkar.

Með því að tilgreina eingöngu ‘to’-eiginleikann verða allar dagsetningar fyrir þann dag óvirkar.

Mun gera allar dagsetningar fyrir 21. apríl 2019 óvirkar.

Umsókn

Okkar Vuelendar má nota í öllum verkefnum sem byggja á VueJS. Það er einföld en skilvirk eining sem mun ekki aðeins spara þér tíma sem forritara heldur einnig auðga þitt verkefni með hnökralausan dagatal. Nú á dögum eru mörg verkefni sem gætu þurft þessa lausn, svo hér erum við!

Uppfærslan

Þegar nýja uppfærslan á VueJS kom út, komu fram nýjar kröfur. Þess vegna höfum við ákveðið að aðlaga dagatalhlutann okkar að nýjustu útgáfu VueJS. Bókasöfnin þurftu að vera bætt svo að litli en hagnýti gimsteinninn okkar myndi keyra hnökralaust og á skilvirkan hátt.

Að ljúka

Ef þú ert í miðju verkefnis byggðs á VueJS og ert að leita að flottum eiginleika dagatals, þá er þetta án efa fyrir þig! Við vitum öll hversu mikinn tíma það tekur að búa til þessi íhluti. Okkar Vuelandar mun hjálpa þér að krydda umsóknina þína og spara tíma og taugastreitu!

Lesa meira:

Af hverju þú ættir (líklega) að nota TypeScript

Hvernig á ekki að drepa verkefni með slæmum forritunarvenjum?

Stefnur við gagnaleit í NextJS