vue插件——v-viewer

1.安装v-viewer

    

npm install v-viewer --save

2.三种引入方法

   方法一：在main.js里引用

   

import Viewer from 'v-viewer'

import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {

  defaultOptions: {

    zIndex: 9999,

  }

})

页面使用

<template>
  <div id="app">
     <div  style="display:none;">
        <viewer
          :images="images"
          @inited="inited"
          class="viewer"
          ref="viewer"
        >
         <img v-show="false" v-for="src in images" :src="src" :key="src" />
        </viewer>
        <button type="button" @click="show">Show</button>
     </div>
  </div>
</template>
<script>

export default {

  data() {
    return {
      options: {
        'inline': true, // 是否启用inline模式

        'button': true, // 是否显示右上角关闭按钮

        'navbar': true, // 是否显示缩略图底部导航栏

        'title': true, // 是否显示当前图片标题，默认显示alt属性内容和尺寸

        'toolbar': true, // 是否显示工具栏

        'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true

        'fullscreen': true, // 播放时是否全屏，默认true

        'loading': true, // 加载图片时是否显示loading图标，默认true

        'loop': true, // 是否可以循环查看图片，默认true

        'movable': true, // 是否可以拖得图片，默认true

        'zoomable': true, // 是否可以缩放图片，默认true

        'rotatable': true, // 是否可以旋转图片，默认true

        'scalable': true, // 是否可以翻转图片，默认true

        'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true

        'transition': true, // 使用 CSS3 过度，默认true

        'keyboard': true, // 是否支持键盘，默认true

        'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1

        'minZoomRatio': 0.01, // 最小缩放比例，默认0.01

        'maxZoomRatio': 100, // 最大缩放比例，默认100

        'url': 'data-source', // 设置大图片的 url

         viewed(evt) {
          // 渲染完成，所有方法均可调用
          console.log('viewed', evt)
        }
      },
      images: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  },
  methods: {
    inited(viewer) {
      // 初始化，可获取 viewer
      console.log('inited', viewer)
      this.$viewer = viewer
    },
    show() {
      this.$viewer.show()
    }
  }
}
</script>

 方法二：全局引入options

 

import Viewer from 'v-viewer'

import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {

  defaultOptions: {

    zIndex: 9999,

  }

})

Viewer.setDefaults({

  Options: {
    inline: true,
    // 遮罩层
    button: true,
    // 是否显示右上角关闭按钮
    navbar: true,
    // 是否显示缩略图底部导航栏
    title: true,
    // 是否显示当前图片标题，默认显示alt属性内容和尺寸
    toolbar: true,
    // 是否显示工具栏
    tooltip: true,
    // 放大或缩小图片时，是否显示缩放百分比，默认true
    movable: true,
    // 是否可以拖得图片，默认true
    zoomable: true,
    // 是否可以缩放图片，默认true
    rotatable: true,
    // 是否可以旋转图片，默认true
    scalable: true,
    // 是否可以翻转图片，默认true
    transition: true,
    // 使用 CSS3 过度，默认true
    fullscreen: true,
    // 播放时是否全屏，默认true
    keyboard: true,
    // 是否支持键盘，默认true
    url: "data-source",
    // 设置大图片的 url
    viewed(evt) {
      // 渲染完成，所有方法均可调用
      console.log("viewed", evt);
    },
  },

});

页面使用

<template>
  <div id="app">
     <div  style="display:none;">
        <viewer
          :images="images"
          @inited="inited"
          class="viewer"
          ref="viewer"
        >
         <img v-show="false" v-for="src in images" :src="src" :key="src" />
        </viewer>
        <button type="button" @click="show">Show</button>
     </div>
  </div>
</template>
<script>

export default {

  data() {
    return {
      images: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  },
  methods: {
    inited(viewer) {
      // 初始化，可获取 viewer
      console.log('inited', viewer)
      this.$viewer = viewer
    },
    show() {
      this.$viewer.show()
    }
  }
}
</script>

方法三：

//页面单独引入
  <template>
  <div id="app">
    <viewer
      :options="options"
      :images="images"
      @inited="inited"
      class="viewer"
      ref="viewer"
    >
      <template scope="scope">
        <img v-show="false" v-for="src in scope.images" :src="src" :key="src" />
        {{ scope.options }}
      </template>
    </viewer>
    <button type="button" @click="show">Show</button>
  </div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer/src/component.vue'
export default {
  components: {
    Viewer
  },
  data() {
    return {
      options: {
        inline: true,
        // 是否启用inline模式
        button: true,
        // 是否显示右上角关闭按钮
        navbar: true,
        // 是否显示缩略图底部导航栏
        title: true,
        // 是否显示当前图片标题，默认显示alt属性内容和尺寸
        toolbar: true,
        // 是否显示工具栏
        tooltip: true,
        // 放大或缩小图片时，是否显示缩放百分比，默认true
        movable: true,
        // 是否可以拖得图片，默认true
        zoomable: true,
        // 是否可以缩放图片，默认true
        rotatable: true,
        // 是否可以旋转图片，默认true
        scalable: true,
        // 是否可以翻转图片，默认true
        transition: true,
        // 使用 CSS3 过度，默认true
        fullscreen: true,
        // 播放时是否全屏，默认true
        keyboard: true,
        // 是否支持键盘，默认true
        url: "data-source",
        // 设置大图片的 url
        viewed(evt) {
        // 渲染完成，所有方法均可调用
        console.log("viewed", evt);
        },
      },
      images: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  },
  methods: {
    inited(viewer) {
      // 初始化，可获取 viewer
      console.log('inited', viewer)
      this.$viewer = viewer
    },
    show() {
      this.$viewer.show()
    }
  }
}
</script>