首页 / js教程

    基于photoswipe实现的vue图片预览组件(代码)

    类型:原创      发布者:不言2018-09-15 16:06:12

    php中文网赞助会员本篇文章给大家带来的内容是关于vue图片预览插件如何创建(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    vue-image-swipe

    基于photoswipe实现的vue图片预览组件

    安装

    1 第一步

    npm instatll vue-image-swipe -D

    2 第二步

    vue 入口文件引入

    import Vue from 'vue'
    import VueImageSwipe from 'vue-image-swipe'
    import 'vue-image-swipe/dist/vue-image-swipe.css'
    Vue.use(VueImageSwipe)

    使用

    <template>
    <div>
      hello world
      <div>
        <ul>
          <li
            :key="index"
            @click="preview(index)"
            v-for="(l, index) in images">
             <img :src="l" alt="">
          </li>
        </ul>
      </div>
    </div>
    </template>
    <script>
    export default {
      name: 'app',
      data() {
        return {
          images: [
            'http://oayhezji6.bkt.clouddn.com/preview1.jpg',
            'http://oayhezji6.bkt.clouddn.com/preview2.jpg',
            'http://oayhezji6.bkt.clouddn.com/preview3.jpg',
            'http://oayhezji6.bkt.clouddn.com/preview9.jpg',
            'http://oayhezji6.bkt.clouddn.com/preview10.jpg',
            'http://oayhezji6.bkt.clouddn.com/preview6.jpg'
          ]
        }
      },
      created() {
      },
      methods: {
        preview(index) {
          this.$imagePreview({
            images: this.images,
            index: index,
          })
        }
      }
    }
    </script>

    methods

    只暴露了一个方法this.$imagePreview,并绑定到vue的原型上
    使用

    this.$imagePreview(options = {})

    options有三个参数

    参数默认值说明
    images空数组图片的url数组
    index0预览图片的索引值, 默认是0
    defaultOpt{}配置项

    defaultOpt 的配置项请参考photoswipe配置项,
    注意:不能保证所有配置项都是可用的

    列举一些常用的配置

    defaultOpt: {
      fullscreenEl: true,
      shareEl: false,
      arrowEl: true,
      preloaderEl: true,
      loop: false,
      bgOpacity: 0.85,
      showHideOpacity: true,
      errorMsg: '<p class="pswp__error-msg">图片加载失败</p>',
    }

    相关推荐:

    HTML选择图片并直接预览实现代码

    如何使用Vue2x实现图片预览插件

    以上就是基于photoswipe实现的vue图片预览组件(代码)的详细内容,更多请关注php中文网其它相关文章!

PHP中文网

未登录