用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



  
  vue-images
  
  
  
  
  
  
  
  
  
  
  
  


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.

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

你可能感兴趣的:(用vue来显示一组类轮播图片实战)