vue2图片预览插件

已于 2023-04-09 14:28:37 修改
阅读量2.5k 收藏 5
点赞数 1
分类专栏： 前端学习 文章标签： javascript vue.js 前端
于 2023-03-23 14:51:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16992475/article/details/129730280
版权

文章目录

学习链接

vue插件开发实例-图片预览插件
vue2-pre-img-plugin的gitee代码

准备工作

准备图片与基础的样式

  • 将iconfont下载的字体图标资源放在src/assets/iconfont目录下
  • 将准备预览的图片放到src/static/images目录下

PrevImg.vue

在plugins/PrevImg目录下，创建PrevImg.vue。

直接引入静态图片资源，然后作为vue组件实例的data

<template>
    <div class="prev-container">
        <div class="mask"></div>
        <div class="indicator">
            <i class="iconfont icon-jiahao1"></i>
            <i class="iconfont icon-jian"></i>
            <i class="iconfont icon-reset"></i>
            <i class="iconfont icon-close"></i>
        </div>
        <div class="img-wrapper">
            <img :src="imgPath">
        </div>
    </div>
</template>

<script>
import img1 from '@/static/images/1.jpg'
import img2 from '@/static/images/2.jpg'
import img3 from '@/static/images/3.jpg'
import img4 from '@/static/images/4.png'
import img5 from '@/static/images/5.png'

console.log('PrevImg->img1',img1); // PrevImg->img1 /img/1.1a1b49d1.jpg

export default {
    name: 'PrevImg2',
    data() {
        return {
            imgPath: img1
        }
    },
}
</script>

<style lang="scss">
    .prev-container {
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;

        .mask {
            position: absolute;
            background-color: rgba(0,0,0,.3);
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .indicator {
            display: flex;
            justify-content: flex-end;
            padding: 20px;
            z-index: 100;
            i {
                padding: 10px;
                background-color: rgba(255,255,255,.3);
                border-radius: 50%;
                margin: 0 5px;
                cursor: pointer;
            }
        }

        .img-wrapper {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;

            display: flex;
            align-items: center;
            justify-content: center;
            img {
                max-height: 100%;
                max-width: 80%;
                transition: all 0.5s;
            }
        }
    }
</style>

App.vue

App.vue中使用改组件

<template>
  <div id="app">
  
     <prev-img/>
     
  </div>
</template>

<script>

import PrevImg from '@/plugins/prevImg/PrevImg'

export default {
  name: 'App',
  components: {
    PrevImg
  }
}
</script>

<style>
* {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.btn-box {
  text-align: center;
  margin-top: 20px;
}
</style>

静态效果

在这里插入图片描述

封装插件

修改PrevImg.vue

为按钮绑定相关的方法，图片的路径，将由外部传递过来

<template>
    <div class="prev-container" v-show="isShow">
        <div class="mask"></div>
        <div class="indicator">
            <i @click="operate('zoomIn')" class="iconfont icon-jiahao1"></i>
            <i @click="operate('zoomOut')" class="iconfont icon-jian"></i>
            <i @click="operate('rotate')" class="iconfont icon-reset"></i>
            <i @click="close" class="iconfont icon-close"></i>
        </div>
        <div class="img-wrapper">
            <img :src="imgPath" :style="imgStyle" alt="">
        </div>
    </div>
</template>

<script>

export default {
    name: 'PrevImg',
    components: {
    },
    data() {
        return {
            isShow: false,
            imgPath: '',
            transform: {
                rotate: 0,
                scale: 1
            }
        }
    },
    computed:{
        imgStyle() {
            let {rotate, scale} = this.transform
            return {
                transform: `scale(${scale}) rotate(${rotate}deg)`
            }
        }
    },
    methods: {
        open({url}) {
            this.isShow = true
            this.imgPath = url
        },
        close() {
            console.log('object');
            this.isShow = false
        },
        operate(command) {
            if(command == 'zoomIn') {
                this.transform.scale += 0.04
            } else if(command == 'zoomOut') {
                this.transform.scale -= 0.04
            } else if(command == 'rotate') {
                this.transform.rotate += 90
            } 
        }
    }
}
</script>

<style lang="scss">
    .prev-container {
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;

        .mask {
            position: absolute;
            background-color: rgba(0,0,0,.3);
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .indicator {
            display: flex;
            justify-content: flex-end;
            padding: 20px;
            z-index: 100;
            i {
                padding: 10px;
                background-color: rgba(255,255,255,.3);
                border-radius: 50%;
                margin: 0 5px;
                cursor: pointer;
            }
        }

        .img-wrapper {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;

            display: flex;
            align-items: center;
            justify-content: center;
            img {
                max-height: 100%;
                max-width: 80%;
                transition: all 0.5s;
            }
        }
    }
</style>

定义插件逻辑

import PrevImg from '@/plugins/prevImg/PrevImg'

export default {

    install(Vue, options) {

        let PrevImgConstructor = Vue.extend(PrevImg)
        
        let instance = new PrevImgConstructor()
        
        /* 这里会打印dom */
        console.log('instance', instance.$mount().$el);// instance <div class="prev-container" style="display: none;">...</div>
        
        /* 把组件转换成了dom，插入到了body中  */
        document.body.appendChild(instance.$mount().$el) 

        let opts = {
            open(url) {
            	// 调用组件实例上定义的方法
                instance.open({url})
            },
            close() {
                instance.close()
            }
        }

		// 挂载到vue组件实例上
        Vue.prototype.$prevImg = opts
    }
}

main.js中应用此插件

import Vue from 'vue'
import App from './App.vue'

import '@/assets/iconfont/iconfont.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import prevImg from './plugins/prevImg';

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.use(prevImg)

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue中使用此插件

<template>
  <div id="app">

    <div class="btn-box">
      <el-button @click="preview">打开预览</el-button>
    </div>

  </div>
</template>

<script>
import img1 from '@/static/images/1.jpg'
import img2 from '@/static/images/2.jpg'
import img3 from '@/static/images/3.jpg'
import img4 from '@/static/images/4.png'
import img5 from '@/static/images/5.png'

export default {
  name: 'App',
  components: {
  },
  methods: {
    preview() {
      
      // 原本测试的是把PrevImg.vue组件给引进来, 直接调用子组件的方法使用, 但
      // 是没想到插件还能这么玩的, 感觉那种方式会更好
      // this.$refs.prevImgRef.open()

      this.$prevImg.open(img4)
    }
  }
}
</script>

<style>
* {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.btn-box {
  text-align: center;
  margin-top: 20px;
}
</style>

在这里插入图片描述

图片预览列表

在这里插入图片描述

修改App.vue

<template>
  <div id="app">

    <div class="btn-box">
      <el-button @click="preview">打开预览</el-button>
    </div>

  </div>
</template>

<script>
import img1 from '@/static/images/1.jpg'
import img2 from '@/static/images/2.jpg'
import img3 from '@/static/images/3.jpg'
import img4 from '@/static/images/4.png'

export default {
  name: 'App',
  components: {
  },
  methods: {
    preview() {

      // this.$refs.prevImgRef.open()

      this.$prevImg.open(0,[img1,img2,img3,img4])
    }
  }
}
</script>

<style>
* {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.btn-box {
  text-align: center;
  margin-top: 20px;
}
</style>

修改插件逻辑

import PrevImg from '@/plugins/prevImg/PrevImg'
export default {
    install(Vue, options) {

        let PrevImgConstructor = Vue.extend(PrevImg)
        let instance = new PrevImgConstructor()
        /* 这里会打印dom */
        console.log('instance', instance.$mount().$el);// instance <div class="prev-container" style="display: none;">...</div>
        
        /* 把组件转换成了dom，插入到了body中  */
        document.body.appendChild(instance.$mount().$el) 

        let opts = {
            open(imgIdx,imgPaths) {
                instance.open({imgIdx,imgPaths})
            },
            close() {
                instance.close()
            }
        }

        Vue.prototype.$prevImg = opts
    }
}

修改PrevImg.vue

<template>
    <div class="prev-container" v-show="isShow">
        <div class="mask"></div>
        <div class="indicator">
            <i @click="operate('zoomIn')" class="iconfont icon-jiahao1"></i>
            <i @click="operate('zoomOut')" class="iconfont icon-jian"></i>
            <i @click="operate('rotate')" class="iconfont icon-reset"></i>
            <i @click="close" class="iconfont icon-close"></i>
        </div>
        <div :class="['prev-next', 'left', { 'pointer-allowd': isPrev }]" @click="operate('left')">
            <i class="iconfont icon-houtuishangyige"></i>
        </div>
        <div :class="['prev-next', 'right', { 'pointer-allowd': isNext }]" @click="operate('right')">
            <i class="iconfont icon-qianjinxiayige"></i>
        </div>
        <div ref="imgWrapper" :class="['img-wrapper']">
            <img :src="imgPaths[imgIdx]" :style="imgStyle" alt="">
        </div>
    </div>
</template>

<script>



export default {
    name: 'PrevImg',
    components: {
    },
    data() {
        return {
            isShow: false,
            imgIdx: 0,
            imgPaths: [],
            transform: {
                rotate: 0,
                scale: 1
            },
            enterAniClass: '',
        }
    },
    computed: {
        imgStyle() {
            let { rotate, scale } = this.transform
            return {
                transform: `scale(${scale}) rotate(${rotate}deg)`
            }
        },
        isNext() {
            return this.imgIdx != this.imgPaths.length - 1
        },
        isPrev() {
            return this.imgIdx != 0
        },
    },
    mounted() {
        this.$refs['imgWrapper'].addEventListener('webkitAnimationEnd', (e) => {
            console.log('动画停止了');
            this.enterAniClass = ''
        })
    },
    methods: {
        open({ imgIdx, imgPaths }) {
            this.isShow = true
            this.imgIdx = imgIdx
            this.imgPaths = imgPaths
        },
        close() {
            console.log('object');
            this.isShow = false
            this.transform = {
                rotate: 0,
                scale: 1
            }
        },
        operate(command) {
            if (command == 'zoomIn') {
                this.transform.scale += 0.04
            } else if (command == 'zoomOut') {
                this.transform.scale -= 0.04
            } else if (command == 'rotate') {
                this.transform.rotate += 90
            } else {
                this.transform = {
                    rotate: 0,
                    scale: 1
                }
                if (command == 'left') {
                if (this.imgIdx == 0) {
                    return
                }
                this.imgIdx = this.imgIdx - 1
                } else if (command == 'right') {
                    if (this.imgIdx == this.imgPaths.length - 1) {
                        return
                    }
                    this.imgIdx = this.imgIdx + 1
                }
                
            }
        }
    }
}
</script>

<style lang="scss">
.prev-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .mask {
        position: absolute;
        background-color: rgba(0, 0, 0, .3);
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .pointer-allowd {
        cursor: pointer !important;
    }

    .prev-next {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, .3);
        text-align: center;
        line-height: 36px;
        cursor: not-allowed;

        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;

        z-index: 2000;
    }

    .left {
        left: 30px;
    }

    .right {
        right: 30px;
    }

    .indicator {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
        z-index: 100;

        i {
            padding: 10px;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
    }

    .img-wrapper {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        display: flex;
        align-items: center;
        justify-content: center;

        img {
            max-height: 100%;
            max-width: 80%;
            transition: all 0.5s;
        }
    }
}

</style>
ps酷教程
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Vue2开发一个图片预览组件，支持多图切换、缩放旋转、鼠标滚轮、键盘按键、拖动等等操作
Web_boom的博客
02-20 4555
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
vue查看图片插件专门给pc电脑端用的查看图片插件
08-12
vue查看图片插件，专门给pc电脑端用的查看图片插件 Vue view picture plugin, dedicated to view the picture plugin for pc computer
【vue-preview 图片预览插件】
Suger的博客
12-22 1076
1.安装 npm i vue-preview -S 2.在main.js文件中导入该组件，并挂载到Vue身上 import VuePreview from 'vue-preview'; Vue.use(VuePreview); 3.在组件中使用它 <template> <div class="thumbs"> <vue-preview :slides="thumbsList" class="imgPrev"></vue-preview&g
vue2使用ant Design时需要图片预览
最新发布
m0_69617351的博客
05-17 299
我看了ant Design 1.x版本中没有图片预览功能，别的都有，歧视vue2是吧！于是呢，我就找呀找呀找到viewer,发现还挺好用的。的话，会打开新页面去查看图片，好像有点low。只需要在图片外面套一个viewer标签就可以。然后配置一个images。
vue3 开发一个图片预览插件
baidu_41601048的博客
07-28 3955
vue3实现图片预览插件开发
基于Vue2实现的文件在线预览 file-viewer使用指南
wybaby168的博客
02-28 6027
本项目是本人基于实际工作共享的第一个小项目，诞生于2022年上旬。目前实现了基本格式的预览。后续计划支持vue3 + vite，并持续优化pptx和word模块。
vue 移动端预览v-viewer插件，支持查看图片支持 翻转 查看 放大 缩小 翻转 播放等功能
qq_32555123的博客
10-30 2048
【代码】vue 移动端预览v-viewer插件，支持查看图片支持 翻转 查看 放大 缩小 翻转 播放等功能。
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
一个移动端专用的Vue2图片预览插件
08-12
Vue2图片预览插件是针对移动端应用设计的，它利用Vue.js框架的强大功能，为用户提供了一种便捷、高效的方式来进行图片预览。Vue.js是一个轻量级的前端JavaScript框架，以其组件化、易上手的特性在开发界受到广泛欢迎...
Vue.js图片预览插件使用详解
10-18
本文主要讲解了一款名为 "vue-picture-preview-extend" 的Vue.js 图片预览插件的使用方法。 首先，要安装这个插件，你可以通过npm命令行工具执行以下命令： ```bash npm install --save vue-picture-preview-...
基于Vue2x的图片预览插件的示例代码
12-01
本文介绍了基于Vue2x的图片预览插件的示例代码，分享给大家，具体如下： 先来看下Demo LiveDemo 关于开发Vue插件的几种方式 （具体请移步官网）Vue官网 MyPlugin.install = function (Vue, options) { // 1. ...
vue组件js图片查看点击预览大图并下载高清大图到本地
08-12
vue 2.5.2 版本 vue组件 实现点击预览大图功能，点击下载图片功能（不兼容IE，适用于PC端） 内部代码可实现点击图片旋转效果，在本处无用，故注释掉，如有需要可打开调整.
vue实现图片上传预览功能
12-29
本文实例为大家分享了vue实现图片上传预览的具体代码，供大家参考，具体内容如下 效果图 html结构 <!--点击上传按钮--> <h5
img-vuer:An Mobile-First image viewer for Vue2 一个移动端优先的 Vue2 图片预览插件
05-17
img-vuer Vue2的Mobile-First图像查看器 :female_sign:‍:female_sign: 易于使用 :backhand_index_pointing_right: 滑动手势 :magnifying_glass_tilted_left: 缩放手势V0.11.0现在可以使用缩略图了〜 按下物理后退...
vue element 多图片组合预览
梦寻汝的博客
08-14 659
data中定义变量：limagePreviewArn。父组件中引用子组件preview-image。定义组件：preview-image。
Viewer.js 图片预览插件使用
qq_23211463的博客
06-14 3190
Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样，但代码不一样，不能通用。：如果您觉得文章对您有帮助，可以点击文章右下角。Viewer.js 是一款强大的图片查看器。登录后才能查看或发表评论，立即。：本博客所有文章除特别声明外，均采用。Viewer.js 图片预览插件使用。：评论和私信会在第一时间回复。您的鼓励是博主的最大动力！-- 单张图片 -->-- 多张图片 -->`在这里插入代码片`
Windows系统webp图片预览插件
独码乐，不如众码乐，乐享其中
09-16 2658
Windows WebP 编解码组件(WebP Codec for Windows)是一款使用 libvpx 库构建的编解码组件。它整合了 Windows图像处理组件 (WIC) 所定义的界面，为 Windows XP SP 3、Windows Vista 与 Windows 7 操作系统提供 WebP支持。
Vue常用插件汇总
2401_84150191的博客
04-13 1593
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取[外链图片转存中…(img-wmj3LHAs-1712977961250)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-uMrKd7zw-1712977961251)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
vue实现图片预览功能，提高你的开发效率
在写作的路上持续输出。
02-22 3038
vue实现图片预览功能，你知道了吗？
vue预览base64图片
03-08
在Vue中，可以使用`<img>`标签来预览Base64图片。首先，你需要将Base64图片数据绑定到Vue组件的数据属性上，然后在模板中使用`<img>`标签来显示该属性。 以下是一个简单的示例代码： ```html <template> <div> <img :src="base64Image" alt="Preview"> </div> </template> <script> export default { data() { return { base64Image: 'data:image/png;base64,iVBORw0KG...' // 这里是你的Base64图片数据 }; } }; </script> ``` 在上面的代码中，`base64Image`是一个Vue组件的数据属性，它存储了Base64图片的数据。然后，在模板中使用`:src`绑定指令将`base64Image`绑定到`<img>`标签的`src`属性上，这样就可以预览Base64图片了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值