elementUIポップアップボックスには、カスタムのドラッグ＆ストレッチ機能、プロセスおよび境界を追加することができます

1、最初のVUEのプロジェクトなどでのjsファイルを作成します。dialog.jsを

インポート'VUE'からヴュー
 // V-dialogDrag：ポップドラッグプロパティ 
Vue.directive（ 'dialogDrag' 、{ 
  バインド（ELは、バインディング、vノード、oldVnode）{ 
　　　　　// カスタム属性は、かどうかを判定するドラッグ　
    IF（ ！binding.value）リターン
    dialogHeaderElのconst = el.querySelector（ '-dialog__header EL' ）
    のconst dragDom = el.querySelector（ 'EL-ダイアログ' ）
    dialogHeaderEl.style.cssText + = ';カーソル：移動;' 
    dragDom。 style.cssText + = ';トップ：0PX;' // オリジナルの属性を取得します。つまり、DOM要素.currentStyle FirefoxのGoogleのwindow.getComputedStyleが（DOM要素は、null）; 
    constのSTY =（関数（）{
       IF

    （document.body.currentStyle）{
         // で記述された互換性、すなわち
        リターン（DOM、ATTR）=> dom.currentStyle [ATTR] 
      } 他{
         リターン（DOM、ATTR）=> getComputedStyle（DOM、偽の）ATTR] 
      } 
    }）（）

    dialogHeaderEl.onmousedown =（E）=> {
       // マウスダウン、現在の要素は、可視領域の距離から計算される 
      CONST = e.clientX DISX - dialogHeaderEl.offsetLeft 
      CONST disY = e.clientY - dialogHeaderEl.offsetTop 

      CONST screenWidth = document.body.clientWidth // 身体現在の幅
      document.documentElement.clientHeight screenHeight =定数// 可視領域の高さ（身長は、特定の状況下で、得ることができないはずです）

      CONST dragDomWidth = dragDom.offsetWidth // ボックス幅 
      CONST = dragDom.offsetHeight dragDomheight // ダイアログの高さ

      CONST minDragDomLeft = dragDom.offsetLeft 
      constのmaxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth 

      constのminDragDomTop = dragDom.offsetTop 
      constのmaxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight 

      // 代わりに、通常のピクセルとの値が一致します 
      （dragDomをSTYL = STYを聞かせて' 「左）
 　　　　　// つまり、互換性のある　
      IF（=== STYL [自動]）STYL = '0PX' 
      LET styT = STY（dragDom、 'トップ' ）

      はconsole.log（STYL）
      //は、最初のIEで得られた値に注意してください移動組立体の50％が割り当てられて実施した後PX 
      IF（styL.includes（ '％' ））{ 
        STYL = + document.body.clientWidth *（+ styL.replace（/％/ G ''）/ 100 ）
        styT document.body.clientHeight + * =（+ styT.replace（/％/ G ''）/ 100 ）
      } 他{ 
        STYL = + styL.replace（/ PX / G '' ）
        styT = + styT.replace（ / PX / G '' ）
      }; 

      ドキュメント。れるonmousemove =関数（E）は、{ 
        
        //はイベントデリゲートによって、移動距離算出 
        左せe.clientXを= - DISXが
        トップせ - = e.clientY disY
         // 境界処理を
        IF（ - （左）> minDragDomLeft）は{ 
          左 - = （minDragDomLeft ）
        } 他 IF（左> maxDragDomLeft）{ 
          左 = maxDragDomLeft 
        } 

        IF（ - （トップ）> minDragDomTop）{ 
          トップ = - （minDragDomTop）
        } 他 IF（トップ> maxDragDomTop）{
          トップ= MaxDragDomTop 
        } 

        // 移動現在の要素 
        dragDom.style.cssText + = ';左：左$ {+} STYL PX;トップ：トップ+ $ { styT} PX; ` 
      } 

      document.onmouseup = 関数（E）{ 
        ドキュメント。 ONMOUSEMOVE = nullを
        document.onmouseup = ヌル
      } 
      の戻り をfalseに
    } 
  } 
}）

Vue.directive（ 'dialogChange' 、{ 
  バインド（EL、バインディング、vノード、oldVnode）{ 
　　　　　// カスタム属性、伸縮性か否かを判断する
    のiF！バインディング（ .VALUE）リターン
    のconst dragDomEl.querySelector =（ 'EL-ダイアログ' ）
    dragMouseはせ
    // ポップアップボックスフラグが伸縮=クラス'マウス'追加の右下にある
    ため（I = 0せ; I <dragDom.childNodes [2] .childNodes。長さ; I ++ ）{
       IF（dragDom.childNodes [2] .childNodes [I] .className === 'マウス' ）{ 
        dragMouse = dragDom.childNodes [2 ] .childNodes [I] 
      } 
    } 
    // マウスドラッグ 
    dragMouse。 =れるonmousedown（E）=> {
       // コンテンツエリア 
      CONSTコンテンツ= dragDom.parentNode.parentNode.parentNode.parentNode 
      CONST DISX = e.clientX -dragDom.offsetWidth 
      CONST disY = e.clientY - dragDom.offsetHeight 

      document.onmousemove = 関数（E）{ 
        e.preventDefault（）// 無効デフォルトイベント移動
        // イベントデリゲートによって、移動距離算出 
        LET幅= e.clientX - DISXを
        高LET = e.clientY - disY 

        IF（幅> content.offsetWidth &&高さ< content.offsetHeight）{ 
          dragDom.style.height = `$ {高さpx`} 
        } 他の IF（幅<content.offsetWidth &&高さ> コンテンツ。 offsetHeight）{ 
          dragDom.style.width = `$ {}幅px`
        } そう であれば（幅<content.offsetWidth &&高さ< content.offsetHeight）{ 
          dragDom.style.width = `$ {幅} px` 
          dragDom.style.height = ` $ {高} px` 
        } 
      } 
      document.onmouseup = 関数（E）{ 
        document.onmousemove = ヌル
        document.onmouseup = NULL 
      } 
      戻り 偽
    } 
  } 
}）

2、main.jsに参照

「./components/dialog」インポート

3、ダイアログコンポーネントのコードは、ポップアップを毎回できるようにするためであれば、V-変更がで継承されていないを追加します。

<EL- ダイアログ
        V - の場合 = dialog.dialogVisible 
        V -dialogDrag：{dialogDrag} = dialog.dialogDrag 
        V -dialogChange：{dialogChange} = dialog.dialogChange 
        REF = "dialog__wrapper" 
        ：クローズ -on-クリックモーダル= "false"に
        ：タイトル = dialog.title 
        ：visible.sync = "dialog.dialogVisible" 
        ：前 -close = "handleClose"> 
        <DIV CLASS = "ダイアログ・ボディ"> 
          <DIV CLASS = "行"> 
            <スロット名= "コンテンツ" > </スロット>
          </ div> 
        </ div>
        <スロットスロット= "フッター"クラス= "ダイアログ・フッタ"> </スロット> 
      </ EL-ダイアログ>

基準コンポーネントは、データを返す4、。

ダイアログ：{ // ダイアログが隠されて表示さ 
        dialogVisibleを：falseに、
        dialogDrag：trueに、// ドラッグ可能 
        ：dialogChange trueに、// 伸縮性 
        タイトル： '詳細' 
      }