vue图片拖拉转放大缩小组件使用详解

2024-07-29 09:40:56

vue图片拖拉转放大缩小组件的具体使用方法，供大家参考，具体内容如下

<doc>
  图片组件 - 用户放大缩小以及拖拽
</doc>
<template>
  <div style="width: 100%;position: relative;overflow: hidden;text-align: center;border: 1px solid #f1f2f3;">
    <el-button size='mini' @click="toBIgChange" icon="el-icon-zoom-in"
      style="position: absolute;top: 2px ;left: 2px;z-index: 999;"></el-button>
    <el-button size='mini' @click="toSmallChange" icon="el-icon-zoom-out"
      style="position: absolute;top: 2px ;left: 40px;z-index: 999;"></el-button>
    <img id="img" :src="src" alt="" @mousedown.prevent="dropImage" :style="{transform:'scale('+multiples+')'}">
  </div>
</template>
<script>
  export default {
    props: ['src'],
    data() {
      return {
        multiples: 1,
        odiv: null,
      }
    },
    mounted() {
      this.dropImage()
    },
    watch: {
      src(newValue, oldValue) {
        this.multiples = 1
        if (this.odiv !== null) {
          this.odiv.style.left = '0px';
          this.odiv.style.top = '0px';
        }
      },
    },
    methods: {
      toBIgChange() {
        if (this.multiples >= 2) {
          return;
        }
        this.multiples += 0.25;
      },
      // 缩小
      toSmallChange() {
        if (this.multiples <= 1) {
          return;
        }
        this.multiples -= 0.25;
      },
      // 拖拽
      dropImage(e) {
        if (e === null) {
          return
        }
        this.odiv = e.target;        //获取目标元素
        //算出鼠标相对元素的位置
        let disX = e.clientX - this.odiv.offsetLeft;
        let disY = e.clientY - this.odiv.offsetTop;
        document.onmousemove = (e) => {       //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;

          //绑定元素位置到positionX和positionY上面
          this.positionX = top;
          this.positionY = left;

          //移动当前元素
          this.odiv.style.left = left + 'px';
          this.odiv.style.top = top + 'px';
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },
    }
  }
</script>
<style scoped>
  img {
    width: 100%;
    position: relative;
  }
</style>

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

vue3 父子组件传值详解

现在距离vue3的诞生已经过了很长时间了,笔者也是近期才开始学习vue3.对比vue2来看,vue3在写法发生了不小的变化,最典型的例子就是vue3通过ref,或者reactive实现数据的响应式.因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化咱们先看下vue2中的写法父组件:  <template> <div> <children :title="title" @getChildr
vue中router-view组件的使用详解

在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面例如:下图中通过点击侧边栏不同的组件路由到不同的组件页,而侧边栏和顶部部分是不变的,切换的只是组件页面. 这个时候我们就需要用到路由中的 router-view组件(也叫路由占位符) 了首先我们来到需要切换不同组件页的页面 ,在自己需要的位置添加 router-view组件 Home.vue <template>  <el-header> <div> <
Vue之组件详解

<body> <div id="root"> <h2>{{name}}</h2> <hr> <school></school> <hr> <student></student> <hr>  &
vue组件通信的多种方法详解

目录 1. 父传子 2. 子传父 3. 非父子组件传值 4. vuex 5. refs 6. $children 7. $parent 8. provide & inject 9. $attrs 10. $listeners 总结说起组件通信,可能大家耳熟能详的有以下5种: 1. 父传子父组件通过自定义属性给子组件传值,子组件用props接收 2. 子传父父组件在子组件标签上自定义事件,子组件通过$emit来触发自定义事件,并且可以传递参数 3. 非父子组件传值 eventBus事件总线:
vue components 动态组件详解

目录总结总结数组发生变化时,动态加载相应数据场景:点击不同组件名称,界面显示相应组件步骤一:导入所需组件步骤二:点击 tab 选项卡,将对应组件名添加进数组步骤三:使用动态组件,:is 属性绑定组件名 <div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div
Vue之组件的自定义事件详解

目录总结 <template> <div > <h2>{{msg}}</h2>  <School :getName="getName"/> <Student :getStudentname="getStudentname"/> <!-- 通过父组件给子组件绑定一个自定义事件:实现子给父传递数据
vue图片拖拉转放大缩小组件使用详解

vue图片拖拉转放大缩小组件的具体使用方法,供大家参考,具体内容如下 <doc> 图片组件 - 用户放大缩小以及拖拽 </doc> <template> <div style="width: 100%;position: relative;overflow: hidden;text-align: center;border: 1px solid #f1f2f3;"> <el-button size='mini' @click=&qu
Vue 过渡（动画）transition组件案例详解

Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g
vue移动端城市三级联动组件使用详解

本文实例为大家分享了vue移动端城市三级联动组件的具体代码,供大家参考,具体内容如下先看效果图以下组件代码 <template> <div class="address"> <div class="addressboxbg" @click="cancel"></div> <div class="addressbox"> <p class="text
Vue下拉选择框Select组件使用详解(二)

本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下效果图如下: 下拉组件宽度可自定义设置以下属性: ①下拉组件宽度width属性,默认宽度290 ②placeholder属性 ③是否禁用下拉的disabled属性已预设下拉列表最多8条,超过时滚动显示,具体可自定义调整,如果下拉选项过长省略号显示,鼠标悬浮显示全称,由于业务需求,设置mode属性,区别默认name和value 与 dictKey和dictVal ①创建组件Select.vue <tem
Vue下拉选择框Select组件使用详解(一)

本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下效果图如下: 展开图如下: ①创建组件Select.vue:预设两种主题色,亦可视情况进行自定义修改样式: <template> <div class="m-select-wrap"> <input :class="['u-select-input f16', color === 'blue' ? '' : 'white-color'
jQuery实现的图片点击放大缩小功能案例

本文实例讲述了jQuery实现的图片点击放大缩小功能.分享给大家供大家参考,具体如下: 我们不废话,直接上例子.首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度可能会超出屏幕的高度). 来看css部分代码: <style> /*全屏显示大图*/ .opacityBottom{ width: 100%; height: 100%; posi
vue实现鼠标滑动预览视频封面组件示例详解

目录组件效果组件设计 1.视频截取关键帧 2.鼠标移入封面时显示对应关键帧 3.视频和封面的状态切换功能实现 1.视频截取关键帧图片列表 1.1 截取指定帧 1.2 截取stepNums张关键帧图片 2.鼠标移入封面时显示对应关键帧 2.1 鼠标移动事件监听 2.2 鼠标移出事件监听 3.视频和封面的状态切换 3.1 播放视频 3.2 视频暂停组件使用组件库引用组件效果 https://www.jb51.net/Special/926.htm 组件设计我们首先应该要对组件进行一个简
通过npm引用的vue组件使用详解

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创
vue实现简单表格组件实例详解

本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件按钮组件等等,vue三大核心组件路由状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说第一步:构建一个简单的vue项目,老规矩
Vue 短信验证码组件开发详解

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn

vue图片拖拉转放大缩小组件使用详解

相关推荐

随机推荐