Vue实现图片拖动、放大、缩小，拖动不影响编辑

在前端开发中，我们经常需要实现图片拖动、放大、缩小的功能。在Vue中，我们可以通过封装组件和使用自定义指令来轻松实现这些功能。

1. 封装组件

首先，我们需要创建一个Vue组件来封装图片拖动、放大、缩小的功能。我们可以使用以下代码来创建组件：

import Vue from 'vue';

export default {
  template: `
    <div>
      <img :src="src" @dragstart="dragstart" @dragend="dragend" @mousemove="mousemove" />
    </div>
  `,
  data() {
    return {
      src: '',
      isDragging: false,
      startX: 0,
      startY: 0,
      clientX: 0,
      clientY: 0
    }
  },
  methods: {
    dragstart(e) {
      e.preventDefault();
      this.isDragging = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
    },
    dragend(e) {
      e.preventDefault();
      this.isDragging = false;
    },
    mousemove(e) {
      e.preventDefault();
      if (this.isDragging) {
        this.clientX = e.clientX;
        this.clientY = e.clientY;
        this.src = this.src.replace(/(\d+)x(\d+)/, `${this.clientX - this.startX + Number($1)}x${this.clientY - this.startY + Number($2)}`);
      }
    }
  }
}

2. 使用自定义指令

接下来，我们需要创建一个自定义指令来实现图片的编辑功能。我们可以使用以下代码来创建指令：

import Vue from 'vue';

Vue.directive('editable', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const input = document.createElement('input');
      input.type = 'text';
      input.value = binding.value;
      input.addEventListener('blur', () => {
        binding.value = input.value;
        el.removeChild(input);
      });
      el.appendChild(input);
      input.focus();
    });
  }
});

3. 使用组件和指令

现在，我们可以将组件和指令组合起来，在我们的Vue应用程序中实现图片拖动、放大、缩小和编辑的功能。我们可以使用以下代码来实现：

<template>
  <div>
    <draggable-image :src="src" v-editable="src" />
  </div>
</template>

<script>
import DraggableImage from './DraggableImage.vue';

export default {
  components: {
    DraggableImage
  },
  data() {
    return {
      src: 'https://example.com/image.png'
    }
  }
}
</script>

通过以上步骤，我们就可以在Vue中实现图片拖动、放大、缩小和编辑的功能。这些功能可以帮助我们在前端开发中实现更加丰富的交互效果。