Vueはズームイン、ズームアウト、ドラッグ機能を実装しています

'vue' から Vue をインポートします。
'../assets/images/bigChange.png' から bigPic をインポートします。
// v-dialogDrag: ポップアップウィンドウのドラッグ属性 Vue.directive('dialogDrag', {
  bind(el, バインディング, vnode, oldVnode) {
    //箇条書きボックスの最小の幅と高さ let minWidth = 400; 
    minHeight を 300 とします。 
    // 初期非フルスクリーン let isFullScreen = false; 
    //現在の幅と高さ let nowWidth = 0; 
    nowHight = 0 とします。 
    //現在の上端の高さ let nowMarginTop = 0; 
    //ポップアップ ボックスのヘッダーを取得します (この部分はダブルクリックすると全画面表示になります) 
    dialogHeaderEl は el.querySelector('.el-dialog__header') です。 
    //ポップアップウィンドウ const dragDom = el.querySelector('.el-dialog'); 
    // 全画面ボタン dialogHeaderEl.insertAdjacentHTML('beforeEnd', '<div class="bigbtn"><div class="changeBig"></div><div class="changeSmall"></div></div>'); 
    const bigBtn = el.querySelector('.bigbtn'); 
    定数 changeBig = el.querySelector('.changeBig'); 
    定数 changeSmall = el.querySelector('.changeSmall');
    //ポップアップ ウィンドウに overflow auto を追加します。そうしないと、ダイアログが縮小されたときにボックス内のラベルがダイアログを越える可能性があります。 
    dragDom.style.overflow = "自動"; 
    //選択したヘッダーのテキスト効果をクリアします//dialogHeaderEl.onselectstart = new Function("return false"); 
    // ドラッグ可能なカーソルをヘッドに追加します 
    dialogHeaderEl.style.cursor = '移動'; 
    // 元の属性を取得します (例: dom element.currentStyle firefox google window.getComputedStyle(dom element, null); 
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); 
    下へ移動します = (e) => {
      // マウスを押すと、現在の要素と表示領域間の距離が計算されます。const disX = e.clientX - dialogHeaderEl.offsetLeft; 
      const disY = e.clientY - dialogHeaderEl.offsetTop; 
      // 置換する px 正規表現で値を取得します。let styL, styT;
      // IEでは、最初に取得される値はコンポーネント自身の50%であり、その値は移動後にpxに割り当てられることに注意してください。 
      （sty.left.includes('%')の場合）{
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100); 
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
 
      } それ以外 { 
        styL = +sty.left.replace(/\px/g, '');
        styT = +sty.top.replace(/\px/g, '');
 
      };
 
      document.onmousemove = 関数 (e) {
        // イベント委任を通じて移動距離を計算します。const l = e.clientX - disX;
        定数 t = e.clientY - disY; 
        // 現在の要素を移動する dragDom.style.left = `${l + styL}px`;
        dragDom.style.top = `${t + styT}px`;
 
        //現在の位置を渡す //binding.value({x:e.pageX,y:e.pageY})
 
      };
 
      document.onmouseup = 関数 (e) { 
        ドキュメント.onmousemove = null; 
        ドキュメント.onmouseup = null;
 
      };
 
    }
 
    dialogHeaderEl.onmousedown = 下へ移動します。
 
    //ヘッダーをダブルクリックして全画面表示にします bigBtn.onclick = (e) => {
      フルスクリーンの場合 == false { 
        changeBig.style.display = 'なし'; 
        changeSmall.style.display = 'ブロック';
        nowHight = dragDom.clientHeight;
        現在の幅 = dragDom.clientWidth; 
        nowMarginTop = dragDom.style.marginTop; 
        ドラッグアンドドロップ 
        ドラッグアンドドロップスタイル 
        ドラッグDom.style.height = "100VH";
        ドラッグDom.style.width = "100VW"; 
        ドラッグアンドドロップスタイル 
        フルスクリーン = true; 
        dialogHeaderEl.style.cursor = 'initial'; 
        dialogHeaderEl.onmousedown = null;
 
      } それ以外 {
 
        changeBig.style.display = 'ブロック'; 
        changeSmall.style.display = 'なし';
        dragDom.style.height = "自動"; 
        dragDom.style.width = nowWidth + 'px'; 
        dragDom.style.marginTop = nowMarginTop; 
        フルスクリーン = false; 
        dialogHeaderEl.style.cursor = '移動';
 
        dialogHeaderEl.onmousedown = 下へ移動します。
 
      }
 
    }
 
    dragDom.onmousemove = 関数 (e) {
      // console.log(dialogHeaderEl、dragDom.querySelector('.el-dialog__body')、123);
      moveE = e; とします。
 
      (e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 || dragDom.offsetLeft + 10 > e.clientX) の場合 {
         dragDom.style.cursor = 'w-resize';
      } そうでない場合 (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight - 10) { 
        dragDom.style.cursor = 's-resize'; 
      } それ以外 { 
        dragDom.style.cursor = 'デフォルト'; 
        ドラッグDom.onmousedown = null;
 
      }
 
      ドラッグDom.onmousedown = (e) => { 
        定数 clientX = e.clientX; 
        定数 clientY = e.clientY; 
        elW = dragDom.clientWidth とします。 
        elH = dragDom.clientHeight とします。 
        EloffsetLeft を dragDom.offsetLeft とします。
        EloffsetTop を dragDom.offsetTop にします。
        dragDom.style.userSelect = 'なし';
        ELscrollTop を el.scrollTop とします。
 
        //クリックされた位置が先頭かどうかを判断しますif (clientX > EloffsetLeft && clientX < EloffsetLeft + elW && clientY > EloffsetTop && clientY < EloffsetTop + 100) {
 
          // ヘッダーの場合、ここでは何もアクションは実行されません。上記は dialogHeaderEl.onmousedown = moveDown; にバインドされています。
 
        } それ以外 {
 
          document.onmousemove = 関数 (e) {
            e.preventDefault(); // 移動時にデフォルトのイベントを無効にする // マウスの左ドラッグ位置 if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) { 
              //左にドラッグ if (clientX > e.clientX) { 
                dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px';
 
              }
 
              //右にドラッグ if (clientX < e.clientX) { 
                （dragDom.clientWidth < minWidth）の場合{
                } それ以外 {
                dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px';
 
                }
 
              }
 
            }
 
            //右マウスドラッグ位置if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) { 
              //左にドラッグ if (clientX > e.clientX) {
                （dragDom.clientWidth < minWidth）の場合{ 
                } それ以外 { 
                  dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px';
 
                }
 
              }
 
              //右にドラッグ if (clientX < e.clientX) {
 
                dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px';
 
              }
 
            }
 
            //マウスの下ドラッグ位置if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop + clientY < EloffsetTop + elH) {
 
              //上にドラッグ if (clientY > e.clientY) {
                （dragDom.clientHeight < minHeight）の場合{
                } それ以外 {
 
                  dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px';
 
                }
 
              }
 
              //下にドラッグ if (clientY < e.clientY) { 
                dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px';
 
              }
 
            }
 
          };
 
          //ストレッチ終了 document.onmouseup = function (e) { 
            ドキュメント.onmousemove = null; 
            document.onmouseup = null;
 
          };
 
        }
 
      }
 
    }
  }
})

'./utils/directives.js' をインポートします。

<el-ダイアログ
     v-ダイアログドラッグ
      title="ユーザー情報"
      :visible.sync="ダイアログを表示"
      幅="50%"
      :クリック時に閉じるモーダル="false"
      :before-close="ハンドルを閉じる">
      <div>
        <el-table :data="phoneData" スタイル="width: 100%">
          <el-table-column prop="fullName" label="名前" width="100"></el-table-column>
          <el-table-column prop="sex" label="性別" width="80"></el-table-column>
          <el-table-column prop="idCard" label="ID番号" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="mobile" label="連絡先番号" width="150"></el-table-column>
          <el-table-column prop="censusAreaName" label="世帯登録区分" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="censusAddr" label="世帯登録住所" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="120" fixed="右" align="中央">
            <テンプレート スロット スコープ="{行}">
              <span @click="chooseInfor(row.id)" class="table-btn">選択</span>
            </テンプレート>
          </el-table-column>
        </el-table>
      </div>
</el-ダイアログ>

.changeBig{
    幅: 20px;
    高さ: 20px;
    背景: url("../assets/images/bigChange.png") 繰り返しなし 中央;
    背景サイズ: 100% 100%;
    カーソル: ポインタ;
    位置: 絶対;
    上: 14px;
    右: 60px;
}
.changeSmall {
    幅: 20px;
    高さ: 20px;
    背景: url("../assets/images/smallChange.png") 繰り返しなし 中央;
    背景サイズ: 100% 100%;
    カーソル: ポインタ;
    位置: 絶対;
    上: 14px;
    右: 60px;
    表示: なし;
}