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

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。

安装 (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)

AttributerequiredtypeDescription
srcyesstringmedia source, it can be an image or a Youtube / Vimeo / Mp4 video
titlenostringthe image title
descriptionnostringthe image description
thumbnostringthumb url used in thumbs block
属性 需要 类型 描述
src 媒体源,它可以是图像或Youtube / Vimeo / Mp4视频
标题 没有 图片标题
描述 没有 图片说明
拇指 没有 拇指块中使用的拇指网址

支持的道具 (Props Supported)

AttributetypeDescriptionDefault
itemsArrayArray of images/videos
indexNumberIndex of items to open
loopBooleanEnables looping through itemstrue
slideshowBooleanEnables lighbox slideshowtrue
slideshowColorBarStringColor of the slideshow progress bar#fa4242
slideshowDurationNumberDuration of slides when slideshow is running (in ms)3000
srcNameStringName of the prop to use as image/video urlsrc
srcThumbStringName of the prop to use as image/video thumbthumb
overlayColorStringOverlay colorrgba(30, 30, 30, .9)
属性 类型 描述 默认
项目 数组 图像/视频阵列
指数 打开项目的索引
循环 布尔型 启用项目循环 真正
幻灯片放映 布尔型 启用lighbox幻灯片放映 真正
slideshowColorBar 幻灯片进度条的颜色 #fa4242
slideshowDuration 幻灯片放映运行时的幻灯片持续时间(以毫秒为单位) 3000
srcName 用作图片/视频网址的道具名称 src
srcThumb 用作图片/视频拇指的道具名称 拇指
overlayColor 叠加颜色 rgba(30,30,30,.9)

支持的插槽 (Slots Supported)

NameDescription
icon-previousPrevious icon
icon-nextNext icon
closeClose icon
名称 描述
上一个图标 上一个图标
下一个图标 下一个图标
关闭图示

翻译自: https://vuejsexamples.com/vue-js-lightbox-package-without-any-dependencies/

vue.js需要依赖其他包

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值