Vue画像拡大鏡コンポーネントのカプセル化と使用方法の詳細な説明

<テンプレート>
  <div>
    <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)">
      <div id="small"> // 小さい画像とマスク レイヤー コンテナー<div id="float"></div> // マスク レイヤー<img :src="item" id="smallimg"> // 拡大する画像</div>
    </div>
    <div id="big">
      <img :src="item"> //拡大画像</div>
  </div>
</テンプレート>

<スクリプト>
  var float、smallimg、big、bigImg、small、float_maxJL_t、float_maxJL_l、bigImg_maxJL_t、bigImg_maxJL_l;

  エクスポートデフォルト{
    小道具: {
      アイテム：
        タイプ: 文字列
      }
    },
    データ（） {
     戻る {
     }
    }, 

    マウントされた(){
      float = document.getElementById("float"); // 左のマスク レイヤー smallimg = document.getElementById("smallimg"); // 左側の小さい画像 big = document.getElementById("big"); // 右側の表示領域 bigImg = big.getElementsByTagName("img")[0]; // 右側の大きい画像 small = document.getElementById("small");// 左側のコンテナー // 右側の表示領域の幅と高さを取得します var bigW = big.clientWidth;
      var bigH = big.clientHeight;

      //右側の大きな画像の幅と高さ var bigImgW = bigImg.offsetWidth;
      var bigImgH = bigImg.offsetHeight;

      // 左側の小さい画像の幅と高さ var smallImgW = smallimg.offsetWidth;
      var smallImgH = smallimg.offsetHeight;

      //左マスクレイヤーの幅と高さ float.style.width = bigW/bigImgW * smallImgW + "px"; //175
      float.style.height = bigH/bigImgH * smallImgH/3*2 + "px";     

      //マスクレイヤーの最大移動距離 float_maxJL_l = small.clientWidth -float.offsetWidth-10;
      float_maxJL_t = small.clientHeight - float.offsetHeight - 5;

      // 右の画像が移動する最大距離 bigImg_maxJL_l = bigImg.clientWidth - big.offsetWidth;
      bigImg_maxJL_t = bigImg.clientHeight - big.offsetHeight;

      big.style.display = "なし";
      float.style.visibility = "hidden"; //マウスが左側の領域に移動していないため、マスクレイヤーと右側の大きな画像は表示されません},

    メソッド: {
    //マウスを左側の領域に移動して、マスクレイヤーと右側の大きな画像を表示します: function () {
        float.style.visibility = "表示可能";
        big.style.visibility = "表示可能";
        big.style.display = "ブロック";
      }, 

      //マウスを左側の領域から移動して、マスクレイヤーと右側の大きな画像を非表示にします。out: function () {
        float.style.visibility = "非表示";
        big.style.display = "なし";
      }, 

      //マウスが動くと、マスクレイヤーもマウスの動きに合わせて動きます: function (ev) {
        var l = ev.clientX - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY - small.offsetTop - float.offsetHeight/2;

        if( l < 0 ) l = 0; // 左の境界を超えると値は0に設定されます
        if( t < 0 ) t = 0; // 値が上限を超えているため0に設定されます

        if( l > float_maxJL_l ) l = float_maxJL_l; // コンテナー内の移動範囲を制限します if( t > float_maxJL_t ) t = float_maxJL_t;

        //比率を見つける var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

         //マスクレイヤーの移動位置 float.style.left = l + "px";
        float.style.top = t + "px"; 

         //右側の大きな画像の移動位置 bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
      },
    },
  }
</スクリプト>

//css スタイル <style lang="scss" rel="stylesheet/scss" scoped>
  @import 'src/assets/scss/variable.scss';
  #フロート{
    幅: 120ピクセル;
    高さ: 120px;
    position: absolute; //必須背景: $primary;
    境界線: 1px 実線 #ccc;
    不透明度: 0.5;
    カーソル:移動;
  }
  ＃大きい {
    position: absolute; //必須 top: 260px;
    左：37.6%
    幅: 350ピクセル;
    高さ: 500px;
    オーバーフロー: 非表示;
    境界線: 1px 実線 #ccc;
    背景: #ffffff;
    zインデックス: 1;
    可視性: 非表示;
  }
  ＃小さい {
    position: relative; //必須 z-index: 1;
    画像{
      幅:340ピクセル;
      高さ:320px;
    }
  }
  #大きな画像{
    position: absolute; //必須 z-index: 5;
    幅:700ピクセル;
    高さ:700ピクセル;
  }
</スタイル>

移動 = 関数 (ev){
        var scroll = this.getClientHeight(); //現在のインターフェースの移動位置を取得します。 var l = ev.clientX - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY - small.offsetTop - float.offsetHeight/2;

        t=t+scroll; //マスク レイヤーの高さは、それに応じてインターフェイスのスクロール高さに追加される必要があります if( l < 0 ) l = 0;
        t < 0 の場合、t = 0; 

        l が float_maxJL_l より大きい場合、 l は float_maxJL_l となります。
        t が float_maxJL_t より大きい場合、 t は float_maxJL_t となります。

        var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

        float.style.left = l + "px";
        float.style.top = t + "px";

        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
},
//インターフェースのスクロール高さを取得するメソッド getClientHeight: function(){
    var スクロールトップ = 0;
    document.documentElement&&document.documentElement.scrollTop の場合
    {
      scrollTop = document.documentElement.scrollTop;
    }
    そうでない場合(document.body)
    {
      スクロールトップ = document.body.scrollTop;
    }
    scrollTop を返します。
}