vue自定义指令笔记

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

在vue中，有时候我们会把抽象的方法封装为一个自定义指令，多个地方共用

比如：拖拽指令

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: function (el, binding, vnode) {
12           let _this = vnode.context // 指令里要想获取vue实例，可以使用vnode.context
13           let parentWidth = _this.$refs.test.offsetWidth
14           let parentHeight = _this.$refs.test.offsetHeight
15           let odiv = el // 获取目标元素
16           odiv.onmousedown = (e) => {
17             console.log(e) // 这俩个e一样
18             // 算出鼠标相对元素的位置
19             let disX = e.clientX - odiv.offsetLeft
20             let disY = e.clientY - odiv.offsetTop
21 
22             // 并移动的事件
23             document.onmousemove = (e) => {
24               console.log(e) // 这俩个e一样
25               // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
26               let left = 0
27               let top = 0
28               if ((e.clientX - disX) < 0) {
29                 left = 0
30               } else if ((e.clientX - disX) > (parentWidth - odiv.offsetWidth)) {
31                 left = parentWidth - odiv.offsetWidth
32               } else {
33                 left = e.clientX - disX
34               }
35 
36               if ((e.clientY - disY) < 0) {
37                 top = 0
38               } else if ((e.clientY - disY) > (parentHeight - odiv.offsetHeight)) {
39                 top = parentHeight - odiv.offsetHeight
40               } else {
41                 top = e.clientY - disY
42               }
43 
44               // 绑定元素位置到positionX和positionY上面
45               _this.positionX = top
46               _this.positionY = left
47 
48               // 移动当前元素
49               odiv.style.left = left + 'px'
50               odiv.style.top = top + 'px'
51             }
52             document.onmouseup = (e) => {
53               document.onmousemove = null
54               document.onmouseup = null
55             }
56           }
57         }
58       }
59     },

vue自定义指令笔记

猜你喜欢