Nationwide Polamorous Matrimony

    image-viewer-vue

    2.0.6 • Public • Published

    image-viewer-vue

    NPM version Build Status

    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

    Install

    npm i image-viewer-vue

    DownloadsWeekly Downloads

    105

    Version

    2.0.6

    License

    MIT

    Unpacked Size

    285 kB

    Total Files

    26

    Last publish

    Collaborators

    • egoyau