美文网首页
用vue来显示一组类轮播图片实战

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

作者: 恋爱中的云 | 来源:发表于2017-01-19 17:14 被阅读0次

    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>&lt;link rel="stylesheet" href="../node-modules/vue-images/dist/vue-images.css" charset="utf-8"&gt;
&lt;script src="../node-modules/vue-images/dist/vue-images.js"&gt;&lt;/script&gt;</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">&copy; </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
  }
})

    相关文章

      网友评论

          本文标题：用vue来显示一组类轮播图片实战

          本文链接：https://www.haomeiwen.com/subject/mimibttx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|用vue来显示一组类轮播图片实战|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！