V-preview-img NPM

v-preview-img

效果预览

安装

npm install --save v-preview-img

在组件中使用

<template>
  <div id="app">
    <preview-img
      :options="options"
      :exit="exitPreview"
      :data="previewImages"
    ></preview-img>
  </div>
</template>

<script>
import previewImg from 'v-preview-img'
 
export default {
  name: 'app',
  components: { previewImg },
  data() {
    return {
      options: { initImageIndex: 1 },
      previewImages: [
        'http://git.tsingzone.com/uploads/user/avatar/49/22771955.jpeg',
        'http://git.tsingzone.com/uploads/user/avatar/49/22771955.jpeg'
      ]
    }
  },
  methods: {
    exitPreview() {
      // ...
    }
  }
}
</script>

使用说明

props

data

预览图片的队列

type: array
default: ['http://git.tsingzone.com/uploads/user/avatar/49/22771955.jpeg']
valid: val.length > 0

options

预览图片选项

type: object
default:

{
   initImageIndex: 0,  // 配置初始位置，默认为0
   zoom: true,  // 配置缩放功能，默认开启
   rotate: true,  // 配置旋转功能，默认开启
   drag: false,  // 配置拖拽功能（图片显示不全时），默认关闭
   closeOnClickMask: false  // 是否点击遮罩层退出预览，默认否
}

exit

退出预览后的方法