v-preview-pc

Vue图片预览插件，用于PC端，支持多张图片切换，缩放，旋转

Usage no npm install needed!

<script type="module">
  import vPreviewPc from 'https://cdn.skypack.dev/v-preview-pc';
</script>

README

PC图片预览插件

  • 引用方式

全局引用

<link href="https://hqq2016.github.io/v-preview-pc/dist/index.css" rel="stylesheet">
<script src="https://hqq2016.github.io/v-preview-pc/dist/index.js"></script>
//引入vue后
<script>
  // 如果Vue挂载到全局了，会自动注入，挂载到Vue.prototype.$vPreview，使用this.$vPreview.show()调用，否则，自行调用
    //Vue.use(vPreview.default)
</script>

ES6引用 使用方式

// main.js
import vPreview from 'v-preview-pc'
import 'v-preview-pc/dist/index.css'
Vue.use(vPreview)

<!-- 组件内使用 -->
<template>
  <div>
    我是模板
    <button @click="showPreview">点击弹框</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        'https://picsum.photos/id/35/1440/900',
        'https://picsum.photos/id/36/1440/900',
        'https://picsum.photos/id/37/1440/900'
      ],
    }
  },
  methods: {
    showPreview() {
      this.$vPreview.show(this.imgList, {
        currentIndex: 0, //默认显示索引值，默认0
        initW: 800 //默认显示宽度，默认值800
      })
    }
  }
}
</script>