vue custom instruction notes

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

In vue, the abstract way we will sometimes packaged as a custom instruction, where a plurality of common

For example: dragging instruction

1 <div id="myChart1" class="myChart1" v-drag>
2       {{positionX}}
3       {{positionY}}
4 </div>

. 1  Data () {
 2        return {
 . 3          positionX: 0 ,
 . 4          positionY: 0 ,
 . 5          parentWidth: 0 ,
 . 6          parentHeight: 0 
. 7        }
 . 8      },
 . 9      directives: {
 10        Drag: {
 . 11          inserted The: function (EL, Binding, the vnode ) {
 12 is            the let _this = vnode.context // instruction in order to obtain vue example, may be used vnode.context 
13 is            the let parentWidth = _this. $ refs.test.offsetWidth
14            the let parentHeight = _this. Refs.test.offsetHeight $
 15            the let odiv EL = // Get target element 
16            odiv.onmousedown = (e) => {
 . 17              the console.log (e) e // maybe has the same
 18              @ calculating the relative position of the element mouse 
. 19              the let disX = e.clientX - odiv.offsetLeft
 20 is              the let disY = e.clientY - odiv.offsetTop
 21 is  
22 is              // and moving event 
23 is              document.onmousemove = (E) => {
 24                Console. log (e) e // maybe has the same
 25                @Subtracting the position of the mouse relative to the position of the element with the mouse to give the position of the element 
26 is                the let left = 0 
27                the let Top = 0 
28                IF ((e.clientX - disX) < 0 ) {
 29                  left = 0 
30                } the else  IF (( e.clientX - disX)> (parentWidth - odiv.offsetWidth)) {
 31 is                  left parentWidth = - odiv.offsetWidth
 32                } the else {
 33 is                  left e.clientX = - disX
 34 is                }
 35  
36                IF((e.clientY - disY) < 0 ) {
 37 [                  Top = 0 
38 is                } the else  IF ((e.clientY - disY)> (parentHeight - odiv.offsetHeight)) {
 39                  Top = parentHeight - odiv.offsetHeight
 40                } the else {
 41 is                  top = e.clientY - disY
 42 is                }
 43 is  
44 is                // binding element to a position above positionX and positionY 
45                _this.positionX = top
 46 is                _this.positionY = left
 47 
48                // move the current element 
49                odiv.style.left = left + ' PX ' 
50                odiv.style.top = Top + ' PX ' 
51 is              }
 52 is              document.onmouseup = (E) => {
 53 is                document.onmousemove = null 
54 is                = document.onmouseup null 
55              }
 56 is            }
 57 is          }
 58        }
 59      },

 

Note: Use this $ refs get dynamic values ​​of the time, to write this $ refs [ 'value']..