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 グラフィックチュートリアル

推薦する

MySQL 5.7.20 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事では、MySQL 5.7.20のインストールと設定方法を参考までに紹介します。具体的な内容は...

mysql スケジュールタスク (イベント イベント) の詳細な説明

1. イベントの簡単な紹介イベントは、MySQL が特定の時間に呼び出す手続き型データベース オブジ...

複数のドメイン名、ポート、IP仮想ホストに基づくNginx構成

1. タイプの導入1.1 ドメインベースの仮想ホスティングいわゆるドメイン名ベースの仮想ホストとは、...

Windows 2008 Server サブドメインを親ドメインに追加すると、ドメインが既に存在するというエラー メッセージが表示されます。

Windows 2008 Serverのサブドメインを親ドメインに参加させると、「ドメインは既に存...

LINUX でポートが占有されているかどうかを確認する方法

ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...

Vue v-onディレクティブの使用について

目次1. イベントのリスニング2. イベントパラメータを渡す3. イベント修飾子ケース1: クリック...

ネイティブjsはショッピングカートのロジックと機能を実装します

この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...

MySQLのバックアップとリカバリの詳細な説明

序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...

史上最もクリエイティブな404ページのデザインは、ウェブサイトのユーザーエクスペリエンスを効果的に向上させます

ウェブを閲覧しているときに 404 ページに遭遇することはあまりないので、見落としがちです。しかし、...

VueのSSRサーバーサイドレンダリング例の詳細な説明

サーバーサイドレンダリング (SSR) を使用する理由検索エンジンのクローラーが完全にレンダリングさ...

JavaScript の setTimeout() の使用法の概要

目次1. はじめに2. setIntervalとsetTimeoutの違い3.タイムアウトを設定する...

hr 水平線スタイルの例コード

コードをコピーコードは次のとおりです。 <hr style="width:490px...

HTML テーブルタグと関連する改行の問題の詳細な分析

テーブルとは何ですか?テーブルは、データのキャリアである HTML テーブルです。以下は比較的標準的...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

MySQL のインデックス障害の一般的なシナリオと回避方法

序文これまでにも、一部の SQL ステートメントを不適切に使用すると MySQL インデックスが失敗...