vue-images
用一个简单的 lightbox组件来显示一组图片
特性
适应手机
显示带有缩略图导航
响应式设计 适应各类屏幕
马上上手
- 导入模块:
// Install using npm
npm install vue-images --save
// Include stylesheet
require('vue-images/dist/vue-images.css')
// In ES6 module
import vueImages from 'vue-images'
- 导入script标签:
<link rel="stylesheet" href="../node-modules/vue-images/dist/vue-images.css" charset="utf-8">
<script src="../node-modules/vue-images/dist/vue-images.js"></script>
new Vue({
el: '#app',
data () {
return {
images: [...],
...
}
},
components: {
vueImages: vueImages.default
}
})
属性值
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| images | array | undefined | Required. An array of objects containing valid src and srcset values of img element |
| modalclose | bool | true | Allow users to exit the lightbox by clicking the backdrop |
| keyinput | bool | true | Supports keyboard input - esc, ←, and → |
| mousescroll | bool | true | Supports mouse scroll |
| showclosebutton | bool | true | Optionally display a close X button in top right corner |
| showcaption | bool | true | Optionally display a caption under the image |
| imagecountseparator | string | ' of ' | Custom separator for the image count |
| showimagecount | bool | true | Optionally display image index, e.g., "3 of 20" |
| showthumbnails | bool | false | Optionally display thumbnails beneath the Lightbox |
说明
本文为翻译https://littlewin-wang.github.io/vue-images/example/ 文章
欢迎加qq群610334712 交流vue的技术和下载完整的项目代码
附带部分核心代码
核心代码
html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>vue-images</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="keywords" content="vue,vuejs,vue component,lightbox,vue lightbox,vue images,image,images,ui,javascript">
<meta name="description" content="A simple, responsive Lightbox component for displaying an array of images.">
<meta property="og:locale" content="zh-cn">
<meta property="og:title" content="vue-images">
<meta property="og:description" content="A simple, responsive Lightbox component for displaying an array of images.">
<meta property="og:url" content="https://littlewin-wang.github.io/vue-images/example/">
<meta property="og:site_name" content="vue-images">
<meta property="og:type" content="article">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../dist/vue-images.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="page-wrapper">
<div class="container">
<nav class="left-col">
<ul class="page-nav">
<li class="page-nav__item">
<a class="page-nav__link" href="#examples">Examples</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#getting-started">Getting started</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#options">Options</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#license">License</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#help">Help</a>
</li>
</ul>
</nav>
<div class="right-col">
<div class="page-content">
<header class="page-header">
<h1 class="page-header__title">vue images</h1>
<p class="page-header__subtitle">A simple, responsive Lightbox component for <a href="https://vuejs.org/" target="_blank">Vue.js</a> to display an array of images.</p>
</header>
<div class="page-subheader">
<a href="https://github.com/littlewin-wang/vue-images" class="page-subheader__link" target="_blank">Code and Docs on GitHub</a>
<span class="page-subheader__button">
<a class="github-button" id="github-stars-button" href="https://github.com/littlewin-wang/vue-images" data-icon="octicon-star" data-style="mega" data-count-href="/littlewin-wang/vue-images/stargazers" data-count-api="/repos/littlewin-wang/vue-images#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star littlewin-wang/vue-images on GitHub">Star</a>
</span>
</div>
<div class="page-body">
<section id="examples" class="section-examples">
<h2>Examples</h2>
<div id="example">
<div style="margin-bottom: 20px;">
<p>Photos courtesy of <a href="https://unsplash.com/" target="_blank">Unsplash</a>.</p> <p>Support your keyboard to navigate <kbd>left</kbd> <kbd>right</kbd> <kbd>esc</kbd>. Support mouse scroll to navigate. Support mouse touch move to navigate.</p>
<p>Also, try resizing your browser window.</p>
</div>
<div id="demo">
<vue-images :imgs="images"
:modalclose="modalclose"
:keyinput="keyinput"
:mousescroll="mousescroll"
:showclosebutton="showclosebutton"
:showcaption="showcaption"
:imagecountseparator="imagecountseparator"
:showimagecount="showimagecount"
:showthumbnails="showthumbnails">
</vue-images>
</div>
</div>
</section>
<section id="getting-started" class="section-getting-started">
<h2>Getting Started</h2>
<p>1. Import using module:</p>
<pre>// Install using npm
npm install vue-images --save
// Include stylesheet
require('vue-images/dist/vue-images.css')
// In ES6 module
import vueImages from 'vue-images'</pre>
<p>2. Import using script tag:</p>
<pre><code><link rel="stylesheet" href="../node-modules/vue-images/dist/vue-images.css" charset="utf-8">
<script src="../node-modules/vue-images/dist/vue-images.js"></script></code></pre>
<pre>
new Vue({
el: '#demo',
data () {
return {
images: [...],
...(other parameters)
}
},
components: {
vueImages: vueImages.default
}
})</pre>
</section>
<section id="options" class="section-options">
<h2>Options</h2>
<div class="options-table-container">
<table class="options-table">
<thead>
<tr>
<th align="left">Property</th>
<th align="left">Type</th>
<th align="left">Default</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><a href="#images">images</a></td>
<td align="left">array</td>
<td align="left">undefined</td>
<td align="left">Required. An array of objects containing valid src and srcset values of img element</td>
</tr>
<tr>
<td align="left">modalclose</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Allow users to exit the lightbox by clicking the backdrop</td>
</tr>
<tr>
<td align="left">keyinput</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Supports keyboard input - <kbd>esc</kbd>, <kbd>←</kbd>, and <kbd>→</kbd></td>
</tr>
<tr>
<td align="left">mousescroll</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Supports mouse scroll</td>
</tr>
<tr>
<td align="left">showclosebutton</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Optionally display a close <kbd>X</kbd> button in top right corner</td>
</tr>
<tr>
<td align="left">showcaption</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Optionally display a caption under the image</td>
</tr>
<tr>
<td align="left">imagecountseparator</td>
<td align="left">string</td>
<td align="left">' of '</td>
<td align="left">Custom separator for the image count</td>
</tr>
<tr>
<td align="left">showimagecount</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Optionally display image index, e.g., "3 of 20"</td>
</tr>
<tr>
<td align="left">showthumbnails</td>
<td align="left">bool</td>
<td align="left">false</td>
<td align="left">Optionally display thumbnails beneath the Lightbox</td>
</tr>
</tbody>
</table>
</div>
<h2>Images</h2>
<div class="options-table-container" id="images">
<table class="options-table">
<thead>
<tr>
<th align="left">Property</th>
<th align="left">Type</th>
<th align="left">Default</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">imageUrl</td>
<td align="left">string</td>
<td align="left">undefined</td>
<td align="left"><b>Required.</b> The primary image path</td>
</tr>
<tr>
<td align="left">caption</td>
<td align="left">string</td>
<td align="left">undefined</td>
<td align="left">Displayed beneath the current image. Great for description or attribution</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="license" class="section-license">
<h2>License</h2>
<p>vue images is free to use for personal and commercial projects under <a target="_blank" href="https://github.com/littlewin-wang/vue-images/blob/master/LICENSE">the MIT license</a>.</p>
<p>Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.</p>
</section>
<section id="help" class="section-help">
<h2>Help</h2>
<h3>Have a question?</h3>
<p>Follow the <a target="_blank" href="https://github.com/littlewin-wang/vue-images#start-guide">quick start guide</a> on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.</p>
<h3>Found a bug?</h3>
<p>If you find a bug, please read the <a target="_blank" href="https://github.com/littlewin-wang/vue-images#change-log">Change Log</a> before you <a target="_blank" href="https://github.com/littlewin-wang/vue-images/issues">report the issue</a>.</p>
</section>
</div>
</div>
</div>
<footer class="page-footer">
<span class="page-footer__copyright--small">Copyright </span>
<span class="page-footer__copyright--large">© </span>
<a target="_blank" href="https://github.com/littlewin-wang" target="_blank">Littlewin</a> 2017
</footer>
</div>
</div>
<script>
document.getElementById('github-stars-button').dataset.style = window.innerWidth > 480 ? 'mega': null;
</script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.9/vue.min.js"></script>
<script src="../dist/vue-images.js"></script>
<script src="index.js"></script>
</body>
js
new Vue({
el: '#demo',
data () {
return {
images: [
{
imageUrl: 'https://images.unsplash.com/photo-1454991727061-be514eae86f7?dpr=2&auto=format&w=1024',
caption: 'Photo by 1'
},
{
imageUrl: 'https://images.unsplash.com/photo-1455717974081-0436a066bb96?dpr=2&auto=format&w=1024',
caption: 'Photo by 2'
},
{
imageUrl: 'https://images.unsplash.com/photo-1460899960812-f6ee1ecaf117?dpr=2&auto=format&w=1024',
caption: 'Photo by 3'
},
{
imageUrl: 'https://images.unsplash.com/photo-1456926631375-92c8ce872def?dpr=2&auto=format&w=1024',
caption: 'Photo by 4'
},
{
imageUrl: 'https://images.unsplash.com/photo-1452274381522-521513015433?dpr=2&auto=format&w=1024',
caption: 'Photo by 5'
},
{
imageUrl: 'https://images.unsplash.com/photo-1471145653077-54c6f0aae511?dpr=2&auto=format&w=1024',
caption: 'Photo by 6'
},
{
imageUrl: 'https://images.unsplash.com/photo-1471005197911-88e9d4a7834d?dpr=2&auto=format&w=1024',
caption: 'Photo by 7'
},
{
imageUrl: 'https://images.unsplash.com/photo-1470583190240-bd6bbde8a569?dpr=2&auto=format&w=1024',
caption: 'Photo by 8'
},
{
imageUrl: 'https://images.unsplash.com/photo-1470688090067-6d429c0b2600?dpr=2&auto=format&w=1024',
caption: 'Photo by 9'
},
{
imageUrl: 'https://images.unsplash.com/photo-1470742292565-de43c4b02b57?dpr=2&auto=format&w=1024',
caption: 'Photo by 10'
}
],
modalclose: true,
keyinput: true,
mousescroll: true,
showclosebutton: true,
showcaption: true,
imagecountseparator: 'of',
showimagecount: true,
showthumbnails: true
}
},
components: {
vueImages: vueImages.default
}
})
