Vue image drag, zoom in, zoom out, drag does not affect editing

Packaged into components, can be directly in the need of the page call, using custom instructions to achieve drag

<template>
  <div class="drag">
    <div v-show="show" v-drag class="content" style="width:500px; z-index: 20">
      <img
        id="target"
        ref="element"
        class="target"
        style="width: 100%;"
        :style="{ transform: 'scale(' + multiples + ')' + 'rotate(' + current + 'deg)' }"
        :src="src"
      >
    </div>
    <div v-show="show" class="button">
      <el-button size="mini" type="success" @click="handleClose">Shut down</el-button>
      <el-button size="mini" type="success" @click="handlerotate">rotating</el-button>
      <el-button size="mini" type="success" @click="handlebig">amplification</el-button>
      <el-button size="mini" type="success" @click="handleReduce">narrow</el-button>
    </div>
  </div>
</template>
<script>
export default {
  directives: {
    drag(el) {
      const oDiv = el
      oDiv.onmousedown = function(e) {
        const disX = e.clientX - oDiv.offsetLeft
        const disY = e.clientY - oDiv.offsetTop
        document.onmousemove = function(e) {
          const l = e.clientX - disX
          const t = e.clientY - disY
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'
        }
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
        }
        return false}}},props: {
    shows: {
      type: Boolean.default: null
    },
    url: {
      type: String || Number.default: null}},data() {
    return {
      dd: ' '.inout: ' '.show: ' '.current: 0.name: ' '.src: ' '.multiples: 1}},watch: {
    shows() {
      this.show = this.shows
      if (this.shows) {
        this.src = this.url
        this.$nextTick(() = > {
          if (this.$refs.element.offsetHeight > 600) {
            this.multiples = '0.2'}})}}},methods: {
    handlerotate() {
      this.current = (this.current + 90) % 360
    },
    handlebig() {
      this.multiples = Number(this.multiples) + 0.1
    },
    handleReduce() {
      this.multiples = Number(this.multiples) - 0.1
    },
    handleClose() {
      this.$emit('update:shows'.false)}}}</script>
<style>
.drag {
  position: relative;
  height: 100%;
}
.content {
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  /* top: 50%; * /
  cursor: pointer;
}
.target {
 text-align: center;
 display: inline-block;
  -webkit-box-shadow: # 666 0px 0px 10px;
   -moz-box-shadow: # 666 0px 0px 10px;
   box-shadow: # 666 0px 0px 10px;
   background: #EEFF99;
}
.button {
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 95%;
  z-index: 200;
}
</style>

Copy the code