1.0.2 • Published 4 years ago
simple-vue-preview v1.0.2
Vue preview plugin
一款基于vue的图片预览插件,支持放大、缩小、旋转等功能,无需传入宽高。
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 |