网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
vue-cool-lightbox是一个非常漂亮的图像和视频库Vue灯箱组件,支持标题和图像缩放。
1.安装并导入vue-cool-lightbox。
import CoolLightBox from 'vue-cool-lightbox'
2.注册组件。
export default {
components: {
CoolLightBox,
},
}
3.将组件插入模板。
<template>
<div id="app">
<CoolLightBox
:items="items"
:index="index"
@close="index = null">
</CoolLightBox>
<div class="images-wrapper">
<div
class="image"
v-for="(image, imageIndex) in items"
:key="imageIndex"
@click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image.src + ')' }"
></div>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
items: [
{
title: 'Image 1',
description: "Description 1",
src: '1.jpg',
},
{
title: 'a beautiful mountain view',
description: "Description 2",
src: '2.jpg',
},
{
title: 'Youtube Video',
description: "Youtube Video",
thumb: 'thumb.jpg',
src: 'https://www.youtube.com/watch?v=d0tU18Ybcvk',
}
],
index: null
};
},
};
</script>
4. 组件默认配置项。
index: {
required: true
},
effect: {
type: String,
default: 'swipe'
},
items: {
type: Array,
required: true,
},
loop: {
type: Boolean,
default: true,
},
slideshow: {
type: Boolean,
default: true,
},
slideshowColorBar: {
type: String,
default: '#fa4242',
},
slideshowDuration: {
type: Number,
default: 3000,
},
useZoomBar: {
type: Boolean,
default: false,
},
closeOnClickOutsideMobile: {
type: Boolean,
default: false,
},
srcName: {
type: String,
default: 'src',
},
srcThumb: {
type: String,
default: 'thumb',
},
srcMediaType: {
type: String,
default: 'mediaType',
},
overlayColor: {
type: String,
default: 'rgba(30, 30, 30, .9)'
},
zIndex: {
type: Number,
default: 9999,
},
gallery: {
type: Boolean,
default: true,
},
fullScreen: {
type: Boolean,
default: false,
},
thumbsPosition: {
type: String,
default: 'right',
},
youtubeCookies: {
type: Boolean,
default: true,
},
enableWheelEvent: {
type: Boolean,
default: false,
},
showCloseButton: {
type: Boolean,
default: true,
},
disableZoom: {
type: Boolean,
default: false,
},
dir: {
type: String,
default: 'ltr',
},
enableScrollLock: {
type: Boolean,
default: true,
},
转载请注明来源:Vue图像/视频库灯箱组件(vue-cool-lightbox)
本文永久链接地址:https://www.moyouyouw.cn/code/1179.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论