Susipažinkite su Vuelendar: VueJS parašytas datos žymeklio kalendorius

Kadangi pritaikymas tapo vis sudėtingesnis ir užėmė vis daugiau laiko, nusprendėme ieškoti kito sprendimo. Be to, API neleido mus įgyvendinti daugybę reikalavimų, kurie buvo labai svarbūs galutinio produkto kokybei. produktas. Štai kodėl 1TP68Kalendorius buvo padaryta.

Šaltinį galite rasti kodas iš 1TP68Kalendorius mūsų "GitHub" saugykla.

Kas tai yra?

Kaip jau galėjote numanyti šio straipsnio pradžioje, a 1TP68Kalendorius yra kalendoriaus komponentas, parašytas VueJs kalba. Jis leidžia pasirinkti datų intervalą arba vieną datą. Be to, taip pat galite lengvai pakeisti neaktyvias dienas! Be to , jis leidžia pridėti pritaikytų CSS fragmentų, kurie galiausiai gali pakeisti "išvaizdą".

Kūrimo procesas

Anksčiau viename iš mūsų projektų naudojome "jQquery" kalendoriaus funkcijai įgyvendinti ir susidūrėme su problema - ją buvo sunku pritaikyti. Tuomet nusprendėme sukurti savo komponentą. Pirmajame etape daugiausia naudojome jį savo projektuose, tačiau laikui bėgant priėjome prie išvados, kad tai gali būti patogus sprendimas kitiems programuotojams - būtent tada pasidalijome juo The Codest "GitHub" paskyroje kodo bibliotekos pavidalu.

Įrengimas

npm įdiegti [email protected]

Naudojimas

Importuokite stilius į .vue failą:

Registro sudedamosios dalys:

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

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  duomenys () {
    grįžti {
      range: {},
      data: null
    }
  }
  // ...
}

Naudojimas šablone:

Datų išjungimas

Vuelendar leidžia dviem būdais išjungti datas.

Naudojant masyvą:

Bus išjungtos 2019 m. balandžio 21 d. ir 2019 m. balandžio 25 d.

Objekto naudojimas datų intervalui apibūdinti:

Bus išjungtos visos datos nuo 2019 m. balandžio 21 d. ir 2019 m. balandžio 25 d.

Nurodžius tik atributą "nuo", bus išjungtos visos datos, buvusios po šios datos.

Išjungs visas datas nuo 2019 m. balandžio 21 d.

Nurodžius tik atributą "iki", bus išjungtos visos datos iki tos datos.

Bus išjungtos visos datos iki 2019 m. balandžio 21 d.

Paraiška

Mūsų 1TP68Kalendorius galima naudoti visuose projektuose, pagrįstuose VueJS. Tai paprastas, bet veiksmingas komponentas, kuris ne tik sutaupys jūsų, kaip programuotojų, laiko, bet ir praturtins jūsų projektas su sklandžiai veikiančiu kalendoriumi. Šiandien yra daug projektų, kuriems gali prireikti tokio sprendimo, todėl mes esame čia!

Atnaujinimas

Pradėjus naudoti naują VueJS atnaujinimą, atsirado nauji reikalavimai. Todėl nusprendėme pritaikyti savo kalendoriaus komponentą prie naujausios VueJS versijos. Reikėjo patobulinti bibliotekas, kad mūsų nedidelis, bet patogus perliukas veiktų sklandžiai ir efektyviai.

Apibendrinimas

Jei vykdote VueJS pagrįstą projektą ir ieškote šaunios kalendoriaus funkcijos, šis projektas tikrai skirtas jums! Visi žinome, kiek laiko gali užtrukti šių komponentų kūrimas. Mūsų Vuelandar padės jums pagyvinti paraišką ir sutaupyti laiko bei nervų!

Skaityti daugiau:

Kodėl turėtumėte (tikriausiai) naudoti Typescript

Kaip nesunaikinti projekto dėl blogos kodavimo praktikos?

Duomenų gavimo strategijos "NextJS