VUEカスタム命令ノート

https://cn.vuejs.org/v2/guide/custom-directive.html

VUEでは、抽象的には、我々は時々共通の複数のカスタム命令、としてパッケージ化されます

たとえば、次のようにドラッグ命令

1 <DIV ID = " myChart1 "  クラス = " myChart1 " V-ドラッグ>
 2        {{positionX}}
 3        {{位置j}}
 4 </ div>

1  データ（）{
 2        リターン{
 3。          positionX：0 、
 4。          位置j：0 、
 5。          parentWidth：0 、
 6。          parentHeight：0 
。7        }
 。8      }、
 9つの。     ディレクティブ：{
 10        ドラッグ：{
 11は、         関数（EL、結合、vノード：挿入）{
 12は            LETの_this = vnode.context // VUE例を得るために命令、vnode.context使用することができる
13である            LET parentWidth = _this。$ refs.test.offsetWidth
14            parentHeight =ましょう_this。Refs.test.offsetHeight $
 15            odivせEL = // 要素ターゲットゲット
16            odiv.onmousedown =（e）を=> {
 。17              にconsole.logは（e）のeは多分同じ持ち//
 18              @ 要素マウスの相対位置を算出する
。19は              せDISX = e.clientX - odiv.offsetLeft
 20              せdisY = e.clientY - odiv.offsetTop
 21は 
22であり、             // 、イベント移動
23することである              document.onmousemove =（E）=> {
 24                コンソール。ログ（e）のE //は多分同じ持っている
 25                @要素の位置を与えるために、マウスを持つ要素の位置にマウスの位置を差し引く
26はある                左LET = 0 
27                せトップ= 0 
28                IF - （DISX）<（e.clientX 0 {）
 29                  左= 0 
30                } そう IF（（ e.clientX - DISX）>（parentWidth - odiv.offsetWidth））{
 31れる                  - parentWidth =左odiv.offsetWidth
 32                } 他{
 33はされ                  = e.clientXを左- DISX
 34である               }
 35  
36                IF（（e.clientY - disY）が< 0 ）{
 37 [                  トップ= 0 
38である                } 他 IF（ - - （parentHeight disY）（e.clientY> {odiv.offsetHeight））
 39                  トップ= parentHeight - odiv.offsetHeight
 40                } 他{
 41は                  = e.clientYトップ- disY
 42である               }
 43である 
44はれる               // positionXと位置j上方へ結合要素
45                _this.positionX = トップ
 46は                _this.positionY = 左
 47 
48                // 現在の要素を移動する
49                odiv.style.left = +左側' PX ' 
50                odiv.style.top =トップ+ ' PX ' 
51である             }
 52で              document.onmouseup =（E）=> {
 53で                document.onmousemove = ヌル
54れます                = document.onmouseup ヌル
55              }
 56である           }
 57である         }
 58        }
 59      }

注意：[「値を」]この$、参考文献を書くために、レフリーは時間の動的な値を取得し、この$を使用します。..

おすすめ