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