この記事では、参考までに、ズームインとズームアウトのドラッグ機能を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux と最もよく使用されるコマンドの紹介 (習得は簡単ですが、問題の 95% 以上を解決できます)
>>: Ubuntu16.04 インストール mysql5.7.22 グラフィックチュートリアル
この記事では、MySQL 5.7.20のインストールと設定方法を参考までに紹介します。具体的な内容は...
1. イベントの簡単な紹介イベントは、MySQL が特定の時間に呼び出す手続き型データベース オブジ...
1. タイプの導入1.1 ドメインベースの仮想ホスティングいわゆるドメイン名ベースの仮想ホストとは、...
Windows 2008 Serverのサブドメインを親ドメインに参加させると、「ドメインは既に存...
ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...
目次1. イベントのリスニング2. イベントパラメータを渡す3. イベント修飾子ケース1: クリック...
この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...
序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...
ウェブを閲覧しているときに 404 ページに遭遇することはあまりないので、見落としがちです。しかし、...
サーバーサイドレンダリング (SSR) を使用する理由検索エンジンのクローラーが完全にレンダリングさ...
目次1. はじめに2. setIntervalとsetTimeoutの違い3.タイムアウトを設定する...
コードをコピーコードは次のとおりです。 <hr style="width:490px...
テーブルとは何ですか?テーブルは、データのキャリアである HTML テーブルです。以下は比較的標準的...
目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...
序文これまでにも、一部の SQL ステートメントを不適切に使用すると MySQL インデックスが失敗...