elementui+js+vue——实现图片组件的封装

1. 实现图片的放大缩小
2. 实现图片的拖动功能
3. 实现图片的预览

最近同事在写一个关于图片放大缩小拖动的功能，其实不止是图片，只要是在以下组件中的内容，都是可以支持放大缩小拖动的。
功能：

1.鼠标拖动：拖动改变位置
2.鼠标滚动：实现放大缩小功能
3.根据是否有图片，展示三种不同的效果

一：先上效果图：

1.没有内容的时候

2.有一张图片的时候

3.有两张图片的时候

二：分析组件

首先是一个弹层，可以使用el-dialog组件才处理，其次，根据图片的数量，分为 0张图片/1张图片/2张图片等。

三： inc_imgsvg.vue组件的封装

1.html部分的代码

<template><div class="drag-outer"ref="dragWrap":style="'width:'+(imgWidth=='auto'?'calc(50% - 10px)':imgWidth)"@mouseenter="isHover = true"@mouseleave="isHover = isMousedown = false"@mousemove="dragMousemove"><div class="drag-inner"ref="dragElement"@mousedown="dragMousedown"@mouseup.stop="isMousedown = false"><slot></slot></div></div>
</template>

2.script部分的代码

<script>
export default {name: 'inc_imgsvg',props: {imgWidth: {type:String,default () {return '400px'}},scaleZoom: {type: Object,default () {return {max: 5,min: 0.2}}}},data() {return {isMousedown: false,isHover: false,moveStart: {},translate: {x: 0, y: 0},scale: 1}},methods: {handleScroll(e) {if(this.isHover) {let speed = e.wheelDelta/120if(e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {this.scale+=0.2*speedthis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`}else if(e.wheelDelta < 0 && this.scale > this.scaleZoom.min){this.scale+=0.2*speedthis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`}}},dragMousedown() {this.moveStart.x = event.clientXthis.moveStart.y = event.clientYthis.isMousedown = true},dragMousemove() {if(this.isMousedown) {this.translate.x += (event.clientX - this.moveStart.x) / this.scalethis.translate.y += (event.clientY - this.moveStart.y) / this.scalethis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`this.moveStart.x = event.clientXthis.moveStart.y = event.clientY}}},mounted() {window.addEventListener('mousewheel',this.handleScroll,false)}
}
</script>

3.css部分的代码

<style lang="scss" scoped>
.drag-outer {overflow: hidden;height:500px; float: left;display: flex;background-color:#fff;justify-content: center;align-items: center;.drag-inner {transform-origin: center center;display: flex;justify-content: center;align-items: center;cursor: move;user-select: none;width:100%;height:100%;>* {-webkit-user-drag: none;user-drag: none;}img{object-fit:contain; width:100%; height:100%}}
}
</style>

四：组件的使用

1.弹层的代码——html部分

<template><el-dialog class="boxEDA" title="查看EDA模型信息" :visible.sync="show" width="80%" :before-close="handleClose"><div class="imgs" :class="{no:!showImg}" v-loading="load"><template v-if="showImg"><inc_imgsvg v-if="this.edaInfo.thumbnail" :imgWidth="this.edaInfo.ethumbnail?'auto':'100%'"><img :src="edaInfo.thumbnail" alt=""></inc_imgsvg><inc_imgsvg v-if="this.edaInfo.ethumbnail" :imgWidth="this.edaInfo.thumbnail?'auto':'100%'"><img :src="edaInfo.ethumbnail" alt=""></inc_imgsvg></template><el-empty v-if="!showImg" description="暂无信息"></el-empty></div><p class="note" v-if="showImg">支持鼠标点击拖拽、鼠标滚轮放大缩小操作</p></el-dialog>
</template>

2.弹层的代码——script部分

<script>
import {searchSvc} from "@/api";
import inc_imgsvg from "@/pages/componentDetailCloud/inc_imgsvg";export default {name: "inc_showeda",components: {inc_imgsvg},props:['show','currentId'],data(){return{load:false,pid:'',edaInfo:{},showImg:false,}},mounted() {this.load = true;searchSvc.componentApi.getComponentFindSchById(this.currentId).then(res=>{this.edaInfo = res.data;this.showImg = res.data.thumbnail || res.data.ethumbnail;}).finally(()=>{this.load = false;})},methods: {handleClose() {this.$parent.showEDA = false;},}
}
</script>

3.弹层的代码——css部分

<style scoped lang="scss">
.boxEDA ::v-deep .el-dialog__body{background-color:#eee;.imgs{overflow: hidden; display:flex; justify-content:space-between;}.imgs.no{background-color:#fff; justify-content: center}
}
.note{display: block; padding:1em 0 0 0; margin:0; color:#999; text-align: center}
</style>

完成！！！多多积累，多多收获！！！

element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升相关推荐

photoswipe.js——移动端图片文字放大缩小
指势触控简介 PhotoSwipe 是专为移动触摸设备设计的相册/画廊,支持触控网页上所有内容放大缩小,兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/Jav ...
iOS 仿淘宝实现商品规格图片的放大缩小功能
刚好最近在做个商城项目,甲方爸爸说咱们要求不高,你就照着淘宝来就好,额~~~~ 好吧,咱就不吐槽了,直接开撸吧,惯例先上一下效果图需求以及思路我们要实现的功能有如下几个: 图片的全屏查看以及保存 ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
Qt实现长图片的放大缩小以及动态显示
这篇文章是在这个基础上进行讨论的谈一谈分别利用opencv.Qt.matlab动态显示图片的实现其实就是想找一种更加合适的方法进行图片的放大缩小以及动态显示. 这个是效果图我把项目命名为Qtmli ...
jquery 实现点击图片居住放大缩小
jquery 实现点击图片居住放大缩小该功能是基于jquery实现的,所以第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调 ...
android 自由缩放图片大小,android Matrix实现图片随意放大缩小或拖动
本文实例为大家分享了android Matrix图片随意放大缩小和拖动的具体代码,供大家参考,具体内容如下 step1:新建一个项目DragAndZoom,并准备一张照片放在res/drawable- ...
小程序富文本提取图片可放大缩小
小程序富文本提取图片可放大缩小启发: step1 step2 step3 step4 step5 最后启发: 因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不太好找,就写了篇 ...
vue动效：放大缩小与上下移动
vue动效:放大缩小与上下移动标题: Vue动效技巧:流畅放大缩小与优雅上下移动在现代Web开发中,Vue.js已经成为了最受欢迎的JavaScript框架之一.它的简洁性和灵活性使得开发人员能够 ...
html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...

element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升

elementui+js+vue——实现图片组件的封装

一：先上效果图：

1.没有内容的时候

2.有一张图片的时候

3.有两张图片的时候

二：分析组件

三： inc_imgsvg.vue组件的封装

1.html部分的代码

2.script部分的代码

3.css部分的代码

四：组件的使用

1.弹层的代码——html部分

2.弹层的代码——script部分

3.弹层的代码——css部分

element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升相关推荐

最新文章

热门文章