用vue来显示一组类轮播图片实战

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标签:

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

  
  
  
  
  
  
  
  
  
  
  
  
  
  



  

    

      

        

          Examples
        
        

          Getting started
        
        

          Options
        
        

          License
        
        

          Help
        
      
    
    

      

        

          
vue images
          
A simple, responsive Lightbox component for Vue.js to display an array of images.
        
        

          Code and Docs on GitHub
                        
              Star
                        
        
        

          

            
Examples
            

              

                
Photos courtesy of Unsplash.
                    
Support your keyboard to navigate left right esc. Support mouse scroll to navigate. Support mouse touch move to navigate.
                
Also, try resizing your browser window.
              
              

                
                
              
            
          

          

            
Getting Started
            
1. Import using module:
            
// 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'
            
2. Import using script tag:
                            
<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: '#demo',
  data () {
    return {
      images: [...],
      ...(other parameters)
    }
  },
  components: {
    vueImages: vueImages.default
  }
})

          

          

            
Options
            

              

                

                

                  
Property
                  
Type
                  
Default
                  
Description
                
                
                

                

                  
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
                
                
              
            
            
Images
            

              

                

                

                  
Property
                  
Type
                  
Default
                  
Description
                
                
                

                

                  
imageUrl
                  
string
                  
undefined
                  
Required. The primary image path
                
                

                  
caption
                  
string
                  
undefined
                  
Displayed beneath the current image. Great for description or attribution
                
                
              
            
          

          

            
License
            
vue images is free to use for personal and commercial projects under the MIT license.
            
Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.
          

          

            
Help

            
Have a question?
            
Follow the quick start guide on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.

            
Found a bug?
            
If you find a bug, please read the Change Log before you report the issue.
          
        
      
    
    

      Copyright 
      © 
      Littlewin 2017
    
  

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
  }
})