组件用.vue还是.js_灵感源自灯箱的Vue.js组件-CSDN博客

组件用.vue还是.js

静音盒 (silentbox)

A second version of the lightweight lightbox inspired component for Vue.js with local video support and more comming.

用于Vue.js的受轻量级灯箱启发的组件的第二版，具有本地视频支持和更多功能。

安装 (Installation)

Npm (Npm)

npm install --save vue-silentbox

Import the plugin into Vue:

将插件导入Vue：

import Vue from 'vue'
import VueSilentbox from 'vue-silentbox'

Vue.use(VueSilentbox)

如何使用？ (How to use?)

Define an array of images in the data object of your Vue instance or component.

在Vue实例或组件的数据对象中定义图像数组。

const app = new Vue({
    el: '#application',
    data: {
        images: [
            {
                src: 'images/image001.jpg',
                description: 'Sunken dreams II. by Arbebuk',
            },
            {
                src: 'images/image002.jpg',
                description: 'Tunnel View Sunrise by Porbital',
            }
        ]
    },
})

Then in the template you can use a silent-box component to display gallery.

然后，在模板中，您可以使用silent-box组件来显示画廊。

<silent-box :gallery="images"><!-- your additional content --></silentbox-single>

or to show single image by just renaming the property.

或仅通过重命名属性来显示单个图像。

<silent-box :image="images[0]"><!-- your additional content --></silentbox-single>

图像对象属性 (Image object attributes)

You can set following attributes to the image object to change the behaviour of the SilentBox or display additional information. On the other hand, if you're lazy, only src attribute is required.

您可以为图像对象设置以下属性，以更改SilentBox的行为或显示其他信息。另一方面，如果您很懒，则仅需要src属性。

Attribute	required	type	Description
src	yes	string	media source, it could be an image or a youtube / Vimeo video
thumbnail	no	string	image used for thumbnail
thumbnailHeight	no	string	height of the thumbnail in px
thumbnailWidth	no	string	width of the thumbnail in px
description	no	string	short description below image (doesn't work below videos yet)
alt	no	string	alt description for images
autoplay	no	bool	to autoplay youtube / Vimeo video
controls	no	bool	works only for youtube videos, setting false will hide video controls

属性	需要	类型	描述
src	是	串	媒体来源，它可以是图片或youtube / Vimeo视频
缩图	没有	串	用于缩略图的图像
thumbnailHeight	没有	串	缩略图的高度(以像素为单位)
thumbnailWidth	没有	串	缩略图的宽度(以像素为单位)
描述	没有	串	图片下方的简短说明(尚不能在视频下方使用)
alt	没有	串	图片的替代说明
自动播放	没有	布尔	自动播放youtube / Vimeo视频
控制项	没有	布尔	仅适用于youtube视频，设置为false会隐藏视频控件

支持的服务和格式 (Supported services and formats)

All image formats that can be displayed in browser
可以在浏览器中显示的所有图像格式
Local video files with following extensions .mp4, .ogg, .webm, .mov, .flv, .wmv, .mkv
具有以下扩展名的本地视频文件.mp4，.ogg，.webm，.mov，.flv，.wmv，.mkv
YouTube and Viemo embed videos with autoplay
YouTube和Viemo嵌入具有自动播放功能的视频

从0.1升级？ (Upgrading from 0.1?)

Version 2 brought many breaking changes. There are no more two separate components to display single image or gallery. So, change all your silentbox-group and silentbox-single components to silent-box. Source of images must be an array of objects or single object with previously mentioned attributes.

第2版带来了许多重大更改。没有更多两个单独的组件来显示单个图像或画廊。因此，将所有silentbox-group和silentbox-single组件更改为silent-box 。图像源必须是对象数组或具有前面提到的属性的单个对象。