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

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

この記事では、参考までに、ズームインとズームアウトのドラッグ機能を実現するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。

クリックすると全画面に拡大し、もう一度クリックすると元のサイズに縮小します。このポップアップは要素ダイアログに基づいています。

1. utilsフォルダの下に新しいdirectives.jsを作成します(パッケージ化されており、直接使用できます)

'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;
 
          };
 
        }
 
      }
 
    }
  }
})

2. main.jsにインポートする

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

3. ページはカスタム属性名(v-dialogDrag)で直接使用されます。

<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-ダイアログ>

4. CSSも提供されています(directives.jsのラベル要素に注意してください)

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

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueコンポーネントを使用して画像のドラッグとズーム機能を実現する
  • Vue は画像プレビュー効果の例 (ズームイン、ズームアウト、ドラッグ) を実装します
  • Vue イメージ ドラッグ アンド ドロップ ズーム コンポーネントの使用方法の詳細な説明
  • Vue 画像のスケーリングの実装 - コンポーネントのドラッグ

<<:  Linux と最もよく使用されるコマンドの紹介 (習得は簡単ですが、問題の 95% 以上を解決できます)

>>:  Ubuntu16.04 インストール mysql5.7.22 グラフィックチュートリアル

推薦する

win2008 で mysql8.0.11 を mysql8.0.17 にアップグレードする詳細な手順

アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...

HTML ページ内の js および css ファイルのキャッシュを自動的にクリーンアップします (バージョン番号を自動的に追加します)

Web プロジェクトの開発プロセスでは、CSS ファイルや JS ファイルを参照することがよくあり...

CMDコマンドを使用してMySqlデータベースを操作する方法の詳細な説明

まず、mysqlサービスを開始および停止します ネットストップmysql ネットスタートMySQL ...

NavicatがMySQL8.0.11に接続するとエラー2059が発生する

間違いNavicat Premium を使用して MySQL に接続すると、次のエラーが発生します。...

Windows で virtualenv を使用して仮想環境を作成する方法 (2 つの方法)

オペレーティング システム: windows10_x64 Python バージョン: 3.6.8仮想...

Vue+SSMは画像アップロードのプレビュー効果を実現します

現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードする...

MySQLコンテナ間のレプリケーション構成例の詳細な説明

背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...

入力テキストボックスの長さをコンテンツに応じて変更する方法

初め:コードをコピーコードは次のとおりです。 <input type="text&q...

JavaScript は最大値と最小値のアルゴリズムを通じて AI 三目並べゲームを実装します

では、早速スクリーンショットを実行してみましょう。黒い駒はプレイヤーの位置、赤い駒はコンピュータの位...

CSSは下部のタップバー機能を実装します

現在多くの携帯電話には、下部のタブバーを切り替える機能があります。私も最近、同様の機能を見つけました...

ElementUI の this.$notify.close() 呼び出しが機能しない問題の解決方法

目次要件の説明問題の説明問題分析問題解決質問の拡張要件の説明このプロジェクトでは、まずユーザーが質問...

Firefoxでリンクをクリックしたときに点線の枠線を削除する方法

今日、ブラウザの互換性の問題にいくつか遭遇しました。そのうちの 1 つは奇妙に感じました。Firef...

MySQL 8.0.22 のインストールと設定のグラフィックチュートリアル

MySQL8.0.22のインストールと設定(超詳細)参考までに、具体的な内容は次のとおりです。みなさ...

Vueはコンピュータカメラを呼び出して写真機能を実現します

この記事の例では、コンピュータカメラを呼び出して写真機能を実現するためのvueの具体的なコードを参考...