simple-vue-preview

Vue preview plugin

一款基于vue的图片预览插件,支持放大、缩小、旋转等功能，无需传入宽高。

Demo

Live Demo >>

Installation

npm i simple-vue-preview -S

Usage

Notice:

• This plugin currently support vue2.5 and above

Install plugin

// 局部引入
import preview from 'simple-vue-preview'
 
// 全局引入
Vue.use(preview)

组件式

<template>
  <vue-preview :data="data" @close="handleClose"></vue-preview>
</template>
 
<script>
  import Preview from 'simple-vue-preview'
  export default {
    components: {
      'vue-preview' : Preview.Component
    },
    data () {
      return {
        data: [
          {
            url: '',
            title: '图片1',
          },
          {
            url: '',
            title: '图片2',
          }
        ]
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script> 

函数式

// 局部引入
import Preview from 'simple-vue-preview'
 
Preview({
  data: this.data,
  scale: 0.5,
  rotate: 90
})
 
//全局引入
this.$preview({
  data: this.data,
  scale: 0.5,
  rotate: 90
})
 

Prop

slide item options

Property	Description
data	url and title[]
scale	放大缩小比例,默认1.5
rotate	旋转比例,默认+90
value(v-model)	是否显示预览
currents	当前预览第几张图片

Events

Event name	Description	parameter
close	close gallery	nothing