帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue图像/视频库灯箱组件(vue-cool-lightbox)

帝国模板之家 2021-01-02 网页特效 评论

介绍

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,
},
只要可以深入到所处的环境,相信美好一定会从那里产生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言