背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロジェクトで、UI フレームワークは antdV を使用しています。プロジェクトでは、モーダル ダイアログ ボックスが多数使用されています。ある日突然、製品が「このダイアログ ボックスは移動できないのはなぜですか? 情報のビューがブロックされています」と言いました。仕方ありません。需要があれば、私たちはそれをやるしかありません。これが新しい世代の労働者です。 まず、antdV 公式サイトにアクセスして、Modal の構成プロパティとメソッドを調べ、この問題を直接解決できるプロパティやメソッドがあるかどうかを確認しましたが、見つかりませんでした。 2 番目のステップは、Baidu に問い合わせを開始することでした。関連するブログはいくつかありましたが、一般的に言えば、多様すぎて理解するのが困難でした。その後、グローバルカスタム仕様を使用する興味深い方法があることがわかり、自分で問題を解決し始めました。 実装のアイデアまず、主にモーダル ボックスのヘッド部分にマウスを置いたときに左ボタンを押した後にダイアログ ボックスを移動する効果を完成させます。 ここでは、ヘッダー要素を取得してその onmousedown メソッドをリッスンし、onmousedown メソッドの実行中にダイアログ ボックスの高さと幅を計算して境界制限を設定し、ダイアログ ボックスが画面から外れないようにします。次に、document.onmousemove メソッドをリッスンしてマウスの移動方向と距離を計算し、これに基づいてダイアログ ボックスの位置を調整します。 コードの実装 'vue' から Vue をインポートします // ポップアップウィンドウのドラッグプロパティ/** * @directive カスタム属性 * @todo ポップアップドラッグ属性 * @desc ポップアップ内に読み込まれた HTML を使用して v-drag を追加します * @param .ant-modal-header ドラッグに使用するポップアップウィンドウのヘッダーのプロパティ* @param .ant-modal ドラッグするプロパティ*/ Vue.directive('drag', (el, binding, vnode, oldVnode) => { // 挿入された (el、binding、vnode、oldVnode) { Vue.nextTick(() => { const isThemeModal = el.classList.contains('grid-theme') const dialogHeaderEl = isThemeModal ? el.querySelector('.ant-tabs-bar'): document.querySelector('.ant-modal-header') const dragDom = isThemeModal ? el.querySelector('.ant-modal') : document.querySelector('.ant-modal') //dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.cssText += ';cursor:move;' // dragDom.style.cssText += ';top:0px;' // 元の属性を取得します (例: dom element.currentStyle firefox google window.getComputedStyle(dom element, null); const sty = (関数() { (window.document.currentStyle)の場合{ 戻り値 (dom, attr) => dom.currentStyle[attr] } それ以外 { 戻り値 (dom, attr) => getComputedStyle(dom, false)[attr] } })() ダイアログヘッダーEl.onmousedown = (e) => { // マウスが押されたら、現在の要素と表示領域の間の距離を計算します。const disX = e.clientX - dialogHeaderEl.offsetLeft 定数 disY = e.clientY - dialogHeaderEl.offsetTop const screenWidth = document.body.clientWidth // 本文の現在の幅 const screenHeight = document.documentElement.clientHeight // 表示領域の高さ (本文の高さになるはずですが、環境によっては取得できません) const dragDomWidth = dragDom.offsetWidth // ダイアログボックスの幅 const dragDomheight = dragDom.offsetHeight // ダイアログボックスの高さ const minDragDomLeft = dragDom.offsetLeft 定数 maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth - (isThemeModal ? 10 : 0) 定数 minDragDomTop = dragDom.offsetTop const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight - (isThemeModal ? 10 : 0) // 置換するpx正規表現で値を取得します。let styL = sty(dragDom, 'left') styT = sty(dragDom, 'top') とします。 // IEでは、最初に取得される値はコンポーネント自身の50%であり、その値は移動後にpxに割り当てられることに注意してください。 (styL.includes('%'))の場合{ // eslint は次の行を無効にして、無駄なエスケープを禁止します styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100) // eslint は次の行を無効にして、無駄なエスケープを禁止します styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100) } それ以外 { styL = +styL.replace(/\px/g, '') styT = +styT.replace(/\px/g, '') }; document.onmousemove = 関数 (e) { // イベント委譲を通じて移動距離を計算する let left = e.clientX - disX top = e.clientY - disY とします。 // 境界処理 if (-(left) > minDragDomLeft) { 左 = -(minDragDomLeft) } そうでない場合 (左 > maxDragDomLeft) { 左 = maxDragDomLeft } if (-(top) > minDragDomTop) { 上 = -(minDragDomTop) } そうでない場合 (top > maxDragDomTop) { 上 = maxDragDomTop } // 現在の要素を移動する dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` } document.onmouseup = 関数 (e) { ドキュメント.onmousemove = null document.onmouseup = null } } }) }) コンポーネント呼び出し ... <a-modal v-model="visible" title="プロンプト" :maskClosable="false" @cancel="handleCancle" @ok="handleOk" v-drag> <p>フィールドを削除してもよろしいですか?</p> </a-modal> ... 成果を達成するVue グローバルカスタムディレクティブの Modal drag の実践に関するこの記事はこれで終わりです。より関連性の高い Vue Modal drag コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: 一般的な MySQL 関数の例の概要 [集計関数、文字列、数値、時刻と日付の処理など]
並べ替えの場合、order by は非常に頻繁に使用するキーワードです。インデックスに関するこれまで...
Scrcpyのインストールsnap install scrcpy adbサービスのインストールsu...
最近、CSS インターフェースに取り組んでいるときに、line-height と height とい...
文書タイプDoctype は、指示を解析するためにどのバージョンの HTML を使用するかをブラウザ...
Linux/Mac の MySQL パスワードを忘れた場合はどうすればいいですか?心配しないでくださ...
フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...
k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...
ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...
目次序文1. インストール1.公式サイトからダウンロード2. 構成を作成する3. MySQLを初期化...
この記事では、画像の切り取りとアップロードを実装するためのvue-cropperコンポーネントの具体...
この記事は主に、MySQL インデックスの長さ制限の原理の分析を紹介します。サンプル コードを通じて...
タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...
XHTML は 3 つのドキュメント タイプ宣言を定義します。最もよく使用されるのは XHTML T...
インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...
質問1:エラーを報告する書き込み方法: GRANT OPTION を使用して、'123123...