基于vue实现的预览图片的组件

因为项目中需要能预览一系列图像，element-ui里面图像预览组件已不能满足自身需求，所以就自己仿照其封装了插件已满足需求，其中也用到了swiper:

npm install vue-awesome-swiper --save

在main.js中引用(注：也可在组件中引用）

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

import 'swiper/dist/css/swiper.css'（css需要单独引用）

一、效果图

1. 能自定义swiper-slide内容块；
2. 能放大、缩小、重置、左旋转、右旋转图像； 

二、组件

三、在全局或者页面中注册该组件

四、在需要预览图像的地方调用方法：

 methods: {
    handlePreview() {
      let data = {
        index: 1,//默认显示图像数组第几张图片，从0到list.length
        list: [ //需要预览的图像数组
          {id:1,pic:require("../assets/images/i.jpg")},
          {id:2,pic:require("../assets/images/noLesion.png")}
        ]
      };
      this.$bus.$emit("isPreviewImg", data);
    },
}

五、在main.js中注册eventBus

Vue.prototype.$bus = new Vue();