vue-mercury-image-swipe

    1.1.3 • Public • Published

    vue-mercury-image-swipe

    基于 photoswipe 的 vue 预览组件 在 vue-image-swipe 组件基础上处理

    根据业务需要将图片转成 base64 后展示(仅ios系统转换) 感谢 vue-image-swipe(https://github.com/zhhshen/vue-image-swipe)

    安装

    1 第一步

    npm install vue-mercury-image-swipe -D
    

    2 第二步

    vue 入口文件引入

    import Vue from 'vue'
    import VueImageSwipe from 'vue-mercury-image-swipe'
    import 'vue-mercury-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'
          ]
        }
      },
      created() {
      },
      methods: {
        preview(index) {
          this.$imagePreview({
            images: this.images,
            index: index,
          })
        }
      }
    }
    </script>
    

    methods

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

    this.$imagePreview(options = {})
    

    options有三个参数

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

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

    列举一些常用的配置

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

    版本功能追加功能描述

    release 1.0.4 : img 转 base64 在 iOS 系统下需要跨域,增加跨域方法 image.crossOrigin = "anonymous"; release 1.1.3 : bug fixed

    LICENSE

    Install

    npm i vue-mercury-image-swipe

    DownloadsWeekly Downloads

    15

    Version

    1.1.3

    License

    ISC

    Unpacked Size

    218 kB

    Total Files

    21

    Last publish

    Collaborators

    • xushu198912