小程序组件转换vue组件_适用于Vue应用程序的简单灯箱组件

最新推荐文章于 2024-09-30 07:28:09 发布

cuk5340

最新推荐文章于 2024-09-30 07:28:09 发布

阅读量348

点赞数

文章标签： java vue javascript python js ViewUI

原文链接：https://vuejsexamples.com/simple-lightbox-component-for-vue-applications/

版权

vue-my-photos是一款从小程序组件转换而来的Vue灯箱组件，提供缩略图画廊和过滤功能。无需依赖，可在Vue.js应用中轻松安装和使用。组件响应用户点击事件，通过更新过滤器字符串来改变灯箱中显示的图像。

摘要由CSDN通过智能技术生成

小程序组件转换vue组件

我的照片 (vue-my-photos)

Simple Image Lightbox for Vue.js

Vue.js的简单图片灯箱

No dependencies required!

无需依赖！

Inspired by vue-pure-lightbox, however I needed a framework that allowed for a gallery of thumbnails as well as filtering functionality.

受vue-pure-lightbox的启发，但是我需要一个框架，该框架允许包含缩略图以及过滤功能。

View Documentation 查看文档 Download Source 下载源

安装与设定 (Installation and Setup)

通过NPM： (Via NPM:)

npm i vue-my-photos --save

Then in your main.js file:

然后在您的main.js文件中：

import Lightbox from 'vue-my-photos'
Vue.component('lightbox', Lightbox);

通过CDN： (Via CDN:)

<!-- In <head> -->
<meta rel="stylesheet" href="https://unpkg.com/vue-my-photos/dist/lightbox.css">
<!-- In <body>, after Vue import -->
<script src="https://unpkg.com/vue-my-photos/dist/lightbox.js"></script>

Then in your App:

然后在您的应用中：

<script>
    Vue.use(Lightbox)

    new Vue({
        // ...
    })
</script>

用法 (Usage)

Simply initiate a lightbox component with the 'lightbox' tag and unique ref name:

只需使用“ lightbox”标签和唯一的引用名称启动灯箱组件：

<lightbox id="mylightbox"
    ref="lightbox"
    :images="images"
    :filter="galleryFilter"
    :directory="thumbnailDir"
    :timeoutDuration="5000"
></lightbox>

Each thumbnail in the gallery then registers a click event, passing the name of the photo:

然后，图库中的每个缩略图都会记录一个点击事件，并传递照片名称：

@click="showLightbox(image.name)"

And add the showLightbox (or w/e name you choose) method to your vue page:

并将showLightbox(或您选择的w / e名称)方法添加到您的vue页面：

showLightbox: function(imageName) {
    this.$refs.lightbox.show(imageName);
}

To update which images show within the lightbox, update the filter string like so:

要更新灯箱中显示的图像，请按以下方式更新过滤器字符串：

updateFilter(filterName) {
    this.galleryFilter = filterName;
}

物产 (Properties)

Property	Type	Value
images (Required)	array	Array of objects with image data (example below)
filter (Optional - Default: "all")	string	String to filter on specific images (Ex: "nature")
directory (Optional - Default: "")	string	Path to location of images (Ex: "/src/assets/")
timeoutDuration (Optional - Default: 3000)	integer	duration in ms of key/mouse inactivity before caption disappears

属性	类型	值
图片(必填)	数组	具有图像数据的对象数组(下面的示例)
过滤器(可选-默认：“全部”)	串	用于过滤特定图像的字符串(例如：“自然”)
目录(可选-默认：“”)	串	图像位置的路径(例如：“ / src / assets /”)
timeoutDuration(可选-默认：3000)	整数	字幕消失之前按键/鼠标不活动的持续时间(以毫秒为单位)

Example of images array:

图片数组示例：

var images = [{'name':'mountains.jpg', 'alt':'The Dolomites', 'filter':'nature' },
              {'name':'bird.jpg', 'alt':'It is a bird', 'filter':'animals' }];

Note:

注意事项 ：

'name' value should include the file extension
“名称”值应包含文件扩展名
'alt' is optional
'alt'是可选的
'filter' is optional if you don't pass/update the filter value on the lightbox component
如果您不通过/更新灯箱组件上的过滤器值，则“过滤器”是可选的