VUE img展示 v-viewer插件

背景：

              展示 用户的图片及操作

步骤：

 一、安装 v-viewer插件

    npm install v-viewer

二、main.js 中全局配置

 //fss  图片点击放大预览v-viewer插件

 import Viewer from 'v-viewer'

 import 'viewerjs/dist/viewer.css'

 Vue.use(Viewer)

三、页面使用

html：

        <!-- 展示 -->
        <div class="Show_box">
            <div class="images" v-viewer="Options">
                <div v-for="(itme,index) in imgSrcList" :key="index" >
                    <div class="img_div">
                        <img :src="itme" @click="show" class="img_box">
                    </div>
                </div>
            </div>
        </div>

JS：

<script>
 import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
    components: { 
        ElImageViewer 
    },
    data(){
        return{
            /**********************  **********************/ 
            imgSrcList:[],
            Options:{
                'inline': true,     //内联
                'button': true, 
                'navbar': true,     //导航栏
                'title': true, 
                'toolbar': true,    //工具栏
                'tooltip': true,    //工具提示
                'movable': true,    //可移动的
                'zoomable': true,   //可缩放
                'rotatable': true,  //可旋转
                'scalable': true,   //可扩展
                'transition': true, //过渡
                'fullscreen': true, //全屏
                'keyboard': true,   //键盘
            },
        }
    },
    methods:{
        //获取照片
        getImgs(){
            let arr = [
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
                'http://pic16.nipic.com/20110817/2839526_152333630088_2.jpg',
                'http://b-ssl.duitang.com/uploads/item/201506/05/20150605173346_LfWdB.jpeg',
            ];
            this.imgSrcList = arr;
        },
        show () {
            let viewer = this.$el.querySelector('.images').$viewer;
            viewer.show()
        }
    },
    created(){
        this.getImgs();
    }
}
</script>

四、页面效果

  列表展示：

           

   点击后：

          

参考 v-viewer网址: https://www.npmjs.com/package/v-viewer