vue 封装图片预览组件

魔幻星辰

于 2020-01-13 16:49:23 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： vue vue预览组件封装图片预览组件

本文链接：https://blog.youkuaiyun.com/weixin_39720860/article/details/103960344

版权

本文介绍了一次为了满足项目需求，作者如何封装一个Vue图片预览组件的过程。组件可方便地在其他组件中引入，并且支持通过imgsList数组配置图片。预览功能包括左右键切换、鼠标滚轮缩放以及鼠标悬停切换图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因项目需要,自己封装了个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" >

最低0.47元/天解锁文章