Vue.js gaismas kastes komponents bez jebkādām atkarībām

Blogs

Vue.js gaismas kastes komponents bez jebkādām atkarībām

Vue.js gaismas kastes komponents bez jebkādām atkarībām

Vue-cool-lightbox

Vue-cool-lightbox ir Vue.js gaismas kastes komponents bez jebkādas atkarības, iedvesmojoties no tā fancybox ar tālummaiņu un videoklipiem



mojang konts aizmirsa paroli

Uzstādīšana

Izmantojiet mezglu pakotņu pārvaldnieku, lai instalētu vue-cool-lightbox.

npm install --save vue-cool-lightbox

un izmantojiet gaismas kārbu:



import CoolLightBox from 'vue-cool-lightbox' export default { components: { CoolLightBox, }, }

Lietošana

importēt CoolLightBox no 'vue-cool-lightbox' eksporta noklusējuma {name: 'app', data: function () {return {items: [{src: 'https://cosmos-images2.imgix.net/file/spina/ photo/20565/191010_nature.jpg '> vienumi: [' http://example.com/image.jpg'> Atribūts nepieciešams tipa Apraksts    src Jā virkne multivides avotu, tas var būt attēls vai Youtube / Vimeo / Mp4 video   titulu Nē virkne attēla nosaukumu   apraksts Nē virkne attēla apraksts   īkšķis Nē virkne īkšķa URL, kas izmantots īkšķu blokā    

Atbalstīti rekvizīti

Atribūts tipa Apraksts Noklusējuma
preces Masīvs Attēlu/video masīvs
rādītājs Skaitlis Atveramo vienumu rādītājs
cilpa Būla Iespējo vienumu pārslēgšanu taisnība
slaidrāde Būla Iespējo lighbox slaidrādi taisnība
slideshowColorBar Stīga Slaidrādes norises joslas krāsa #fa4242
slideshowDuration Skaitlis Slaidu ilgums slīdrādes laikā (ms) 3000
srcName Stīga Rekvizīta nosaukums, ko izmantot kā attēla/video URL src
srcThumb Stīga Rekvizīta nosaukums, ko izmantot kā attēla/video īkšķi īkšķis
overlayColor Stīga Pārklājuma krāsa rgba (30, 30, 30, .9)

Atbalstītie sloti

Vārds Apraksts
ikona-iepriekšējā Iepriekšējā ikona
ikona-nākamā Nākamā ikona
aizvērt Aizvērt ikonu

Demo

Lejupielādēt

#vue #vue-lightbox #lightbox