2.0.6 • Published 5 years ago
image-viewer-vue v2.0.6
image-viewer-vue
A Vue.js project for viewing image
Getting Started
Installing
npm install image-viewer-vue --save
Depend on 'Spin' of iview, please install iview in your project, and you can load components on demand
Usage
- import in main.js
import imageViewer from 'image-viewer-vue'
Vue.use(imageViewer)
- example
<template>
<div>
<button @click="imageViewerFlag = true">点击查看图片</button>
<image-viewer-vue
v-if="imageViewerFlag"
@closeImageViewer="imageViewerFlag = false"
@clickImage="clickImage"
:imgUrlList="imgUrlList"
:index="currentIndex"
:title="title"
:closable=true
:cyclical=false>
</image-viewer-vue>
</div>
</template>
<script>
export default {
data() {
return {
imageViewerFlag: false,
currentIndex: 1,
title: '图片',
imgUrlList: ['url1','url2','url3']
}
},
methods:{
clickImage: function(index){
console.log(index)
}
}
}
</script>
Props
Name | Type | Required | Description | Default |
---|---|---|---|---|
imgUrlList | Array | true | image url list | [] |
index | Number | false | which image to show first | 0 |
title | String | false | image's title | 图片 |
alt | String | false | the property of img tag | 图片 |
closable | Boolean | false | the imageViewer will close when clicked blank | true |
cyclical | Boolean | false | browse pictures can be repeated | true |
Methods
Name | Description | Params |
---|---|---|
closeImageViewer | the callback for closing imageViewer | null |
clickImage | the callback for clicking the image | the index for the image which clicked |
imageLoadSuccess | the callback for loading success | the index for the image which loaded success |
imageLoadError | the callback for loading error | the index for the image which loaded error |
Built With
2.0.6
5 years ago
2.0.5
6 years ago
2.0.4
6 years ago
2.0.3
6 years ago
2.0.2
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.0.21
6 years ago
1.0.20
6 years ago
1.0.19
6 years ago
1.0.16
6 years ago
1.0.15
6 years ago
1.0.14
6 years ago
1.0.13
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago