vue图片放大与缩小,vue点击图片放大组件

　　这篇文章主要为大家详细介绍了某视频剪辑软件图片拖拉转放大缩小组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　某视频剪辑软件图片拖拉转放大缩小组件的具体使用方法，供大家参考，具体内容如下

　　文件

　　图片组件-用户放大缩小以及拖拽

　　/doc

　　模板

　　div style= width:100%；位置：相对；溢出：隐藏；文本对齐：居中；边框：1px solid # f1f2f 3；

　　El-button size= mini @ click= toBIgChange icon= El-icon-zoom-in

　　style= position:absolute；top:2px；左：2pxz索引：999;/el-button

　　El-button size= mini @ click= toSmallChange icon= El-icon-zoom-out

　　style= position:absolute；top:2px；左：40pxz索引：999;/el-button

　　img id= img :src= src alt= @ mousedown。prevent= drop image :style= { transform: scale( multiples ) }

　　/div

　　/模板

　　脚本

　　导出默认值{

　　道具：[src]，

　　data() {

　　返回{

　　倍数：1,

　　odiv: null，

　　}

　　},

　　已安装(){

　　this.dropImage()

　　},

　　观察：{

　　src(新值，旧值){

　　this.multiples=1

　　如果(this.odiv！==null) {

　　这个。奥迪夫。风格。left= 0px

　　这个。奥迪夫。风格。top= 0px

　　}

　　},

　　},

　　方法：{

　　toBIgChange() {

　　如果(这个。乘法=2){

　　返回；

　　}

　　this .倍数=0.25

　　},

　　//缩小

　　toSmallChange() {

　　如果(这个。乘法=1){

　　返回；

　　}

　　这个。乘法-=0.25；

　　},

　　//拖拽

　　dropImage(e) {

　　if (e===null) {

　　返回

　　}

　　这个。odiv=e . target//获取目标元素

　　//算出鼠标相对元素的位置

　　让disX=e . clientx-this。奥迪夫。向左偏移；

　　让我们看看这个。奥迪夫。offsettop

　　document.onmousemove=(e)={ //鼠标按下并移动的事件

　　//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

　　let left=e . clientx-disX；

　　let top=e . clienty-disY；

　　//绑定元素位置到位置x和位置上面

　　this.positionX=top

　　this.positionY=left

　　//移动当前元素

　　这个。奥迪夫。风格。left=左‘px’；

　　这个。奥迪夫。风格。top=top px

　　};

　　document.onmouseup=(e)={

　　document.onmousemove=null

　　document.onmouseup=null

　　};

　　},

　　}

　　}

　　/脚本

　　样式范围

　　img {

　　宽度：100%;

　　位置：相对；

　　}

　　/风格

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。