Vue イメージ ドラッグ アンド ドロップ ズーム コンポーネントの使用方法の詳細な説明

<ドキュメント>
  画像コンポーネント - ユーザーはズームイン、ズームアウト、ドラッグします</doc>
<テンプレート>
  <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"
      スタイル="位置: 絶対;上: 2px;左: 2px;z-index: 999;"></el-button>
    <el-button size='mini' @click="toSmallChange" icon="el-icon-zoom-out"
      スタイル="位置: 絶対;上: 2px;左: 40px;z-index: 999;"></el-button>
    <img id="img" :src="src" alt="" @mousedown.prevent="dropImage" :style="{transform:'scale('+multiples+')'}">
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    プロパティ: ['src'],
    データ（） {
      戻る {
        倍数: 1,
        odiv: ヌル、
      }
    },
    マウント() {
      this.dropImage()
    },
    時計：
      src(新しい値、古い値) {
        this.multiples = 1
        if (this.odiv !== null) {
          this.odiv.style.left = '0px';
          this.odiv.style.top = '0px';
        }
      },
    },
    メソッド: {
      ビッグチェンジ() {
        （this.multiples >= 2）の場合{
          戻る;
        }
        this.multiples += 0.25;
      },
      //縮小toSmallChange() {
        （this.multiples <= 1）の場合{
          戻る;
        }
        this.multiples -= 0.25;
      },
      // ドラッグドロップイメージ(e) {
        e === nullの場合{
          戻る
        }
        this.odiv = e.target; // ターゲット要素を取得します // 要素に対するマウスの位置を計算します let disX = e.clientX - this.odiv.offsetLeft;
        disY = e.clientY - this.odiv.offsetTop とします。
        document.onmousemove = (e) => { // マウスが押されて移動されたイベント // 要素に対するマウスの位置をマウスの位置から減算して、要素の位置を取得します。let left = e.clientX - disX;
          top = e.clientY - disY とします。

          //要素の位置を positionX と positionY にバインドします。this.positionX = top;
          this.positionY = 左;

          //現在の要素を移動します this.odiv.style.left = left + 'px';
          this.odiv.style.top = top + 'px';
        };
        ドキュメント.onmouseup = (e) => {
          ドキュメント.onmousemove = null;
          ドキュメント.onmouseup = null;
        };
      },
    }
  }
</スクリプト>
<スタイルスコープ>
  画像 {
    幅: 100%;
    位置: 相対的;
  }
</スタイル>