基于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. 能放大、缩小、重置、左旋转、右旋转图像； 

二、组件

<template>
  <el-dialog class="preview-box" :visible.sync="isshow" width="100%" center>
    <i @click="handleClose" class="el-icon-error close"></i>
    <swiper ref="mySwiper" class="swiper-preview" :options="swiperOption">
      <slot name="swiper-slide">
        <swiper-slide v-for="(item,index) in list" :key="item.id">
          <img :style="{transform:(index==activeIndex?style:'')}" :src="item.pic" alt />
          <div class="result">
            <span>({
  
  {index+1}}/{
  
  {list