vue 封装图片预览组件

因项目需要,自己封装了个vue图片预览组件

<template>
    <div class="imgs_previews animated" @mousewheel.prevent="wheellEvent($event)" v-if="isOpen" :class="isShow ? 'fadeIn' : 'fadeOut'">
        <div class="mask" @click="closeLayer()"></div>
        <a href="javascript:void(0);" class="close" @click="closeLayer()"><i class="iconfont"></i></a>
        <div class="preview_content" @click.stop="closeLayer('mask')">
            <div class="img_list">
                <img :src="mainImg" height="778" />
            </div>
            <div class="thumb_imgs">
                <ul>
                    <li :class="{select : item.select}" @click.stop="changeImg(index)" @mouseenter.stop="changeImg(index)" v-for="(item, index) in viewsImg" :key="index">
                        <div class="mask"></div>
                        <img :src="item.thumb" width="78" height="60" />
                        <p>{
  { item.title }}</p>
                    </li>
                </ul>
            </div>
            <div class="preview_prev prev_next_btn" >