vue.js需要依赖其他包_Vue.js灯箱包，无任何依赖

最新推荐文章于 2024-05-09 16:55:37 发布

cuk5239

最新推荐文章于 2024-05-09 16:55:37 发布

阅读量269

点赞数

文章标签： vue java web js html ViewUI

原文链接：https://vuejsexamples.com/vue-js-lightbox-package-without-any-dependencies/

版权

vue.js需要依赖其他包

Vue酷灯箱 (Vue-cool-lightbox)

Vue-cool-lightbox is a Vue.js lightbox component without any dependencies, inspired by fancybox with zoom and videos supported.

Vue-cool-lightbox是一个不受任何依赖的Vue.js灯箱组件，其灵感来自支持缩放和视频的fancybox。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

Use the node package manager to install vue-cool-lightbox.

使用节点程序包管理器安装vue-cool-lightbox。

npm install --save vue-cool-lightbox

and use the lightbox:

并使用灯箱：

import CoolLightBox from 'vue-cool-lightbox'

export default {
  components: {
    CoolLightBox,
  },
}

用法 (Usage)

<template>
  <div id="app">
    <CoolLightBox 
      :items="items" 
      :index="index"
      loop
      @close="index = null">
    </CoolLightBox>

    <div class="images-wrapper">
      <div
        class="image"
        v-for="(image, imageIndex) in items"
        :key="imageIndex"
        @click="setIndex(imageIndex)"
        :style="{ backgroundImage: 'url(' + image.src + ')' }"
      ></div>
    </div>
  </div>
</template>

<script>
import CoolLightBox from 'vue-cool-lightbox'

export default {
  name: "app",
  data: function () {
    return {
      items: [
        {
          src: 'https://cosmos-images2.imgix.net/file/spina/photo/20565/
          191010_nature.jpg?ixlib=rails-2.1.4&auto=format&ch=Width%2CDPR&fit=max&w=835',
        },
        {
          src: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/
          images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*',
        },
      ],
      index: null
    };
  },
  components: {
    CoolLightBox
  },
  methods: {
    setIndex(index) {
      this.index = index
    }
  }
};
</script>

Or items can be just an array:

或items可以只是一个数组：

items: [
  'http://example.com/image.jpg',
  'youtube.com',
  'vimeo.com',
  'mp4',
]

项目支持的属性 (Items Supported attributes)

Attribute	required	type	Description
src	yes	string	media source, it can be an image or a Youtube / Vimeo / Mp4 video
title	no	string	the image title
description	no	string	the image description
thumb	no	string	thumb url used in thumbs block

属性	需要	类型	描述
src	是	串	媒体源，它可以是图像或Youtube / Vimeo / Mp4视频
标题	没有	串	图片标题
描述	没有	串	图片说明
拇指	没有	串	拇指块中使用的拇指网址

支持的道具 (Props Supported)

Attribute	type	Description	Default
items	Array	Array of images/videos
index	Number	Index of items to open
loop	Boolean	Enables looping through items	true
slideshow	Boolean	Enables lighbox slideshow	true
slideshowColorBar	String	Color of the slideshow progress bar	#fa4242
slideshowDuration	Number	Duration of slides when slideshow is running (in ms)	3000
srcName	String	Name of the prop to use as image/video url	src
srcThumb	String	Name of the prop to use as image/video thumb	thumb
overlayColor	String	Overlay color	rgba(30, 30, 30, .9)

属性	类型	描述	默认
项目	数组	图像/视频阵列
指数	数	打开项目的索引
循环	布尔型	启用项目循环	真正
幻灯片放映	布尔型	启用lighbox幻灯片放映	真正
slideshowColorBar	串	幻灯片进度条的颜色	＃fa4242
slideshowDuration	数	幻灯片放映运行时的幻灯片持续时间(以毫秒为单位)	3000
srcName	串	用作图片/视频网址的道具名称	src
srcThumb	串	用作图片/视频拇指的道具名称	拇指
overlayColor	串	叠加颜色	rgba(30，30，30，.9)